gpui: Render SVGs at 2x size when rendered in an img (#24332)

This PR adjusts the rendering of SVGs when used with the `img` element
such that they are rendered at 2x their displayed size.

This results in much crisper icons for icons loaded by icon themes:

<img width="1136" alt="Screenshot 2025-02-05 at 7 39 48 PM"
src="https://github.com/user-attachments/assets/47d1fcee-c54d-4717-8fca-9b9d2bc8da9a"
/>

<img width="1136" alt="Screenshot 2025-02-05 at 7 40 01 PM"
src="https://github.com/user-attachments/assets/3061157c-8c88-41c1-a5dc-83ef9cd341cb"
/>

Release Notes:

- Improved the resolution of icons rendered by icon themes.
This commit is contained in:
Marshall Bowers 2025-02-05 20:05:43 -05:00 committed by GitHub
parent 3374514f82
commit 0671be215f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 6 deletions

View file

@ -3,6 +3,7 @@ use crate::{
DefiniteLength, Element, ElementId, GlobalElementId, Hitbox, Image, InteractiveElement,
Interactivity, IntoElement, LayoutId, Length, ObjectFit, Pixels, RenderImage, Resource,
SharedString, SharedUri, StyleRefinement, Styled, SvgSize, Task, Window,
SMOOTH_SVG_SCALE_FACTOR,
};
use anyhow::{anyhow, Result};
@ -610,7 +611,7 @@ impl Asset for ImageAssetLoader {
} else {
let pixmap =
// TODO: Can we make svgs always rescale?
svg_renderer.render_pixmap(&bytes, SvgSize::ScaleFactor(1.0))?;
svg_renderer.render_pixmap(&bytes, SvgSize::ScaleFactor(SMOOTH_SVG_SCALE_FACTOR))?;
let mut buffer =
ImageBuffer::from_raw(pixmap.width(), pixmap.height(), pixmap.take()).unwrap();

View file

@ -3,6 +3,9 @@ use anyhow::anyhow;
use resvg::tiny_skia::Pixmap;
use std::{hash::Hash, sync::Arc};
/// When rendering SVGs, we render them at twice the size to get a higher-quality result.
pub const SMOOTH_SVG_SCALE_FACTOR: f32 = 2.;
#[derive(Clone, PartialEq, Hash, Eq)]
pub(crate) struct RenderSvgParams {
pub(crate) path: SharedString,

View file

@ -13,7 +13,7 @@ use crate::{
Subscription, TaffyLayoutEngine, Task, TextStyle, TextStyleRefinement, TransformationMatrix,
Underline, UnderlineStyle, WindowAppearance, WindowBackgroundAppearance, WindowBounds,
WindowControls, WindowDecorations, WindowOptions, WindowParams, WindowTextSystem,
SUBPIXEL_VARIANTS,
SMOOTH_SVG_SCALE_FACTOR, SUBPIXEL_VARIANTS,
};
use anyhow::{anyhow, Context as _, Result};
use collections::{FxHashMap, FxHashSet};
@ -2553,12 +2553,11 @@ impl Window {
let element_opacity = self.element_opacity();
let scale_factor = self.scale_factor();
let bounds = bounds.scale(scale_factor);
// Render the SVG at twice the size to get a higher quality result.
let params = RenderSvgParams {
path,
size: bounds
.size
.map(|pixels| DevicePixels::from((pixels.0 * 2.).ceil() as i32)),
size: bounds.size.map(|pixels| {
DevicePixels::from((pixels.0 * SMOOTH_SVG_SCALE_FACTOR).ceil() as i32)
}),
};
let Some(tile) =