iced_widget/
svg.rs

1//! Svg widgets display vector graphics in your application.
2//!
3//! # Example
4//! ```no_run
5//! # mod iced { pub mod widget { pub use iced_widget::*; } pub use iced_widget::Renderer; pub use iced_widget::core::*; }
6//! # use iced::widget::Widget;
7//! # pub type State = ();
8//! use iced::widget::svg;
9//!
10//! enum Message {
11//!     // ...
12//! }
13//!
14//! fn view(state: &State) -> impl Widget<Message> {
15//!     svg("tiger.svg")
16//! }
17//! ```
18use crate::core::layout;
19use crate::core::mouse;
20use crate::core::renderer;
21use crate::core::svg;
22use crate::core::widget::{Meta, Tree};
23use crate::core::window;
24use crate::core::{
25    Color, ContentFit, Event, Layout, Length, Point, Rectangle, Rotation, Shell, Size, Theme,
26    Vector, Widget,
27};
28
29use std::path::PathBuf;
30
31pub use crate::core::svg::Handle;
32
33/// A vector graphics image.
34///
35/// An [`Svg`] image resizes smoothly without losing any quality.
36///
37/// [`Svg`] images can have a considerable rendering cost when resized,
38/// specially when they are complex.
39///
40/// # Example
41/// ```no_run
42/// # mod iced { pub mod widget { pub use iced_widget::*; } pub use iced_widget::Renderer; pub use iced_widget::core::*; }
43/// # use iced::widget::Widget;
44/// # pub type State = ();
45/// use iced::widget::svg;
46///
47/// enum Message {
48///     // ...
49/// }
50///
51/// fn view(state: &State) -> impl Widget<Message> {
52///     svg("tiger.svg")
53/// }
54/// ```
55pub struct Svg<'a, Theme = crate::Theme>
56where
57    Theme: Catalog,
58{
59    handle: Handle,
60    width: Length,
61    height: Length,
62    content_fit: ContentFit,
63    class: Theme::Class<'a>,
64    rotation: Rotation,
65    opacity: f32,
66    status: Option<Status>,
67}
68
69impl<'a, Theme> Svg<'a, Theme>
70where
71    Theme: Catalog,
72{
73    /// Creates a new [`Svg`] from the given [`Handle`].
74    pub fn new(handle: impl Into<Handle>) -> Self {
75        Svg {
76            handle: handle.into(),
77            width: Length::Fill,
78            height: Length::Fit,
79            content_fit: ContentFit::Contain,
80            class: Theme::default(),
81            rotation: Rotation::default(),
82            opacity: 1.0,
83            status: None,
84        }
85    }
86
87    /// Creates a new [`Svg`] that will display the contents of the file at the
88    /// provided path.
89    #[must_use]
90    pub fn from_path(path: impl Into<PathBuf>) -> Self {
91        Self::new(Handle::from_path(path))
92    }
93
94    /// Sets the width of the [`Svg`].
95    #[must_use]
96    pub fn width(mut self, width: impl Into<Length>) -> Self {
97        self.width = width.into();
98        self
99    }
100
101    /// Sets the height of the [`Svg`].
102    #[must_use]
103    pub fn height(mut self, height: impl Into<Length>) -> Self {
104        self.height = height.into();
105        self
106    }
107
108    /// Sets the [`ContentFit`] of the [`Svg`].
109    ///
110    /// Defaults to [`ContentFit::Contain`]
111    #[must_use]
112    pub fn content_fit(self, content_fit: ContentFit) -> Self {
113        Self {
114            content_fit,
115            ..self
116        }
117    }
118
119    /// Sets the style of the [`Svg`].
120    #[must_use]
121    pub fn style(mut self, style: impl Fn(&Theme, Status) -> Style + 'a) -> Self
122    where
123        Theme::Class<'a>: From<StyleFn<'a, Theme>>,
124    {
125        self.class = (Box::new(style) as StyleFn<'a, Theme>).into();
126        self
127    }
128
129    /// Sets the style class of the [`Svg`].
130    #[cfg(feature = "advanced")]
131    #[must_use]
132    pub fn class(mut self, class: impl Into<Theme::Class<'a>>) -> Self {
133        self.class = class.into();
134        self
135    }
136
137    /// Applies the given [`Rotation`] to the [`Svg`].
138    pub fn rotation(mut self, rotation: impl Into<Rotation>) -> Self {
139        self.rotation = rotation.into();
140        self
141    }
142
143    /// Sets the opacity of the [`Svg`].
144    ///
145    /// It should be in the [0.0, 1.0] range—`0.0` meaning completely transparent,
146    /// and `1.0` meaning completely opaque.
147    pub fn opacity(mut self, opacity: impl Into<f32>) -> Self {
148        self.opacity = opacity.into();
149        self
150    }
151}
152
153impl<Theme> Meta for Svg<'_, Theme> where Theme: Catalog {}
154
155impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Svg<'_, Theme>
156where
157    Renderer: svg::Renderer,
158    Theme: Catalog,
159{
160    fn size(&self) -> Size<Length> {
161        Size {
162            width: self.width,
163            height: self.height,
164        }
165    }
166
167    fn layout(&mut self, tree: &mut Tree, renderer: &Renderer, limits: &layout::Limits) {
168        // The raw w/h of the underlying image
169        let Size { width, height } = renderer.measure_svg(&self.handle);
170        let image_size = Size::new(width as f32, height as f32);
171
172        // The rotated size of the svg
173        let rotated_size = self.rotation.apply(image_size);
174
175        // The size to be available to the widget prior to `Shrink`ing
176        let raw_size = limits.resolve(self.width, self.height, rotated_size);
177
178        // The uncropped size of the image when fit to the bounds above
179        let full_size = self.content_fit.fit(rotated_size, raw_size);
180
181        // Shrink the widget to fit the resized image, if requested
182        let final_size = Size {
183            width: match self.width {
184                Length::Fit | Length::Shrink => f32::min(raw_size.width, full_size.width),
185                _ => raw_size.width,
186            },
187            height: match self.height {
188                Length::Fit | Length::Shrink => f32::min(raw_size.height, full_size.height),
189                _ => raw_size.height,
190            },
191        };
192
193        tree.size = final_size;
194    }
195
196    fn update(
197        &mut self,
198        _state: &mut Tree,
199        event: &Event,
200        layout: Layout,
201        cursor: mouse::Cursor,
202        _renderer: &Renderer,
203        shell: &mut Shell<'_, Message>,
204        _viewport: &Rectangle,
205    ) {
206        let current_status = if cursor.is_over(layout.bounds()) {
207            Status::Hovered
208        } else {
209            Status::Idle
210        };
211
212        if let Event::Window(window::Event::RedrawRequested(_now)) = event {
213            self.status = Some(current_status);
214        } else if self.status.is_some_and(|status| status != current_status) {
215            shell.request_redraw();
216        }
217    }
218
219    fn draw(
220        &self,
221        _state: &Tree,
222        renderer: &mut Renderer,
223        theme: &Theme,
224        _style: &renderer::Style,
225        layout: Layout,
226        _cursor: mouse::Cursor,
227        _viewport: &Rectangle,
228    ) {
229        let Size { width, height } = renderer.measure_svg(&self.handle);
230        let image_size = Size::new(width as f32, height as f32);
231        let rotated_size = self.rotation.apply(image_size);
232
233        let bounds = layout.bounds();
234        let adjusted_fit = self.content_fit.fit(rotated_size, bounds.size());
235        let scale = Vector::new(
236            adjusted_fit.width / rotated_size.width,
237            adjusted_fit.height / rotated_size.height,
238        );
239
240        let final_size = image_size * scale;
241
242        let position = match self.content_fit {
243            ContentFit::None => Point::new(
244                bounds.x + (rotated_size.width - adjusted_fit.width) / 2.0,
245                bounds.y + (rotated_size.height - adjusted_fit.height) / 2.0,
246            ),
247            _ => Point::new(
248                bounds.center_x() - final_size.width / 2.0,
249                bounds.center_y() - final_size.height / 2.0,
250            ),
251        };
252
253        let drawing_bounds = Rectangle::new(position, final_size);
254
255        let style = theme.style(&self.class, self.status.unwrap_or(Status::Idle));
256
257        renderer.draw_svg(
258            svg::Svg {
259                handle: self.handle.clone(),
260                color: style.color,
261                rotation: self.rotation.radians(),
262                opacity: self.opacity,
263            },
264            drawing_bounds,
265            bounds,
266        );
267    }
268}
269
270/// The possible status of an [`Svg`].
271#[derive(Debug, Clone, Copy, PartialEq, Eq)]
272pub enum Status {
273    /// The [`Svg`] is idle.
274    Idle,
275    /// The [`Svg`] is being hovered.
276    Hovered,
277}
278
279/// The appearance of an [`Svg`].
280#[derive(Debug, Clone, Copy, PartialEq, Default)]
281pub struct Style {
282    /// The [`Color`] filter of an [`Svg`].
283    ///
284    /// Useful for coloring a symbolic icon.
285    ///
286    /// `None` keeps the original color.
287    pub color: Option<Color>,
288}
289
290/// The theme catalog of an [`Svg`].
291pub trait Catalog {
292    /// The item class of the [`Catalog`].
293    type Class<'a>;
294
295    /// The default class produced by the [`Catalog`].
296    fn default<'a>() -> Self::Class<'a>;
297
298    /// The [`Style`] of a class with the given status.
299    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style;
300}
301
302impl Catalog for Theme {
303    type Class<'a> = StyleFn<'a, Self>;
304
305    fn default<'a>() -> Self::Class<'a> {
306        Box::new(|_theme, _status| Style::default())
307    }
308
309    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
310        class(self, status)
311    }
312}
313
314/// A styling function for an [`Svg`].
315///
316/// This is just a boxed closure: `Fn(&Theme, Status) -> Style`.
317pub type StyleFn<'a, Theme> = Box<dyn Fn(&Theme, Status) -> Style + 'a>;
318
319impl<Theme> From<Style> for StyleFn<'_, Theme> {
320    fn from(style: Style) -> Self {
321        Box::new(move |_theme, _status| style)
322    }
323}
iced_widget/svg.rs

iced_widget/
svg.rs
