Giter Club home page Giter Club logo

vello_svg's Introduction

Vello SVG

An integration to parse and render SVG with Vello.

Linebender Zulip dependency status MIT/Apache 2.0 vello version

Crates.io Docs Build status

Warning

The goal of this crate is to provide decent coverage of the (large) SVG spec, up to what vello will support, for use in interactive graphics. If you are looking for a correct SVG renderer, see resvg. See vello for more information about limitations.

Examples

Cross platform (Winit)

cargo run -p with_winit

You can also load an entire folder or individual files.

cargo run -p with_winit -- examples/assets

Web platform

Because Vello relies heavily on compute shaders, we rely on the emerging WebGPU standard to run on the web. Until browser support becomes widespread, it will probably be necessary to use development browser versions (e.g. Chrome Canary) and explicitly enable WebGPU.

This uses cargo-run-wasm to build the example for web, and host a local server for it

# Make sure the Rust toolchain supports the wasm32 target
rustup target add wasm32-unknown-unknown

# The binary name must also be explicitly provided as it differs from the package name
cargo run_wasm -p with_winit --bin with_winit_bin

There is also a web demo available here on supporting web browsers.

Warning

The web is not currently a primary target for Vello, and WebGPU implementations are incomplete, so you might run into issues running this example.

Community

Discussion of Velato development happens in the Linebender Zulip, specifically the #gpu stream. All public content can be read without logging in.

Contributions are welcome by pull request. The Rust code of conduct applies.

License

Licensed under either of

at your option

The files in subdirectories of the examples/assets directory are licensed solely under their respective licenses, available in the LICENSE file in their directories.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

vello_svg's People

Contributors

simbleau avatar daslixou avatar marijns95 avatar nixon-voxell avatar

Stargazers

avatar Andy Lu avatar Andrés Brugarolas avatar Jovansonlee Cesar avatar Per Johansson avatar Tomohiro Matsuyama avatar Owen Troke-Billard avatar Taku Fukada avatar Christoph Grabo avatar Sepcnt avatar avatar

Watchers

Raph Levien avatar Chad Brokaw avatar Kaur Kuut avatar Colin Rofls avatar avatar Daniel McNab avatar avatar

Forkers

daslixou marijns95 mammux nixon-voxell aliensmith mhfan marcelstruckwo truedoctor

vello_svg's Issues

Should the image `view_box_transform` actually be `view_box.to_transform(image_size)`?

vello_svg/src/lib.rs

Lines 217 to 237 in cf6fe55

let Some(size) =
usvg::Size::from_wh(image.width as f32, image.height as f32)
else {
error_handler(scene, node)?;
continue;
};
let view_box = img.view_box();
let new_size = view_box.rect.size();
let (tx, ty) = usvg::utils::aligned_pos(
view_box.aspect.align,
view_box.rect.x(),
view_box.rect.y(),
view_box.rect.width() - new_size.width(),
view_box.rect.height() - new_size.height(),
);
let (sx, sy) = (
new_size.width() / size.width(),
new_size.height() / size.height(),
);
let view_box_transform =
usvg::Transform::from_row(sx, 0.0, 0.0, sy, tx, ty);

Color/Brush override

Is there a way to set a color/brush override?

If not, would a PR for that be accepted?

Reduce boilerplate

I do this a lot in bevy_vello - It feels very verbose!

                // SVG -> Scene
                let svg_tree = bevy_vello::vello_svg::usvg::Tree::from_str(
                    &svg_contents,
                    &Default::default(),
                    &Default::default(),
                )
                .unwrap();
                let mut scene = bevy_vello::vello::Scene::new();
                bevy_vello::vello_svg::render_tree(&mut scene, &svg_tree);

This is pretty much the requirement for every SVG load, which feels pretty dumb.

We can surely do better, can't we? e.g. vello_svg::render_str(&str) -> Scene.

Proposal:

  • Introduce a usvg cargo feature.
    • Move vello_svg::render_tree behind this feature.
    • Move vello_svg::render_tree_with behind this feature.
    • Re-export vello_svg::usvg behind this feature.
  • Add a vello_svg::render_str(&str) -> Scene method (uses default usvg opts)
  • Add a vello_svg::render_str_to(&str, &mut Scene) method (uses default usvg opts)

Thoughts, @DJMcNab ?

Expose util functions

Right now, a lot of the useful functions in vello_svg is locked up inside a private util mod:

pub fn to_affine(ts: &usvg::Transform) -> Affine
pub fn to_stroke(stroke: &usvg::Stroke) -> Stroke
pub fn to_bez_path(path: &usvg::Path) -> BezPath
pub fn into_image(image: image::ImageBuffer<image::Rgba<u8>, Vec<u8>>) -> Image
pub fn to_brush(paint: &usvg::Paint, opacity: usvg::Opacity) -> Option<(Brush, Affine)>
pub fn decode_raw_raster_image(
    img: &usvg::ImageKind,
) -> Result<image::RgbaImage, image::ImageError>

As a user from the outside, it would be nice if I can access these functions and use it to transform an Svg into custom data struct that uses Vello types other than just Scene (maybe a collection of BezPaths).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.