SVG Control: @commands
Add interactivity and animation to SVG files using @commands. Commands can be issued by naming layers inside a vector graphics editor (i.e. Adobe Illustrator, Figma, Inkscape), or via the id parameter of SVG tags (shape id=”@command”) using a text editor (i.e. Notepad).
You can explore some basic examples of how @commands are used in SVG files here.
Below is the list of the supported commands.
Transformation
Add movement to shapes in response to mouse motion.
@move - Allows you to move an object horizontally and/or vertically within a specified range.
@follow - Makes an object follow the mouse pointer horizontally and/or vertically within a specified range.
@scale - Scales an object horizontally and/or vertically in relation to a specified origin point.
@flip - Flips an object horizontally and/or vertically in relation to a specified origin point.
@rotate - Rotates an object around a specified origin point. The sweep angle is specified in the properties panel.
@rotateS - Similar to @rotate, but only the shape will be rotated while its gradient fill will remain static.
Transformation Modifiers
Limit a transformation to a single axis, modulate transformation, or make a shape react in reverse to the mouse movement.
X - Limits the object's transformation to horizontal movement. i.e. @moveX. Not available for rotation.
Y - Limits the object's transformation to vertical movement. i.e. @moveY. Not available for rotation.
@modulate - Transformation will be modulated by the signal connected to the Modulation Value pin.
@reverse - Applies transformation in the opposite direction of the mouse movement.
Transformation Helper Objects
Easily change transformation parameters (origin and/or range) by drawing helper objects. Only their position and/or size will be used to set the parameters, but they will not be displayed in SynthEdit (SE).
@origin - Transforms a circle into an origin point for rotation, scale, or flip transformation. If more than one origin point is defined, only the last parsed will be used. If not specified, the center of the module will be used as the origin.
@range - Transforms a rectangle into a range used by follow or move transformations. If more than one range area is defined, only the last parsed will be used. If not specified, the whole area of the module will be used as the range.
Appearance
Change the appearance of shapes fast and easily.
@color - Changes the color of an object to the one specified in the properties panel. If no layer contains this command, all layers will be recolored. Useful for fast recoloring of icons inside SE. The “@color” field accepts standard CSS color names (i.e Red, Orange, Yellow…) and hex color codes (#RGB, #ARGB, #RRGGBB, #AARRGGBB).
@color + (Cap, Neon, Pointer, or Print) - Assigns additional colors to appropriate pins. Useful for making UI color themes.
@show - Changes the opacity of an object based on the mouse state (normal, hover, and pressed). Opacity values used for each state are specified in the properties panel. If no layer contains this command, all layers will change their opacity in regard to the mouse state.
@hide - Similar to “@show”, but in reverse.
Text
Swap labels or display values inside SE.
@label - Allows you to easily change a label text in SE via a pin.
@value - Allows you to easily change a value text in SE via a pin.
@item - Automatically replaces all the “@item” texts to appropriate List Item names. Useful for switches and selectors.
Text Modifiers
Modify text alignement. Text is aligned centrally by default.
L - Aligns text to the left. i.e. @labelL
R - Aligns text to the right. i.e. @labelL
Special Objects
Transform simple shapes into objects that are common in audio plugin UI design.
@image - Transforms a rectangle into an image frame. The image link to a bitmap file is specified in the properties panel. Useful for applying transformations to bitmaps or adding textures to otherwise flat vector shapes.
@ring - Transforms a circle into a modulation ring track. The sweep angle is specified in the properties panel.
@ringFill - Transforms a circle into an animated modulation ring fill.
@ringFillB - Transforms a circle into an animated bidirectional modulation ring fill.
