svg

stable

An SVG string builder that creates individual SVG elements as strings and composes them into complete SVG documents.

use plugin svg::{create_svg, create_svg_viewbox, close_svg, …}

18 functions Image

/ filter jk navigate Esc clear

Functions (18)

create_svg Opening SVG tag with width and height
create_svg_viewbox Opening SVG tag with custom viewBox
close_svg Closing SVG tag string
build_svg Complete SVG document from elements table
svg_rect Rectangle element string
svg_circle Circle element string
svg_ellipse Ellipse element string
svg_line Line element string
svg_path Path element string
svg_polygon Polygon element string
svg_polyline Polyline element string
svg_text Text element string
svg_group Group elements into a `<g>` tag
svg_group_transform Group elements with a transform attribute
svg_set_attr Insert or replace an attribute in an element
svg_style Inline CSS style block
svg_defs SVG defs block for reusable elements
svg_use Reference a defined element by href

create_svg(width, height) → string

Opening SVG tag with width and height

Returns the opening <svg> tag with xmlns, width, height, and a matching viewBox. Combine with close_svg() to wrap content.

use plugin svg::{svg}

let header = svg.create_svg(400.0, 300.0)
let body = svg.svg_rect(10.0, 10.0, 100.0, 50.0, "blue")
let footer = svg.close_svg()
let doc = "{header}{body}{footer}"
print(doc)

create_svg_viewbox(width, height, vb_x, vb_y, vb_w, vb_h) → string

Opening SVG tag with custom viewBox

Returns an opening <svg> tag with a custom viewBox, useful for scaling and cropping coordinate spaces.

use plugin svg::{svg}

let header = svg.create_svg_viewbox(800.0, 600.0, -100.0, -100.0, 200.0, 200.0)

close_svg() → string

Closing SVG tag string

Returns the </svg> closing tag as a string.

use plugin svg::{svg}

let doc = svg.create_svg(100.0, 100.0) + svg.close_svg()

build_svg(width, height, elements) → string

Complete SVG document from elements table

Assembles a complete SVG document from a table of element strings. This is the most convenient way to produce a self-contained SVG.

use plugin svg::{svg}

let elements = [
    svg.svg_rect(10.0, 10.0, 80.0, 80.0, "steelblue"),
    svg.svg_circle(50.0, 50.0, 20.0, "gold"),
    svg.svg_text(20.0, 55.0, "Hello", 14.0, "white")
]
let doc = svg.build_svg(100.0, 100.0, elements)
print(doc)

svg_rect(x, y, w, h, fill) → string

Rectangle element string

Returns a <rect> element with position, size, and fill color.

use plugin svg::{svg}

let r = svg.svg_rect(0.0, 0.0, 200.0, 100.0, "#3498db")

svg_circle(cx, cy, r, fill) → string

Circle element string

Returns a <circle> element with center coordinates, radius, and fill color.

use plugin svg::{svg}

let c = svg.svg_circle(100.0, 100.0, 50.0, "tomato")

svg_ellipse(cx, cy, rx, ry, fill) → string

Ellipse element string

Returns an <ellipse> element with separate horizontal and vertical radii.

use plugin svg::{svg}

let e = svg.svg_ellipse(150.0, 100.0, 80.0, 40.0, "violet")

svg_line(x1, y1, x2, y2, stroke, width) → string

Line element string

Returns a <line> element from point (x1, y1) to (x2, y2) with a stroke color and width.

use plugin svg::{svg}

let l = svg.svg_line(0.0, 0.0, 200.0, 200.0, "black", 2.0)

svg_path(d, fill, stroke) → string

Path element string

Returns a <path> element. The d parameter is an SVG path data string (e.g. "M 10 10 L 90 90").

use plugin svg::{svg}

let p = svg.svg_path("M 10 80 Q 95 10 180 80", "none", "purple")

svg_polygon(points, fill, stroke) → string

Polygon element string

Returns a <polygon> element. points is a space-separated list of x,y pairs.

use plugin svg::{svg}

let tri = svg.svg_polygon("50,0 100,100 0,100", "lime", "black")

svg_polyline(points, fill, stroke) → string

Polyline element string

Returns a <polyline> element — like polygon but does not close the shape automatically.

use plugin svg::{svg}

let line = svg.svg_polyline("0,100 50,0 100,100", "none", "red")

svg_text(x, y, content, font_size, fill) → string

Text element string

Returns a <text> element. XML special characters in content (&, <, >, ") are automatically escaped.

use plugin svg::{svg}

let t = svg.svg_text(10.0, 30.0, "Score: 100", 16.0, "#333")

svg_group(elements) → string

Group elements into a `<g>` tag

Wraps a table of element strings in a <g> tag, creating a logical group without any transform.

use plugin svg::{svg}

let group = svg.svg_group([
    svg.svg_rect(0.0, 0.0, 50.0, 50.0, "red"),
    svg.svg_circle(25.0, 25.0, 10.0, "white")
])

svg_group_transform(elements, transform) → string

Group elements with a transform attribute

Wraps elements in a <g transform="..."> tag. transform is an SVG transform string like "translate(50,50) rotate(45)".

use plugin svg::{svg}

let rotated = svg.svg_group_transform([
    svg.svg_rect(0.0, 0.0, 40.0, 40.0, "orange")
], "rotate(45 20 20)")

svg_set_attr(element, attr_name, attr_value) → string

Insert or replace an attribute in an element

Inserts or replaces an attribute in an existing SVG element string. Useful for adding id, class, or opacity after creation.

use plugin svg::{svg}

let rect = svg.svg_rect(0.0, 0.0, 100.0, 50.0, "blue")
let styled = svg.svg_set_attr(rect, "opacity", "0.5")
let with_id = svg.svg_set_attr(styled, "id", "my-rect")

svg_style(css) → string

Inline CSS style block

Returns an inline <style> block containing the provided CSS string. Place this inside the SVG document for scoped styling.

use plugin svg::{svg}

let styles = svg.svg_style("rect { stroke: black; stroke-width: 1; }")

svg_defs(elements) → string

SVG defs block for reusable elements

Wraps a table of element strings in a <defs> block. Elements in defs are reusable but not rendered directly.

use plugin svg::{svg}

let defs = svg.svg_defs([
    svg.svg_set_attr(svg.svg_circle(0.0, 0.0, 10.0, "gold"), "id", "dot")
])
let doc = svg.build_svg(200.0, 200.0, [defs, svg.svg_use("#dot", 50.0, 50.0)])

svg_use(href, x, y) → string

Reference a defined element by href

Returns a <use> element that references a previously defined element by href (e.g. "#my-id").

use plugin svg::{svg}

let use_ref = svg.svg_use("#dot", 100.0, 100.0)

View source code