New Xojo SVG rendering library

General
1

Ten years ago, I attempted to write an SVG rendering library in pure Xojo code. Unfortunately, my experience at the time, combined with the limitations of Xojo’s drawing routines, led me to abandon the project.

Now, a decade later, I’ve decided to take another stab at it. Xojo’s framework has seen major improvements over the years… for example, the addition of the GraphicsPath object, better miter settings, and other enhancements. These new features make it much easier to write an SVG rendering library. My own experience has also grown, allowing me to better tackle the math involved in vector graphics.

So I present to you xojo-svg at https://github.com/Zoclee/xojo-svg.

This new library builds upon the original version, with many, many, MANY bug fixes, lots of optimizations, and a code size reduction of more than 30%. All known issues have now been fixed.

@Thom_McGrath I’m not sure if you even remember submitting issues ten years ago, but I’ve tested and resolved all of them in this new version. Here’s an example of one of the SVGs that failed before.

image
image751×218 4.26 KB

This library is still far from a full implementation of the complete SVG specification, but it should render most SVGs without any problems.

I hope to expand on more advanced features such as shadows, text skewing matrices, and even animation in the future. I’d like to invite you to use and support this project for the benefit of the Xojo community.

For those who are serious about using SVGs in your projects, please consider adding your support to the following ticket. If the transformation matrix were exposed on the Graphics object, it would dramatically reduce the amount of code required for this library and provide significant rendering performance benefits.

https://tracker.xojo.com/xojoinc/xojo/-/issues/79756

17 Likes
2

If you find any SVG images that don’t render as expected, please share them with us so that we can resolve any potential issues.

1 Like
3

A standard test maybe? https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg

4

Thank you for the test file Odeyani :folded_hands:

I’ve added it to our battery of tests, and see that the xojo-svg library is missing a couple of instructions causing this particular svg to fail. We will implement these missing instructions as a first priority, and will let you know as soon as it is fixed.

2 Likes
5

Some good news @Odeyani_Lugardo… we were able to implement the missing instructions, and your test SVG now renders without error.

image
image721×609 12.3 KB

The latest fixes have been pushed to GitHub.

We will also now tag this as version 1.0.0 of xojo-svg and create separate versions with upcoming updates and changes. With each tag we will note the Xojo version used for the development of that particular version.

5 Likes
6

Maybe consider making functionality that’s dependent on a particular version guarded behind #if statements so the library can still be used on older versions. In the #else clause, you could simply raise an UnsupportedOperationException so the dev could handle the error themselves?

#if XojoVersion >= 2024.01
  // do new feature
#else
  Raise New UnsupportedOperationException
#endif
1 Like
7

Great idea, I will definitely use that approach to ensure that the library remains downward compatible. Thank you for the suggestion @Greg_O.

That being said, I will also try to only use unsupported operations when absolutely necessary.

2 Likes
8

Awesome!

If you want more tests, you can start with the oficial SVG 1.2 Test suite:

1 Like
9

Perfect, thanks @Odeyani_Lugardo, will start working through the test suite.

We discovered a few more issues by picking random Svg files from across the Internet, which has been fixed, and a couple more fixes on the way. Will publish a new version soon.

10

New release has been tagged for xojo-svg: Version 1.1.0

* Fixed incorrect pen position after drawing arc.
* Fixed issue with pen starting position.
* Parent y position is now correctly used when starting a new path.
* Implemented Bézier curves.
* Fixed infinite loop caused by path arc command.

5 Likes
11

I apologize for all the rapid releases, but we just want to get xojo-svg to a production level library as soon as possible.

Version 1.2.0 is now released, which contains the following fixes and improvements.

  • Optimized rendering of the path node.
  • Implemented support for rounded rectangle corners.
  • Fixed issue where closing polygon does not apply miter join correctly.

The next release will take a bit longer since we are now working on more advanced SVG features. But at the current state the library should be production ready for most SVG images. If you do however find any SVGs that are not rendering correctly, please pass them on so that we can investigate and fix any issues.

12

Just in case you do not know this site:
SVG @ w3schools

1 Like
13

Be cautious of not making it a big fat lib with too many features when 99% of the cases people just want to draw/render an image in Xojo (sometimes scaling/rotating/displacing/clipping)

The “tiny profile 1.2” ignoring advanced features intended for web as scripting, animation, multimedia, etc covers 96% of the use cases for “image rendering”.

14

While I mostly agree with this sentiment, SVG is a little special in this area because you often don’t control which commands a source file uses. Take the bootstrap icons for example, they could easily use an obscure, hardly ever used functionality and someone wanting to use those icons would never know. Rather than playing cat & mouse forever, it might be easier to just implement as much of the standard as possible if he gets on a roll.

1 Like
15

@Rick_Araujo, maybe just to address your concerns… we do take the goal of ensuring the library is compact and lightweight very seriously. I think the world has enough bloated software libraries for yet another one. So what I’m trying to say is that we will be very cautious to introduce anything that would affect either performance or size negatively.

We would also welcome and like to encourage continuous community feedback on this library to ensure we build something that is in line with expectations, and valuable to anyone deciding to use SVGs in their projects.

Our approach will be an “on a per need basis” strategy… e.g. if someone sends us a svg that fails to render, we will investigate and use our discretion about the possible solutions.

@Greg_O is making a valid point, in that you don’t want to commit to a specific library of svg images, and then get blindsided by one or two that uses obscure instructions. But once again, we will deal with this on a per need basis if people can just report those problem SVGs to us.

At this point though I believe we are very close to an implementation that will satisfy more than 95% of use cases (if you exclude advanced features such as scripting, animation etc).

The Tiny 1.2 does for now seem like a good guideline to follow during these initial phases of development.

1 Like
16

So we received a few requests for some features and decided to push out one more quick release to attend to these requests. Version 1.3.0 of xojo-svg is now tagged on GitHub with the following changes:

  • Implemented linear gradient brush.
  • Fixed issue when indexing nodes to be used by the “use” instruction.
  • Implemented support for stroke-dasharray attribute.
  • Implemented support for stroke-linecap attribute.
  • Implemented support for stroke-linejoin attribute.

Thank you to everyone who sent through their feedback to help us discover the issues and missing features mentioned in the notes above.

3 Likes