If you’ve ever tried to work with the SVG TOP in TouchDesigner you’ve likely had one of two experiences – it worked like a charm out the gate, or you found yourself scratching your head and cursing under your breath wondering how on earth this file type works.
If the latter has been your experience, I’m here to tell you that you’re not alone, and that there are a few things to keep in mind when working with the SVG TOP.
Scaleable Vector Graphics are an XML based image format that are vectors by nature – allowing for a resolution independence when creating images. As these images are encoded in XML, it’s important to understand that we can edit them with any text editor. Let’s take a quick look at what a simple circle might look like. I started by drawing a circle in illustrator, and then exporting the image as an SVG. If we open up the this file in a text editor we see:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" 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 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#ED1C24;stroke-width:12;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="250" cy="250" r="172.5"/>
</svg>
This is all well and good, but if we try to open this in touch, it doesn’t work – we can open it in a web browser, or another imaged editing application, but not Touch… what gives?! Well, what’s missing is a width and height attribute. While other applications pass in default values for the size of an SVG, touch relies on the file to define those attributes about the image. If you’re scratching your head, that’s okay. Let’s look at what a properly formatted SVG file looks like for TouchDesigner. In this case I’m going to use the same file, but with an added height and width tag:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" 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 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve" height="500" width="500">
<style type="text/css">
.st0{fill:none;stroke:#ED1C24;stroke-width:12;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="250" cy="250" r="172.5"/>
</svg>
If you’re looking at these two code snippets and feeling like they look the same, you’re close, but there is one small difference:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" 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 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve" height="500" width="500">
<style type="text/css">
.st0{fill:none;stroke:#ED1C24;stroke-width:12;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="250" cy="250" r="172.5"/>
</svg>
The addition alone of a height and width attribute in your XML makes all the difference in being able to import and open the file in TouchDesigner. It’s important to note that you can set the dimensions of these attributes to anything you want, but you do need to have them in order to correctly open your file.
Next time you can’t seem to open that SVG file, make sure you double check the XML, and you should be well on your way to important vector graphics.
Matthew Ragan 