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

iced_widget/
svg.rs
