Expand description
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));