iced_widget/
svg.rs

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

iced_widget/
svg.rs
