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, Rectangle, Rotation,
26    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> 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        _clipboard: &mut dyn Clipboard,
207        shell: &mut Shell<'_, Message>,
208        _viewport: &Rectangle,
209    ) {
210        let current_status = if cursor.is_over(layout.bounds()) {
211            Status::Hovered
212        } else {
213            Status::Idle
214        };
215
216        if let Event::Window(window::Event::RedrawRequested(_now)) = event {
217            self.status = Some(current_status);
218        } else if self.status.is_some_and(|status| status != current_status) {
219            shell.request_redraw();
220        }
221    }
222
223    fn draw(
224        &self,
225        _state: &Tree,
226        renderer: &mut Renderer,
227        theme: &Theme,
228        _style: &renderer::Style,
229        layout: Layout<'_>,
230        _cursor: mouse::Cursor,
231        _viewport: &Rectangle,
232    ) {
233        let Size { width, height } = renderer.measure_svg(&self.handle);
234        let image_size = Size::new(width as f32, height as f32);
235        let rotated_size = self.rotation.apply(image_size);
236
237        let bounds = layout.bounds();
238        let adjusted_fit = self.content_fit.fit(rotated_size, bounds.size());
239        let scale = Vector::new(
240            adjusted_fit.width / rotated_size.width,
241            adjusted_fit.height / rotated_size.height,
242        );
243
244        let final_size = image_size * scale;
245
246        let position = match self.content_fit {
247            ContentFit::None => Point::new(
248                bounds.x + (rotated_size.width - adjusted_fit.width) / 2.0,
249                bounds.y + (rotated_size.height - adjusted_fit.height) / 2.0,
250            ),
251            _ => Point::new(
252                bounds.center_x() - final_size.width / 2.0,
253                bounds.center_y() - final_size.height / 2.0,
254            ),
255        };
256
257        let drawing_bounds = Rectangle::new(position, final_size);
258
259        let style = theme.style(&self.class, self.status.unwrap_or(Status::Idle));
260
261        renderer.draw_svg(
262            svg::Svg {
263                handle: self.handle.clone(),
264                color: style.color,
265                rotation: self.rotation.radians(),
266                opacity: self.opacity,
267            },
268            drawing_bounds,
269            bounds,
270        );
271    }
272}
273
274impl<'a, Message, Theme, Renderer> From<Svg<'a, Theme>> for Element<'a, Message, Theme, Renderer>
275where
276    Theme: Catalog + 'a,
277    Renderer: svg::Renderer + 'a,
278{
279    fn from(icon: Svg<'a, Theme>) -> Element<'a, Message, Theme, Renderer> {
280        Element::new(icon)
281    }
282}
283
284/// The possible status of an [`Svg`].
285#[derive(Debug, Clone, Copy, PartialEq, Eq)]
286pub enum Status {
287    /// The [`Svg`] is idle.
288    Idle,
289    /// The [`Svg`] is being hovered.
290    Hovered,
291}
292
293/// The appearance of an [`Svg`].
294#[derive(Debug, Clone, Copy, PartialEq, Default)]
295pub struct Style {
296    /// The [`Color`] filter of an [`Svg`].
297    ///
298    /// Useful for coloring a symbolic icon.
299    ///
300    /// `None` keeps the original color.
301    pub color: Option<Color>,
302}
303
304/// The theme catalog of an [`Svg`].
305pub trait Catalog {
306    /// The item class of the [`Catalog`].
307    type Class<'a>;
308
309    /// The default class produced by the [`Catalog`].
310    fn default<'a>() -> Self::Class<'a>;
311
312    /// The [`Style`] of a class with the given status.
313    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style;
314}
315
316impl Catalog for Theme {
317    type Class<'a> = StyleFn<'a, Self>;
318
319    fn default<'a>() -> Self::Class<'a> {
320        Box::new(|_theme, _status| Style::default())
321    }
322
323    fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
324        class(self, status)
325    }
326}
327
328/// A styling function for an [`Svg`].
329///
330/// This is just a boxed closure: `Fn(&Theme, Status) -> Style`.
331pub type StyleFn<'a, Theme> = Box<dyn Fn(&Theme, Status) -> Style + 'a>;
332
333impl<Theme> From<Style> for StyleFn<'_, Theme> {
334    fn from(style: Style) -> Self {
335        Box::new(move |_theme, _status| style)
336    }
337}
iced_widget/svg.rs

iced_widget/
svg.rs
