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::*; } }
6//! # pub type State = ();
7//! # pub type Element<'a, Message> = iced_widget::core::Element<'a, Message, iced_widget::Theme, iced_widget::Renderer>;
8//! use iced::widget::svg;
9//!
10//! enum Message {
11//!     // ...
12//! }
13//!
14//! fn view(state: &State) -> Element<'_, Message> {
15//!     svg("tiger.svg").into()
16//! }
17//! ```
18use crate::core::layout;
19use crate::core::mouse;
20use crate::core::renderer;
21use crate::core::svg;
22use crate::core::widget::Tree;
23use crate::core::window;
24use crate::core::{
25    Color, ContentFit, Element, Event, Layout, Length, Point, Rectangle, Rotation, Shell, Size,
26    Theme, 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::*; } }
43/// # pub type State = ();
44/// # pub type Element<'a, Message> = iced_widget::core::Element<'a, Message, iced_widget::Theme, iced_widget::Renderer>;
45/// use iced::widget::svg;
46///
47/// enum Message {
48///     // ...
49/// }
50///
51/// fn view(state: &State) -> Element<'_, Message> {
52///     svg("tiger.svg").into()
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::Shrink,
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<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Svg<'_, Theme>
154where
155    Renderer: svg::Renderer,
156    Theme: Catalog,
157{
158    fn size(&self) -> Size<Length> {
159        Size {
160            width: self.width,
161            height: self.height,
162        }
163    }
164
165    fn layout(
166        &mut self,
167        _tree: &mut Tree,
168        renderer: &Renderer,
169        limits: &layout::Limits,
170    ) -> layout::Node {
171        // The raw w/h of the underlying image
172        let Size { width, height } = renderer.measure_svg(&self.handle);
173        let image_size = Size::new(width as f32, height as f32);
174
175        // The rotated size of the svg
176        let rotated_size = self.rotation.apply(image_size);
177
178        // The size to be available to the widget prior to `Shrink`ing
179        let raw_size = limits.resolve(self.width, self.height, rotated_size);
180
181        // The uncropped size of the image when fit to the bounds above
182        let full_size = self.content_fit.fit(rotated_size, raw_size);
183
184        // Shrink the widget to fit the resized image, if requested
185        let final_size = Size {
186            width: match self.width {
187                Length::Shrink => f32::min(raw_size.width, full_size.width),
188                _ => raw_size.width,
189            },
190            height: match self.height {
191                Length::Shrink => f32::min(raw_size.height, full_size.height),
192                _ => raw_size.height,
193            },
194        };
195
196        layout::Node::new(final_size)
197    }
198
199    fn update(
200        &mut self,
201        _state: &mut Tree,
202        event: &Event,
203        layout: Layout<'_>,
204        cursor: mouse::Cursor,
205        _renderer: &Renderer,
206        shell: &mut Shell<'_, Message>,
207        _viewport: &Rectangle,
208    ) {
209        let current_status = if cursor.is_over(layout.bounds()) {
210            Status::Hovered
211        } else {
212            Status::Idle
213        };
214
215        if let Event::Window(window::Event::RedrawRequested(_now)) = event {
216            self.status = Some(current_status);
217        } else if self.status.is_some_and(|status| status != current_status) {
218            shell.request_redraw();
219        }
220    }
221
222    fn draw(
223        &self,
224        _state: &Tree,
225        renderer: &mut Renderer,
226        theme: &Theme,
227        _style: &renderer::Style,
228        layout: Layout<'_>,
229        _cursor: mouse::Cursor,
230        _viewport: &Rectangle,
231    ) {
232        let Size { width, height } = renderer.measure_svg(&self.handle);
233        let image_size = Size::new(width as f32, height as f32);
234        let rotated_size = self.rotation.apply(image_size);
235
236        let bounds = layout.bounds();
237        let adjusted_fit = self.content_fit.fit(rotated_size, bounds.size());
238        let scale = Vector::new(
239            adjusted_fit.width / rotated_size.width,
240            adjusted_fit.height / rotated_size.height,
241        );
242
243        let final_size = image_size * scale;
244
245        let position = match self.content_fit {
246            ContentFit::None => Point::new(
247                bounds.x + (rotated_size.width - adjusted_fit.width) / 2.0,
248                bounds.y + (rotated_size.height - adjusted_fit.height) / 2.0,
249            ),
250            _ => Point::new(
251                bounds.center_x() - final_size.width / 2.0,
252                bounds.center_y() - final_size.height / 2.0,
253            ),
254        };
255
256        let drawing_bounds = Rectangle::new(position, final_size);
257
258        let style = theme.style(&self.class, self.status.unwrap_or(Status::Idle));
259
260        renderer.draw_svg(
261            svg::Svg {
262                handle: self.handle.clone(),
263                color: style.color,
264                rotation: self.rotation.radians(),
265                opacity: self.opacity,
266            },
267            drawing_bounds,
268            bounds,
269        );
270    }
271}
272
273impl<'a, Message, Theme, Renderer> From<Svg<'a, Theme>> for Element<'a, Message, Theme, Renderer>
274where
275    Theme: Catalog + 'a,
276    Renderer: svg::Renderer + 'a,
277{
278    fn from(icon: Svg<'a, Theme>) -> Element<'a, Message, Theme, Renderer> {
279        Element::new(icon)
280    }
281}
282
283/// The possible status of an [`Svg`].
284#[derive(Debug, Clone, Copy, PartialEq, Eq)]
285pub enum Status {
286    /// The [`Svg`] is idle.
287    Idle,
288    /// The [`Svg`] is being hovered.
289    Hovered,
290}
291
292/// The appearance of an [`Svg`].
293#[derive(Debug, Clone, Copy, PartialEq, Default)]
294pub struct Style {
295    /// The [`Color`] filter of an [`Svg`].
296    ///
297    /// Useful for coloring a symbolic icon.
298    ///
299    /// `None` keeps the original color.
300    pub color: Option<Color>,
301}
302
303/// The theme catalog of an [`Svg`].
304pub trait Catalog {
305    /// The item class of the [`Catalog`].
306    type Class<'a>;
307
308    /// The default class produced by the [`Catalog`].
309    fn default<'a>() -> Self::Class<'a>;
310
311    /// The [`Style`] of a class with the given status.
312    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style;
313}
314
315impl Catalog for Theme {
316    type Class<'a> = StyleFn<'a, Self>;
317
318    fn default<'a>() -> Self::Class<'a> {
319        Box::new(|_theme, _status| Style::default())
320    }
321
322    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
323        class(self, status)
324    }
325}
326
327/// A styling function for an [`Svg`].
328///
329/// This is just a boxed closure: `Fn(&Theme, Status) -> Style`.
330pub type StyleFn<'a, Theme> = Box<dyn Fn(&Theme, Status) -> Style + 'a>;
331
332impl<Theme> From<Style> for StyleFn<'_, Theme> {
333    fn from(style: Style) -> Self {
334        Box::new(move |_theme, _status| style)
335    }
336}
iced_widget/svg.rs

iced_widget/
svg.rs
