Close

Privacy policy

Follow us

https://www.instagram.com/touchdesigner/
https://www.facebook.com/TouchDesigner
https://twitter.com/1null1
https://www.youtube.com/TouchDesignerOfficial
All
User Guide
Forum
Tutorials
Events & Workshops
Features
Community
Showcase
Resources
  1. Home
  2. Palette:SVG

    Palette:SVG

    Summary

    The SVG COMP loads and renders SVG (Scalar Vector Graphics) files in TouchDesigner. It has functions like Transform order, Translate, Rotate, Scale, Uniform Scale, Pivot.

    Note: Formerly known as webSvg COMP, this is renamed to SVG COMP in 2022.20350+. It replaces the now deprecated SVG TOP

    The SVG COMP uses the Web Render TOP which has some pros and cons. A limitation is that the Web Render TOP runs in its own thread, therefore, you can expect changes to the SVG COMP to sometimes update 1 to 2 frames later. But an advantage of this is that heavy SVG files or transforms that could cause frame drops will not impact the main TouchDesigner thread.

    PythonIcon.pngPalette:SVG Ext


    Parameters - SVG Page

    File File - The file path to the .svg file to be loaded using the SVG COMP.

    Reload Reload - If for some reason the .svg file failed to load, you can pulse Reload to attempt to load the file again. Additionally, pulse Reload can be used to update the asset when the file was modified in another application.

    Cook Always Cookalways - By default, the SVG COMP doesn't pull the texture from the CEF (the wrapper around Chromium in the Web Render TOP) sub-process. It might add a small delay but it also avoid the operators down the network relative to the SVG COMP to cook all the time. If necessary, set this toggle to On and the SVG COMP will continuously update.

    Output Resolution Outputresolution - ⊞ - The resolution at which the SVG will render. The SVG will scale to fit the viewport and be centered.
    • Output Resolution Outputresolution1 -
    • Output Resolution Outputresolution2 -
    Background Color Backgroundcolor - ⊞ - Color applied behind the SVG asset when it doesn't cover the viewport or uses transparency.
    • Background Color Backgroundcolorr -
    • Background Color Backgroundcolorg -
    • Background Color Backgroundcolorb -
    • Background Color Backgroundcolora -
    Transform Order Xord - ⊞ - The menu attached to this parameter allows you to specify the order in which the changes to your TOP will take place. Changing the Transform order will change where things go much the same way as going a block and turning east gets you to a different place than turning east and then going a block.
    • Scale Rotate Translate srt -
    • Scale Translate Rotate str -
    • Rotate Scale Translate rst -
    • Rotate Translate Scale rts -
    • Translate Scale Rotate tsr -
    • Translate Rotate Scale trs -
    Translate T - ⊞ - The two fields for Translate allows you to specify transforms in x and y axes. In fraction units.
    • Translate Tx -
    • Translate Ty -
    Rotate R - The field for rotation allows you to specify the amount of rotation of the image.

    Scale S - ⊞ - The two fields for Scale allows you to specify transforms in x and y axes.
    • Scale Sx -
    • Scale Sy -
    Uniform Scale Scale - Multiplies the Scale parameters by Uniform Scale to scale the TOP in both x and y axes at the same time.

    Pivot P - ⊞ - The Pivot point edit fields allow you to define the point about which the TOP scales and rotates. Altering the pivot point of a TOP produces different results depending on the transformation performed on the TOP image.

    For example, during a scaling operation, if the pivot point of a TOP image is located at -1,-1 and you wanted to scale the image by 0.5 (reduce its size by 50%), then the TOP would scale toward the pivot point and appear to slide down and to the left.

    • Pivot Px -
    • Pivot Py -


    Operator Outputs

    • Output 0 - The resulting SVG rendered, with all transforms and other parameters applied to it.