diff --git a/Cargo.toml b/Cargo.toml
index f6f1158add..f3b16da1e2 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -14,6 +14,8 @@ categories = ["gui"]
[features]
# Enables a debug view in native platforms (press F12)
debug = ["iced_winit/debug"]
+# Enables support for SVG rendering
+svg = ["iced_wgpu/svg"]
[badges]
maintenance = { status = "actively-developed" }
diff --git a/examples/resources/tiger.svg b/examples/resources/tiger.svg
new file mode 100644
index 0000000000..679edec2eb
--- /dev/null
+++ b/examples/resources/tiger.svg
@@ -0,0 +1,725 @@
+
+
diff --git a/examples/svg.rs b/examples/svg.rs
new file mode 100644
index 0000000000..cdf238f0df
--- /dev/null
+++ b/examples/svg.rs
@@ -0,0 +1,54 @@
+use iced::{Container, Element, Length, Sandbox, Settings};
+
+pub fn main() {
+ Tiger::run(Settings::default())
+}
+
+#[derive(Default)]
+struct Tiger;
+
+impl Sandbox for Tiger {
+ type Message = ();
+
+ fn new() -> Self {
+ Self::default()
+ }
+
+ fn title(&self) -> String {
+ String::from("SVG - Iced")
+ }
+
+ fn update(&mut self, _message: ()) {}
+
+ fn view(&mut self) -> Element<()> {
+ #[cfg(feature = "svg")]
+ let content = {
+ use iced::{Column, Svg};
+
+ Column::new()
+ .width(Length::Shrink)
+ .padding(20)
+ .push(Svg::new(format!(
+ "{}/examples/resources/tiger.svg",
+ env!("CARGO_MANIFEST_DIR")
+ )))
+ };
+
+ #[cfg(not(feature = "svg"))]
+ let content = {
+ use iced::{HorizontalAlignment, Text};
+
+ Text::new("You need to enable the `svg` feature!")
+ .width(Length::Shrink)
+ .horizontal_alignment(HorizontalAlignment::Center)
+ .size(30)
+ };
+
+ Container::new(content)
+ .width(Length::Fill)
+ .height(Length::Fill)
+ .center_x()
+ .center_y()
+ .into()
+ }
+}
diff --git a/native/src/widget.rs b/native/src/widget.rs
index 71dcdc0d74..ee7232cb3a 100644
--- a/native/src/widget.rs
+++ b/native/src/widget.rs
@@ -24,6 +24,7 @@ pub mod button;
pub mod checkbox;
pub mod column;
pub mod container;
+pub mod svg;
pub mod image;
pub mod radio;
pub mod row;
@@ -51,6 +52,8 @@ pub use scrollable::Scrollable;
#[doc(no_inline)]
pub use slider::Slider;
#[doc(no_inline)]
+pub use svg::Svg;
+#[doc(no_inline)]
pub use text::Text;
#[doc(no_inline)]
pub use text_input::TextInput;
diff --git a/native/src/widget/svg.rs b/native/src/widget/svg.rs
new file mode 100644
index 0000000000..9580f19586
--- /dev/null
+++ b/native/src/widget/svg.rs
@@ -0,0 +1,187 @@
+//! Display vector graphics in your application.
+use crate::{layout, Element, Hasher, Layout, Length, Point, Size, Widget};
+
+use std::{
+ hash::Hash,
+ path::{Path, PathBuf},
+};
+
+/// A vector graphics image.
+///
+/// An [`Svg`] image resizes smoothly without losing any quality.
+///
+/// [`Svg`] images can have a considerable rendering cost when resized,
+/// specially when they are complex.
+///
+/// [`Svg`]: struct.Svg.html
+#[derive(Debug, Clone)]
+pub struct Svg {
+ handle: Handle,
+ width: Length,
+ height: Length,
+}
+
+impl Svg {
+ /// Creates a new [`Svg`] from the given [`Handle`].
+ ///
+ /// [`Svg`]: struct.Svg.html
+ /// [`Handle`]: struct.Handle.html
+ pub fn new(handle: impl Into) -> Self {
+ Svg {
+ handle: handle.into(),
+ width: Length::Fill,
+ height: Length::Fill,
+ }
+ }
+
+ /// Sets the width of the [`Svg`].
+ ///
+ /// [`Svg`]: struct.Svg.html
+ pub fn width(mut self, width: Length) -> Self {
+ self.width = width;
+ self
+ }
+
+ /// Sets the height of the [`Svg`].
+ ///
+ /// [`Svg`]: struct.Svg.html
+ pub fn height(mut self, height: Length) -> Self {
+ self.height = height;
+ self
+ }
+}
+
+impl Widget for Svg
+where
+ Renderer: self::Renderer,
+{
+ fn width(&self) -> Length {
+ self.width
+ }
+
+ fn height(&self) -> Length {
+ self.height
+ }
+
+ fn layout(
+ &self,
+ renderer: &Renderer,
+ limits: &layout::Limits,
+ ) -> layout::Node {
+ let (width, height) = renderer.dimensions(&self.handle);
+
+ let aspect_ratio = width as f32 / height as f32;
+
+ let mut size = limits
+ .width(self.width)
+ .height(self.height)
+ .resolve(Size::new(width as f32, height as f32));
+
+ let viewport_aspect_ratio = size.width / size.height;
+
+ if viewport_aspect_ratio > aspect_ratio {
+ size.width = width as f32 * size.height / height as f32;
+ } else {
+ size.height = height as f32 * size.width / width as f32;
+ }
+
+ layout::Node::new(size)
+ }
+
+ fn draw(
+ &self,
+ renderer: &mut Renderer,
+ layout: Layout<'_>,
+ _cursor_position: Point,
+ ) -> Renderer::Output {
+ renderer.draw(self.handle.clone(), layout)
+ }
+
+ fn hash_layout(&self, state: &mut Hasher) {
+ self.width.hash(state);
+ self.height.hash(state);
+ }
+}
+
+/// An [`Svg`] handle.
+///
+/// [`Svg`]: struct.Svg.html
+#[derive(Debug, Clone)]
+pub struct Handle {
+ id: u64,
+ path: PathBuf,
+}
+
+impl Handle {
+ /// Creates an SVG [`Handle`] pointing to the vector image of the given
+ /// path.
+ ///
+ /// [`Handle`]: struct.Handle.html
+ pub fn from_path>(path: T) -> Handle {
+ use std::hash::Hasher as _;
+
+ let path = path.into();
+
+ let mut hasher = Hasher::default();
+ path.hash(&mut hasher);
+
+ Handle {
+ id: hasher.finish(),
+ path,
+ }
+ }
+
+ /// Returns the unique identifier of the [`Handle`].
+ ///
+ /// [`Handle`]: struct.Handle.html
+ pub fn id(&self) -> u64 {
+ self.id
+ }
+
+ /// Returns a reference to the path of the [`Handle`].
+ ///
+ /// [`Handle`]: enum.Handle.html
+ pub fn path(&self) -> &Path {
+ &self.path
+ }
+}
+
+impl From for Handle {
+ fn from(path: String) -> Handle {
+ Handle::from_path(path)
+ }
+}
+
+impl From<&str> for Handle {
+ fn from(path: &str) -> Handle {
+ Handle::from_path(path)
+ }
+}
+
+/// The renderer of an [`Svg`].
+///
+/// Your [renderer] will need to implement this trait before being able to use
+/// an [`Svg`] in your user interface.
+///
+/// [`Svg`]: struct.Svg.html
+/// [renderer]: ../../renderer/index.html
+pub trait Renderer: crate::Renderer {
+ /// Returns the default dimensions of an [`Svg`] located on the given path.
+ ///
+ /// [`Svg`]: struct.Svg.html
+ fn dimensions(&self, handle: &Handle) -> (u32, u32);
+
+ /// Draws an [`Svg`].
+ ///
+ /// [`Svg`]: struct.Svg.html
+ fn draw(&mut self, handle: Handle, layout: Layout<'_>) -> Self::Output;
+}
+
+impl<'a, Message, Renderer> From