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

iced_widget/
svg.rs
