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.


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



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="" xmlns: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">
<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 "/>

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.


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



Please sign in to leave a comment.