[−][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 |