Svg.png

The SVG Widget allows you to work with vector images in Singular by taking SVG code and rendering it in your Composition.


To learn how to add a Widget to your Composition, click here. 

Remember, any underlined widget properties can be connected to a Control Node or a Data Node.

Property Settings

As seen above, select the "SVG" tab in the Property Panel to update this widget's following property types: Properties.

Properties

Screen_Shot_2020-01-08_at_3.34.24_PM.png

SVG Code - Space for pasting in your SVG code.

Example code for a star:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
<style type="text/css">
.st0{fill:#7AEDFF;stroke:#000000;stroke-width:10;stroke-miterlimit:10;}
</style>
<polygon class="st0" points="957.7,308.2 1009.2,466.6 1175.7,466.6 1041,564.5 1092.4,722.8 957.7,625 823,722.8 874.4,564.5
739.7,466.6 906.2,466.6 "/>
</svg>

How do you find your SVG code? When exporting an SVG from Illustrator, for example, you have the option to click a "Show Code" button on the bottom left of the save dialog box.

Screen_Shot_2020-01-08_at_3.38.50_PM.png

We recommend using Adobe Illustrator to generate your SVG code but there are many other approaches that will work just fine.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.