Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add support for static SVG images using resvg crate (#36721)

Browse source 
This change adds support for rendering static SVG images using the
`resvg` crate, allowing svg sources in the `img` tag and in CSS
`background` and `content` properties. There are some limitations in
using resvg:

1. There is no support for animations or interactivity as these would
require implementing the full DOM layer of SVG specification.
2. Only system fonts can be used for text rendering. There is some
mechanism to provide a custom font resolver to usvg, but that is not
explored in this change.
3. resvg's handling of certain edge cases involving lack of explicit
`width` and `height` on the root svg element deviates from what the
specification expects from browsers. For example, resvg uses the values
in `viewBox` to derive the missing width or height dimension, but
without scaling that dimension to preserve the aspect ratio. It also
doesn't allow overriding this behavior.

Demo screenshot:
![servo - resvg
img](https://github.com/user-attachments/assets/8ecb2de2-ab7c-48e2-9f08-2d09d2cb8791)

<details>
<summary>Source</summary>

```
<style>
 #svg1 {
   border: 1px solid red;
 }

 #svg2 {
   border: 1px solid red;
   width: 300px;
 }
 #svg3 {
   border: 1px solid red;
   width: 300px;
   height: 200px;
   object-fit: contain;
 }
 #svg4 {
   border: 1px solid red;
   width: 300px;
   height: 200px;
   object-fit: cover;
 }
 #svg5 {
   border: 1px solid red;
   width: 300px;
   height: 200px;
   object-fit: fill;
 }
 #svg6 {
   border: 1px solid red;
   width: 300px;
   height: 200px;
   object-fit: none;
 }
</style>
</head>
<body>
        <div>
          <img id="svg1" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
        </div>
        <div>
          <img id="svg2" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
          <img id="svg3" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
          <img id="svg4" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
        </div>
        <div>
          <img id="svg5" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
          <img id="svg6" src="https://raw.githubusercontent.com/servo/servo/refs/heads/main/resources/servo.svg" alt="Servo logo">
        </div>
</body>
```

</details>

---------

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Mukilan Thiyagarajan 2025-05-27 16:32:40 +05:30 • committed by GitHub
parent 324196351e
commit 8a20e42de4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
267 changed files with 2374 additions and 544 deletions
Download patch file Download diff file Expand all files Collapse all files

157
components/layout/context.rs
View file

@ -10,17 +10,21 @@ use fnv::FnvHashMap;
use fonts::FontContext;
use fxhash::FxHashMap;
use net_traits::image_cache::{
ImageCache, ImageCacheResult, ImageOrMetadataAvailable, UsePlaceholder,
Image as CachedImage, ImageCache, ImageCacheResult, ImageOrMetadataAvailable, PendingImageId,
UsePlaceholder,
};
use parking_lot::{Mutex, RwLock};
use pixels::Image as PixelImage;
use script_layout_interface::{IFrameSizes, ImageAnimationState, PendingImage, PendingImageState};
use pixels::RasterImage;
use script_layout_interface::{
IFrameSizes, ImageAnimationState, PendingImage, PendingImageState, PendingRasterizationImage,
};
use servo_url::{ImmutableOrigin, ServoUrl};
use style::context::SharedStyleContext;
use style::dom::OpaqueNode;
use style::values::computed::image::{Gradient, Image};
use webrender_api::units::{DeviceIntSize, DeviceSize};
use crate::display_list::WebRenderImageInfo;
pub(crate) type CachedImageOrError = Result<CachedImage, ResolveImageError>;
pub struct LayoutContext<'a> {
pub id: PipelineId,
@ -39,11 +43,17 @@ pub struct LayoutContext<'a> {
/// A list of in-progress image loads to be shared with the script thread.
pub pending_images: Mutex<Vec<PendingImage>>,
/// A list of fully loaded vector images that need to be rasterized to a specific
/// size determined by layout. This will be shared with the script thread.
pub pending_rasterization_images: Mutex<Vec<PendingRasterizationImage>>,
/// A collection of `<iframe>` sizes to send back to script.
pub iframe_sizes: Mutex<IFrameSizes>,
pub webrender_image_cache:
Arc<RwLock<FnvHashMap<(ServoUrl, UsePlaceholder), WebRenderImageInfo>>>,
// A cache that maps image resources used in CSS (e.g as the `url()` value
// for `background-image` or `content` property) to the final resolved image data.
pub resolved_images_cache:
Arc<RwLock<FnvHashMap<(ServoUrl, UsePlaceholder), CachedImageOrError>>>,
pub node_image_animation_map: Arc<RwLock<FxHashMap<OpaqueNode, ImageAnimationState>>>,
@ -53,18 +63,24 @@ pub struct LayoutContext<'a> {
pub enum ResolvedImage<'a> {
Gradient(&'a Gradient),
Image(WebRenderImageInfo),
// The size is tracked explicitly as image-set images can specify their
// natural resolution which affects the final size for raster images.
Image {
image: CachedImage,
size: DeviceSize,
},
}
impl Drop for LayoutContext<'_> {
fn drop(&mut self) {
if !std::thread::panicking() {
assert!(self.pending_images.lock().is_empty());
assert!(self.pending_rasterization_images.lock().is_empty());
}
}
}
#[derive(Debug)]
#[derive(Clone, Copy, Debug)]
pub enum ResolveImageError {
LoadError,
ImagePending,
@ -78,18 +94,24 @@ pub enum ResolveImageError {
None,
}
pub(crate) enum LayoutImageCacheResult {
Pending,
DataAvailable(ImageOrMetadataAvailable),
LoadError,
}
impl LayoutContext<'_> {
#[inline(always)]
pub fn shared_context(&self) -> &SharedStyleContext {
&self.style_context
}
pub fn get_or_request_image_or_meta(
pub(crate) fn get_or_request_image_or_meta(
&self,
node: OpaqueNode,
url: ServoUrl,
use_placeholder: UsePlaceholder,
) -> Result<ImageOrMetadataAvailable, ResolveImageError> {
) -> LayoutImageCacheResult {
// Check for available image or start tracking.
let cache_result = self.image_cache.get_cached_image_status(
url.clone(),
@ -99,7 +121,9 @@ impl LayoutContext<'_> {
);
match cache_result {
ImageCacheResult::Available(img_or_meta) => Ok(img_or_meta),
ImageCacheResult::Available(img_or_meta) => {
LayoutImageCacheResult::DataAvailable(img_or_meta)
},
// Image has been requested, is still pending. Return no image for this paint loop.
// When the image loads it will trigger a reflow and/or repaint.
ImageCacheResult::Pending(id) => {
@ -110,7 +134,7 @@ impl LayoutContext<'_> {
origin: self.origin.clone(),
};
self.pending_images.lock().push(image);
Result::Err(ResolveImageError::ImagePending)
LayoutImageCacheResult::Pending
},
// Not yet requested - request image or metadata from the cache
ImageCacheResult::ReadyForRequest(id) => {
@ -121,14 +145,14 @@ impl LayoutContext<'_> {
origin: self.origin.clone(),
};
self.pending_images.lock().push(image);
Result::Err(ResolveImageError::ImageRequested)
LayoutImageCacheResult::Pending
},
// Image failed to load, so just return nothing
ImageCacheResult::LoadError => Result::Err(ResolveImageError::LoadError),
// Image failed to load, so just return the same error.
ImageCacheResult::LoadError => LayoutImageCacheResult::LoadError,
}
}
pub fn handle_animated_image(&self, node: OpaqueNode, image: Arc<PixelImage>) {
pub fn handle_animated_image(&self, node: OpaqueNode, image: Arc<RasterImage>) {
let mut store = self.node_image_animation_map.write();
// 1. first check whether node previously being track for animated image.
@ -157,42 +181,66 @@ impl LayoutContext<'_> {
}
}
fn get_webrender_image_for_url(
fn get_cached_image_for_url(
&self,
node: OpaqueNode,
url: ServoUrl,
use_placeholder: UsePlaceholder,
) -> Result<WebRenderImageInfo, ResolveImageError> {
if let Some(existing_webrender_image) = self
.webrender_image_cache
) -> Result<CachedImage, ResolveImageError> {
if let Some(cached_image) = self
.resolved_images_cache
.read()
.get(&(url.clone(), use_placeholder))
{
return Ok(*existing_webrender_image);
return cached_image.clone();
}
let image_or_meta =
self.get_or_request_image_or_meta(node, url.clone(), use_placeholder)?;
match image_or_meta {
ImageOrMetadataAvailable::ImageAvailable { image, .. } => {
self.handle_animated_image(node, image.clone());
let image_info = WebRenderImageInfo {
size: Size2D::new(image.width, image.height),
key: image.id,
};
if image_info.key.is_none() {
Ok(image_info)
} else {
let mut webrender_image_cache = self.webrender_image_cache.write();
webrender_image_cache.insert((url, use_placeholder), image_info);
Ok(image_info)
}
let result = self.get_or_request_image_or_meta(node, url.clone(), use_placeholder);
match result {
LayoutImageCacheResult::DataAvailable(img_or_meta) => match img_or_meta {
ImageOrMetadataAvailable::ImageAvailable { image, .. } => {
if let Some(image) = image.as_raster_image() {
self.handle_animated_image(node, image.clone());
}
let mut resolved_images_cache = self.resolved_images_cache.write();
resolved_images_cache.insert((url, use_placeholder), Ok(image.clone()));
Ok(image)
},
ImageOrMetadataAvailable::MetadataAvailable(..) => {
Result::Err(ResolveImageError::OnlyMetadata)
},
},
ImageOrMetadataAvailable::MetadataAvailable(..) => {
Result::Err(ResolveImageError::OnlyMetadata)
LayoutImageCacheResult::Pending => Result::Err(ResolveImageError::ImagePending),
LayoutImageCacheResult::LoadError => {
let error = Err(ResolveImageError::LoadError);
self.resolved_images_cache
.write()
.insert((url, use_placeholder), error.clone());
error
},
}
}
pub fn rasterize_vector_image(
&self,
image_id: PendingImageId,
size: DeviceIntSize,
node: OpaqueNode,
) -> Option<RasterImage> {
let result = self.image_cache.rasterize_vector_image(image_id, size);
if result.is_none() {
self.pending_rasterization_images
.lock()
.push(PendingRasterizationImage {
id: image_id,
node: node.into(),
size,
});
}
result
}
pub fn resolve_image<'a>(
&self,
node: Option<OpaqueNode>,
@ -215,12 +263,14 @@ impl LayoutContext<'_> {
// element and not just the node.
let image_url = image_url.url().ok_or(ResolveImageError::InvalidUrl)?;
let node = node.ok_or(ResolveImageError::MissingNode)?;
let webrender_info = self.get_webrender_image_for_url(
let image = self.get_cached_image_for_url(
node,
image_url.clone().into(),
UsePlaceholder::No,
)?;
Ok(ResolvedImage::Image(webrender_info))
let metadata = image.metadata();
let size = Size2D::new(metadata.width, metadata.height).to_f32();
Ok(ResolvedImage::Image { image, size })
},
Image::ImageSet(image_set) => {
image_set
@ -230,17 +280,32 @@ impl LayoutContext<'_> {
.and_then(|image| {
self.resolve_image(node, &image.image)
.map(|info| match info {
ResolvedImage::Image(mut image_info) => {
ResolvedImage::Image {
image: cached_image,
..
} => {
// From <https://drafts.csswg.org/css-images-4/#image-set-notation>:
// > A <resolution> (optional). This is used to help the UA decide
// > which <image-set-option> to choose. If the image reference is
// > for a raster image, it also specifies the image’s natural
// > resolution, overriding any other source of data that might
// > supply a natural resolution.
image_info.size = (image_info.size.to_f32() /
image.resolution.dppx())
.to_u32();
ResolvedImage::Image(image_info)
let image_metadata = cached_image.metadata();
let size = if cached_image.as_raster_image().is_some() {
let scale_factor = image.resolution.dppx();
Size2D::new(
image_metadata.width as f32 / scale_factor,
image_metadata.height as f32 / scale_factor,
)
} else {
Size2D::new(image_metadata.width, image_metadata.height)
.to_f32()
};
ResolvedImage::Image {
image: cached_image,
size,
}
},
_ => info,
})