https://github.com/aviate-labs/svg.mo

SVG Generation for Motoko
https://github.com/aviate-labs/svg.mo

Last synced: 3 months ago
JSON representation

SVG Generation for Motoko

• Host: GitHub
• URL: https://github.com/aviate-labs/svg.mo
• Owner: aviate-labs
• License: apache-2.0
• Created: 2021-09-09T19:57:01.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-12-16T08:38:24.000Z (almost 2 years ago)
• Last Synced: 2024-04-19T01:33:41.588Z (7 months ago)
• Language: Motoko
• Homepage:
• Size: 45.9 KB
• Stars: 8
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-motoko - motoko-SVG Generator - A SVG generator for the Motoko. (Libraries / Graphics)

README

        
# SVG Generation

This Motoko library generates SVGs (as defined by the [Scalable Vector Graphics 1.1 Specification](http://www.w3.org/TR/SVG11))

## Usage

```motoko

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();

```

![circle01](./examples/basic_circle.svg)

More examples can be found [here](./EXAMPLES.md).

## Supported SVG Elements and Functions

### Shapes, Lines, Text

- [x] circle

- [x] ellipse

- [x] polygon

- [x] polyline

- [x] rect (including roundrects)

- [x] line

- [x] text

### Paths

- [x] general

- [x] arc

- [x] cubic and quadratic bezier paths

### Image and Gradients

- [x] image

- [x] linearGradient

- [x] radialGradient

- [ ] pattern

### Transforms

- [x] translate

- [x] rotate

- [x] scale

- [x] skewX

- [x] skewY

### Animation

- [ ] ...

### Filter Effects

- [ ] ...

### Metadata Elements

- [x] desc

- [x] defs

- [x] g (style, transform, id)

- [x] marker

- [ ] ...