For one of my personal projects i needed a way to load and display some simple SVG files/shapes in Bevy,
so i took inspiration from bevy_prototype_lyon and modified and extended it to...well...load and display
simple SVG files. SVGs can be used/displayed in 2D as well as in 3D.
Files are loaded through AssetLoader, then parsed and simplified with usvg and then tessellated with Lyon
into a vertex buffer, which lastly is convert into a Bevy mesh and drawn with custom [shaders].
Bevy version |
bevy_svg version |
Branch |
|---|---|---|
bevy-0.7 |
||
bevy-0.6 |
||
bevy-0.5 |
||
main |
| Complex shapes | Multiple colors | Fonts |
|---|---|---|
 |
 |
 |
Copy this to your Cargo.toml
# Stable
bevy_svg = "0.7"
# 2D and 3D are available on default, if you only want/need one, use the following
bevy_svg = { version = "0.7", default-features = false, features = "2d" }
# or
bevy_svg = { version = "0.7", default-features = false, features = "3d" }
# Living on the edge (at your own risk 😅)
bevy_svg = { git = "https://github.com/Weasy666/bevy_svg", branch = "main" }Then use it like this.
fn main() {
App::new()
.insert_resource(Msaa { samples: 4 })
.insert_resource(WindowDescriptor {
title: "SVG Plugin".to_string(),
..Default::default()
})
.add_plugins(DefaultPlugins)
.add_plugin(bevy_svg::prelude::SvgPlugin)
.add_startup_system(setup)
.run();
}
fn setup(
mut commands: Commands,
asset_server: Res<AssetServer>,
) {
let svg = asset_server.load("path/to/file.svg");
commands.spawn_bundle(OrthographicCameraBundle::new_2d());
commands.spawn_bundle(SvgBundle {
svg,
origin: Origin::Center, // Origin::TopLeft is the default
..Default::default()
});
}fn main() {
App::new()
.insert_resource(Msaa { samples: 4 })
.insert_resource(WindowDescriptor {
title: "SVG Plugin".to_string(),
..Default::default()
})
.add_plugins(DefaultPlugins)
.add_plugin(bevy_svg::prelude::SvgPlugin)
.add_startup_system(setup)
.run();
}
fn setup(
mut commands: Commands,
asset_server: Res<AssetServer>,
) {
let svg = asset_server.load("path/to/file.svg");
commands.spawn_bundle(PerspectiveCameraBundle::new_3d());
commands.spawn_bundle(SvgBundle {
svg,
origin: Origin::Center, // Origin::TopLeft is the default
transform: Transform {
translation: Vec3::new(0.0, 0.0, 1.5),
scale: Vec3::new(0.05, 0.05, 1.0), // The scale you need depends a lot on your SVG and camera distance
rotation: Quat::from_rotation_x(-std::f32::consts::PI / 5.0),
},
..Default::default()
});
}