Awesome

SVG Generation

This Motoko library generates SVGs (as defined by the Scalable Vector Graphics 1.1 Specification)

Usage

import SVG "mo:svg/SVG";

let width  : Int = 1200;
let height : Int = 400;

let canvas = SVG.SVG();
canvas.start(width, height, []);

canvas.circle(
    600, 200, 100,
    ["fill=\"red\"", "stroke=\"blue\"", "stroke-width=\"10\""],
);

let svg = canvas.end();

More examples can be found here.

Supported SVG Elements and Functions

Shapes, Lines, Text

• circle
• ellipse
• polygon
• polyline
• rect (including roundrects)
• line
• text

Paths

• general
• arc
• cubic and quadratic bezier paths

Image and Gradients

• image
• linearGradient
• radialGradient
• pattern

Transforms

• translate
• rotate
• scale
• skewX
• skewY

Animation

• ...

Filter Effects

• ...

Metadata Elements

• desc
• defs
• g (style, transform, id)
• marker
• ...