Do you want to export vector files from TouchDesigner to be cut, plotted, or printed? Scalable Vector Graphics (SVG) files are probably the most common graphic format for this purpose. Unfortunately, TouchDesigner currently doesn’t support exporting files into SVG, but that doesn’t mean it’s impossible. Using some external Python, you can make your generative designs in vectors!
Luckily, Matthew Ragan has a tool just for the SOP to SVG pipeline. There will be some preparation needed to have the tool work, but this blog post will give you a step-by-step guide on using the ‘base_sop_to_svg’ tool and some tips and tricks to guarantee success. This blog is also a good reference for setting up any external library in TouchDesigner.
Downloads
You’ll first need to download some essential files.
Python
Make sure you have Python downloaded to your machine.
As of this blog, the current Python version is 3.11.5
When downloading Python, I recommend doing the ‘Customize installation’ option rather than ‘Install Now.’ This step will allow you to choose where you want the Python folder to be saved.
If you’re using a PC, As you’re prompted to save Python, you have the option to save a location. I recommend keeping it in a path that is easy to manage such as:
C:\Python311\
Then it will be easy to find later on.
svgwrite
Svgwrite will be the external library used to have the tool work. We’ll have steps in the next section on how to install svgwrite. As you’re going through those steps you can also reference Matthew’s setup instructions on the GitHub repository:
https://github.com/raganmd/touchdesigner-sop-to-svg
Matthew Ragen’s Git-Repo
You can download the touchdesiger-sop-to-svg Repo by clicking the button in the top right of the repo called “Code” and then select Download ZIP.
Setting Up svgwrite External Library
Once you have Python installed, open the Command Prompt if you’re using a PC or Terminal if you’re using Mac For PC.
For PC users
In the Command Prompt copy this line below and fill in the information to make sure the path is correct to your TouchDesigner installation:
pip install --target="C:\\Program Files\\Derivative\\YOUR_VERSION_OF_TOUCHDESIGNER\\bin\\Lib\\site-packages" svgwrite
For Mac users
In the terminal type in the following commands in order. Make sure in the final command to update the path, as the version of Python changes in TouchDesigner
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py python3 get-pip.py python3 -m pip install --target=/Applications/TouchDesigner.app/Contents/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages svgwrite
If you don’t get any errors, you have successfully installed svgwrite external library to your TouchDesigner installation!
Setting Up External Library in TouchDesigner
The next step isn’t 100% required but will help set you up for adding further Python libraries in your system. In TouchDesigner, under ‘Edit’, you will go to preferences. If you’re using a Mac it will be under ‘TouchDesigner’.
Make sure that “Add External Python to Search Path” is checked.
In Python 64-bit Module Path, we will direct the path to our Python folder and specifically inside the Python folder is a Lib folder and a site-packages folder. If you have saved the customized location while downloading Python, your path should be similar or the same as mine
C:/Python311/Lib/site-packages
After saving your settings, restart TouchDesigner.
base_sop_to_svg Tool
Open Matthew Ragen’s repo. You will find the Tox file in the ‘release’ folder. You can drag and drop the tox into your network. A text prompt will open and write some script. If you successfully imported the svgwrite library, the base_sop_to_svg Tools should work!
Tool Tips
Inside the Base COMP, I made some adjustments to my preferences.
Changing Tool Material
I changed the Wireframe MAT to a Line MAT. I find the Line MAT to have more parameter options to give more variety in looks that are helpful during previz.
Adjusting Camera Settings
For the default_cam, I zero out all the rotation and changed the tz to the value 5
Although I want the option to change the camera settings, I added a custom parameter page on the Base file.
Tool Custom Parameters
If you haven’t made Custom Parameters before, it’s easy and a game changer.
You can create custom parameters by clicking the COMP and selecting Customize Component. You can directly drag the parameter you want in the Component Editor.
It is important to ensure you choose “Bind New Par as Master.” This action will allow you to adjust the parameter from the Base and directly from the Operator’s parameters without breaking the path.
Once you change the tool settings, I highly recommend saving the tool inside your Pallet! Then, you don’t need to find the tox file in your folder in the future.
If you’re using the back, you can’t just save the tool, but you’ll have to use the Toe file.
Get Our 7 Core TouchDesigner Templates, FREE
We’re making our 7 core project file templates available – for free.
These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.
They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.
Saving to SVG
Okay, so now how do I make a SOP into SVG?? I got you. We’ll connect a SOP operator into the tool. For this example, I created a pattern using two Circle SOPs connected to a Copy SOP. This essentially takes one circle and copies it onto all of the points of the other circle. I have the Operator in wireframe mode here so we can see how the SVG would look like when exported. One important thing to note, is that by default the TouchDesigner SOP sizes will be quite small for the SVG export, so we will need to scale up our geometry before exporting. Add a Transform SOP and change the Uniform Scale to 50. Once you’re done, connect this to the SVG export tool’s SOP input.
In the tool’s parameter settings, please select a Folder to save your new pattern in and a name for the file. Press pulse when you’re ready to save
You will probably notice the SVG file looks primarily white, but there is something in the top left corner.
This issue is because TouchDesigner unit space doesn’t have a direct correlation to a resolution. You will need to open the SVG file in a program to move the path, such as Adobe Illustrator.
There you have it! SOP into SVG Now you can send your creation to be laser cut, AxiDraw, or other system that can ingest SVGs!
Wrap-Up
There is a setup involved, but once you have the external library set up, this can be part of your designing pipeline to create vector graphics from TouchDesigner. This tool helps develop quick generative visuals, especially utilizing SOPs such as copy SOP to make interesting patterns.
