SVG Loader | Rasterizes Scalable Vector Graphics coming in as File or XML Text. |
The SVG Loader Node is able to create a Texture in the respective dimension based on an SVG File or XML Text.
Width and Height define to which dimensions the SVG File should be rasterized. If set to zero it will use the dimensions given in the SVG file.
To avoid misunderstandings: the SVG is not handled as a Geometry or Vector object but rendered to a Texture and therefore is not resolution independent!
Once loaded, the SVG Loader Node will fire the Loaded Event. If the file cannot be loaded by the SVG Loader it will fire the Failed Event.
Beside the SVG File Loader that allows to load SVG files directly, you can use the SVG Text to create an SVG from XML text.
Note that an SVG File is an XML File with a specific structure and thus can be loaded and modified with an XML File Node before using it in an SVG Text Node.
The following listing shows an example SVG that will render as the Ventuz Logo.
Example:
<svg viewBox="0 0 785.45331 240.56" height="240.56" width="785.45331" id="ventuz_svg" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1.3333333,0,0,-1.3333333,0,240.56)" id="g10"> <g transform="scale(0.1)" id="g12"> <g id="g14"> <g id="g16"> <path id="l" style="fill:#f04c1d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 388.262,1804.2 H 0 V 0 H 388.262 V 139.98 H 140 V 1664.2 h 248.262 v 140" /> <path id="V" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 839.199,370.398 398.27,1386.2 H 649.59 L 839.199,910.656 1027.32,1386.2 h 251.31 L 839.199,370.398" /> <path id="E" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1323.09,441.141 v 945.069 h 769.01 v -222.73 h -537.24 v -127.91 h 437.91 V 812.855 H 1554.86 V 663.84 H 2092.1 V 441.141 h -769.01" /> <path id="N" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 2369.82,930.23 V 441.141 H 2139.58 V 1453.94 l 564.33,-556.815 v 489.085 h 230.26 V 373.391 L 2369.82,930.23" /> <path id="T" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 3238.97,1163.48 h -255.84 v 222.72 h 743.42 V 1163.48 H 3470.72 V 441.141 h -231.75 v 722.339" /> <path id="U" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 3775.54,832.418 v 553.792 h 230.24 V 867.016 c 0,-70.246 18.06,-124.676 54.16,-163.266 36.12,-38.66 82.26,-57.941 138.47,-57.941 56.16,0 102.32,19.281 138.44,57.941 36.12,38.59 54.19,93.02 54.19,163.266 v 519.194 h 231.72 V 832.418 c 0,-112.387 -39.1,-208.207 -117.35,-287.438 -81.29,-81.281 -183.6,-121.921 -307,-121.921 -123.41,0 -224.77,40.121 -304.01,120.39 -79.25,80.27 -118.86,176.582 -118.86,288.969" /> <path id="Z" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 5069.76,1163.48 h -403.32 v 222.72 h 814.12 l -462,-722.36 h 427.43 V 441.141 h -832.24 l 456.01,722.339" /> <path id="r" style="fill:#f04c1d;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 5502.69,1804.2 h 388.25 V 0 h -388.25 v 139.98 h 248.25 V 1664.2 h -248.25 v 140" /> </g> </g> </g> </g> </svg>
Output:
There are some limitations to the Ventuz SVG Nodes.
SVG Text needs to be tested carefully since it has a lot of limitations and inaccuracies:
Embedded Images work, but not all compositing features and blending modes are supported. Online references are not recommended.
CSSs must be embedded in the SVG document to work and not all features are working.
Animations, Interactions, Filters, Effects, Clipping and Masking are not supported and do not work.