[enhancement] Inline SVG support

[andreasplesch]

Super to take on SVG parsing and rendering. Perhaps the tests below can be helpful.

https://github.com/Unity-Technologies/vector-graphics-samples/tree/master/Assets/SVGDemo has a few SVG examples.

Here is how they render in the x-ite playground.

https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/ellipse.svg

https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/gradient-addressing.svg

https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/gradient-linear.svg

https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/pattern.svg [pattern not supported by parser]

https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/tiger.svg

error: Couldn't load URL 'https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/tiger.svg':x1 is not defined

I had started with tiger.svg because it is a famous vector graphic example but it probably is too complex to use for testing.

[create3000]

Thank you Andreas for providing these examples.

They should now work as well as it can get, except patterns, which are not supported. Gradients are already implemented, but tested with Inkscape files (which should work well).

Your provided files are somehow special compared to Inkscape, but these issues are now fixed, also tiger.svg will work. The SVG parser is not perfect but for basic support for shapes and pathes it should work well.

Best regards, Holger

Am 21.02.2023 um 20:14 schrieb Andreas Plesch @.***>:

Super to take on SVG parsing and rendering. Perhaps the tests below can be helpful.

https://github.com/Unity-Technologies/vector-graphics-samples/tree/master/Assets/SVGDemo has a few SVG examples.

Here is how they render in the x-ite playground.

https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/ellipse.svg

https://user-images.githubusercontent.com/6171115/220434501-20706e34-405a-4cb1-855d-8231363d2e8a.png https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/gradient-addressing.svg

https://user-images.githubusercontent.com/6171115/220434959-da95d237-3ab0-4467-a220-7d658c83d7fd.png https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/gradient-linear.svg

https://user-images.githubusercontent.com/6171115/220435221-9f326b65-0754-458c-aaad-830c7030b234.png https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/pattern.svg

https://user-images.githubusercontent.com/6171115/220435492-fed9c37c-6e9d-4ab5-a278-dfdba3b66c7b.png https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/tiger.svg

error: Couldn't load URL 'https://raw.githubusercontent.com/Unity-Technologies/vector-graphics-samples/master/Assets/SVGDemo/tiger.svg':x1 is not defined

I had started with tiger.svg because it is a famous vector graphic example but it probably is too complex to use for testing.

— Reply to this email directly, view it on GitHub https://github.com/create3000/x_ite/issues/133, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAWLMFHTRTXHPV2G4VYNYWTWYUHZ7ANCNFSM6AAAAAAVDNRAMA. You are receiving this because you are subscribed to this thread.

[andreasplesch]

Thanks, much improved. The linear gradient works perfect. The radial gradient works but shows the same gradient three times for me. The tiger.svg was generated Adobe Illustrator according the header and displays but I get z-fighting.

https://upload.wikimedia.org/wikipedia/commons/d/d2/Ghostscript_tiger_%28original_background%29.svg

is another tiger svg generated by ghostscript where I also get z-fighting which may be hard to avoid.

[andreasplesch]

The ellipse in the first example is shown as an ellipse but should be a circle.

The viewport has a different aspect ratio than the svg element itself. This normally means that there is stretching to fill the space.

But the SVG element has

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

which by default is set to preserve aspect ratio and not stretch. Perhaps possible to support.

[create3000]

All these are fixed now.

[create3000]

Except patterns.

[create3000]

Think this is fixed now, except patterns, but this is no bug, it is simply not supported.