Close

Palette:webSvg

Summary

The webSvg COMP is used to load SVG files in TouchDesigner. It is meant to replace the now deprecated SVG TOP and comes with all the same functionalities including Transform order, Translate, Rotate, Scale, Uniform Scale, Pivot. Note that the webSvg COMP is relying on the Web Render TOP which comes with some Pros and Cons.

A limitation is that the Web Render TOP runs in its own thread, therefore, you can expect changes to the webSvg COMP to sometimes update 1 to 2 frames later. 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:webSvg Ext


Parameters - Web SVG Page

File File - The file path to the .svg file to be loaded using the webSvg 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 WebSvg COMP doesn't pull the texture from the CEF subprocess. It might add a small delay but it also avoid the operators down the network relative to the WebSvg COMP to cook all the time. If necessary, set this toggle to On and the WebSvg 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.