Svg

arc_to

Appends an Arc To (A) command to SVG path data.

Inputs:

• d (Text) — path data so far
• rx (Number) — x radius of the ellipse
• ry (Number) — y radius of the ellipse
• rotation (Number) — x-axis rotation in degrees
• large_arc (Boolean) — use the large arc sweep
• sweep (Boolean) — arc drawn in positive-angle direction
• x (Number) — target x coordinate
• y (Number) — target y coordinate

Output: d (Text) — path data with A command appended

Example: d = M 20 75, large_arc = false, rotation = 0, rx = 80, ry = 30, sweep = true, x = 180, y = 75 → M 20 75 A 80 30 0 0 1 180 75

See also: move_to, curve_to, path

circle

Creates an SVG element.

Inputs:

• cx (Number) — center x
• cy (Number) — center y
• r (Number) — radius
• fill (Text) — fill color
• stroke (Text) — stroke color
• stroke_width (Number) — stroke width

Output: svg (Text) — SVG circle element

See also: ellipse, rect

close_path

Appends a Close Path (Z) command to SVG path data.

Inputs:

• d (Text) — path data so far

Output: d (Text) — path data with Z appended

See also: move_to, path

compose

Combines two SVG fragments into one.

Inputs:

• a (Text) — first SVG fragment
• b (Text) — second SVG fragment

Output: svg (Text) — combined SVG fragments

See also: group, document

curve_to

Appends a cubic Bezier Curve (C) command to SVG path data.

Inputs:

• d (Text) — path data so far
• cx1 (Number) — first control point x
• cy1 (Number) — first control point y
• cx2 (Number) — second control point x
• cy2 (Number) — second control point y
• x (Number) — target x coordinate
• y (Number) — target y coordinate

Output: d (Text) — path data with C command appended

See also: quad_to, arc_to, path

document

Wraps SVG content in a root

Inputs:

• content (Text) — SVG elements to wrap
• width (Number) — document width
• height (Number) — document height
• viewbox (Text) — custom viewBox — blank derives from width/height
• background (Text) — background color — blank for transparent

Output: svg (Text) — complete SVG document

See also: compose, render

ellipse

Creates an SVG element.

Inputs:

• cx (Number) — center x
• cy (Number) — center y
• rx (Number) — x radius
• ry (Number) — y radius
• fill (Text) — fill color
• stroke (Text) — stroke color
• stroke_width (Number) — stroke width

Output: svg (Text) — SVG ellipse element

See also: circle, rect

group

Wraps SVG content in a group with an optional transform.

Inputs:

• content (Text) — SVG elements to group
• transform (Text) — SVG transform attribute value

Output: svg (Text) — grouped SVG elements

See also: transform, compose

line

Creates an SVG element.

Inputs:

• x1 (Number) — start x
• y1 (Number) — start y
• x2 (Number) — end x
• y2 (Number) — end y
• stroke (Text) — stroke color
• stroke_width (Number) — stroke width

Output: svg (Text) — SVG line element

See also: path, rect

line_to

Appends a Line To (L) command to SVG path data.

Inputs:

• d (Text) — path data so far
• x (Number) — target x coordinate
• y (Number) — target y coordinate

Output: d (Text) — path data with L command appended

See also: move_to, arc_to, path

move_to

Appends a Move To (M) command to SVG path data.

Inputs:

• d (Text) — path data so far
• x (Number) — target x coordinate
• y (Number) — target y coordinate

Output: d (Text) — path data with M command appended

Example: x = 20, y = 75 → M 20 75

See also: line_to, arc_to, path

path

Wraps path data in an SVG element with styling.

Inputs:

• d (Text) — SVG path data string
• fill (Text) — fill color
• stroke (Text) — stroke color
• stroke_width (Number) — stroke width
• opacity (Number) — element opacity

Output: svg (Text) — SVG path element

See also: move_to, arc_to, group

quad_to

Appends a quadratic Bezier (Q) command to SVG path data.

Inputs:

• d (Text) — path data so far
• cx (Number) — control point x
• cy (Number) — control point y
• x (Number) — target x coordinate
• y (Number) — target y coordinate

Output: d (Text) — path data with Q command appended

See also: curve_to, arc_to, path

rect

Creates an SVG element.

Inputs:

• x (Number) — left x
• y (Number) — top y
• width (Number) — rectangle width
• height (Number) — rectangle height
• rx (Number) — corner radius x
• ry (Number) — corner radius y
• fill (Text) — fill color
• stroke (Text) — stroke color
• stroke_width (Number) — stroke width

Output: svg (Text) — SVG rect element

See also: circle, ellipse, path

render

Renders an SVG document to a raster image via the frontend webview.

Inputs:

• svg (Text) — SVG document or fragment to render
• width (Number) — output width — 0 uses SVG intrinsic size
• height (Number) — output height — 0 uses SVG intrinsic size

Output: image (Image) — rendered raster image

See also: document, drawing/html

set_attribute

Sets or replaces an attribute on SVG elements via regex.

Inputs:

• svg (Text) — SVG content to modify
• attribute (Text) — attribute name to set
• value (Text) — new attribute value

Output: svg (Text) — SVG content with attribute updated

See also: path, group

text

Creates an SVG element.

Inputs:

• text (Text) — text content
• x (Number) — x position
• y (Number) — y position (baseline)
• font_size (Number) — font size in px
• font_family (Text) — font family
• fill (Text) — text color
• anchor (Text) — text-anchor: start, middle, or end

Output: svg (Text) — SVG text element

See also: path, group

transform

Wraps SVG content in a with translate, rotate, and scale transforms.

Inputs:

• content (Text) — SVG elements to transform
• translate_x (Number) — x translation
• translate_y (Number) — y translation
• rotate (Number) — rotation in degrees
• rotate_cx (Number) — rotation center x
• rotate_cy (Number) — rotation center y
• scale_x (Number) — x scale factor
• scale_y (Number) — y scale factor

Output: svg (Text) — transformed SVG elements

Example: content = <circle cx="50" cy="50" r="10"/>, rotate = 45, rotate_cx = 50, rotate_cy = 50 → <g transform="rotate(45, 50, 50)"><circle cx="50" cy="50" r="10"/></g>

See also: group, compose