[][src]Crate wasm_svg_graphics

This crate provides a fast and effective way to interact with SVG's using WebAssembly. It is able to:

  • Declare shapes and styles for these shapes for later use
  • Render these shapes to the DOM using defintions
  • Automatically detect if two shapes are the same, so only one defintion will get added to the DOM
  • Declare named items for later adjustments

SVG Definitions

To define custom shapes and for all the documentation have a look at the svg_definitions crate.

Note

This crate is still under development, but most API calls for 1.0.0 are completed. If any bugs are found please submit a issue or a pull request at: GitHub

Examples

Basics (How to render a circle)

use wasm_svg_graphics::prelude::*;

// Declare renderer (must be mutable) into a parent container
let mut renderer = SVGRenderer::new("svg_parent_id").expect("Failed to create renderer!");

// Generate circle
let circle = SVGDefault::circle(10);

// Render circle (since it's the first time of rendering this shape,
// the renderer will add the shape's definition)
renderer.render(circle, (20.0, 20.0));

As one can see, it's not that difficult render a circle to the svg

Basics (How to render a custom shape)

use wasm_svg_graphics::prelude::*;

// Declare renderer (must be mutable) into a parent container
let mut renderer = SVGRenderer::new("svg_parent_id")
    .expect("Failed to create renderer!");

let smiley = SVGElem::new(Tag::G)
    .append(SVGDefault::circle(20))
    .append(SVGDefault::set_circle_loc(SVGDefault::circle(3), -7, -7))
    .append(SVGDefault::set_circle_loc(SVGDefault::circle(3), 7, -7))
    .append(SVGDefault::curve(-7, 5, 7, 5, -4, 10, 4, 10));

renderer.render(smiley, (25.0, 25.0));

Declaring custom figures is maybe somewhat of a cumbersome tasks but most definitely worth it!

Basics (How to render with custom style)

Let's use the smiley example from before, but now color it yellow

use wasm_svg_graphics::prelude::*;

// Declare renderer (must be mutable) into a parent container
let mut renderer = SVGRenderer::new("svg_parent_id")
    .expect("Failed to create renderer!");

let colored_smiley = SVGElem::new(Tag::G)
    .append(SVGDefault::circle(20).set(Attr::Stroke, "#ffff00"))
    .append(
        SVGDefault::set_circle_loc(SVGDefault::circle(3), -7, -7)
            .set(Attr::Fill, "#000000"),
    )
    .append(
        SVGDefault::set_circle_loc(SVGDefault::circle(3), 7, -7)
            .set(Attr::Fill, "#000000"),
    )
    .append(
        SVGDefault::curve(-7, 5, 7, 5, -4, 10, 4, 10)
            .set(Attr::Stroke, "#ff0000")
            .set(Attr::Fill, "transparent"),
    );

renderer.render(colored_smiley, (25.0, 25.0));

Modules

default

Contains some easy and nice ways to create definitions and shapes to render

prelude

Contains some useful definitions for SVG Graphics, also re-exports svg_definitions

renderer

Renderer of SVG Graphics within the webpage, contains definitions and names