mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Add support for static SVG images using resvg
crate (#36721)
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:  <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:
parent
324196351e
commit
8a20e42de4
267 changed files with 2374 additions and 544 deletions
|
@ -55,7 +55,8 @@ use malloc_size_of::MallocSizeOf;
|
|||
use media::WindowGLContext;
|
||||
use net_traits::ResourceThreads;
|
||||
use net_traits::image_cache::{
|
||||
ImageCache, ImageResponder, ImageResponse, PendingImageId, PendingImageResponse,
|
||||
ImageCache, ImageCacheResponseMessage, ImageLoadListener, ImageResponse, PendingImageId,
|
||||
PendingImageResponse, RasterizationCompleteResponse,
|
||||
};
|
||||
use net_traits::storage_thread::StorageType;
|
||||
use num_traits::ToPrimitive;
|
||||
|
@ -87,7 +88,7 @@ use style_traits::CSSPixel;
|
|||
use stylo_atoms::Atom;
|
||||
use url::Position;
|
||||
use webrender_api::ExternalScrollId;
|
||||
use webrender_api::units::{DevicePixel, LayoutPixel};
|
||||
use webrender_api::units::{DeviceIntSize, DevicePixel, LayoutPixel};
|
||||
|
||||
use super::bindings::codegen::Bindings::MessagePortBinding::StructuredSerializeOptions;
|
||||
use super::bindings::trace::HashMapTracedValues;
|
||||
|
@ -218,6 +219,8 @@ impl LayoutBlocker {
|
|||
}
|
||||
}
|
||||
|
||||
type PendingImageRasterizationKey = (PendingImageId, DeviceIntSize);
|
||||
|
||||
#[dom_struct]
|
||||
pub(crate) struct Window {
|
||||
globalscope: GlobalScope,
|
||||
|
@ -240,7 +243,7 @@ pub(crate) struct Window {
|
|||
#[no_trace]
|
||||
image_cache: Arc<dyn ImageCache>,
|
||||
#[no_trace]
|
||||
image_cache_sender: IpcSender<PendingImageResponse>,
|
||||
image_cache_sender: IpcSender<ImageCacheResponseMessage>,
|
||||
window_proxy: MutNullableDom<WindowProxy>,
|
||||
document: MutNullableDom<Document>,
|
||||
location: MutNullableDom<Location>,
|
||||
|
@ -343,11 +346,17 @@ pub(crate) struct Window {
|
|||
pending_image_callbacks: DomRefCell<HashMap<PendingImageId, Vec<PendingImageCallback>>>,
|
||||
|
||||
/// All of the elements that have an outstanding image request that was
|
||||
/// initiated by layout during a reflow. They are stored in the script thread
|
||||
/// initiated by layout during a reflow. They are stored in the [`ScriptThread`]
|
||||
/// to ensure that the element can be marked dirty when the image data becomes
|
||||
/// available at some point in the future.
|
||||
pending_layout_images: DomRefCell<HashMapTracedValues<PendingImageId, Vec<Dom<Node>>>>,
|
||||
|
||||
/// Vector images for which layout has intiated rasterization at a specific size
|
||||
/// and whose results are not yet available. They are stored in the [`ScriptThread`]
|
||||
/// so that the element can be marked dirty once the rasterization is completed.
|
||||
pending_images_for_rasterization:
|
||||
DomRefCell<HashMapTracedValues<PendingImageRasterizationKey, Vec<Dom<Node>>>>,
|
||||
|
||||
/// Directory to store unminified css for this window if unminify-css
|
||||
/// opt is enabled.
|
||||
unminified_css_dir: DomRefCell<Option<String>>,
|
||||
|
@ -568,7 +577,7 @@ impl Window {
|
|||
&self,
|
||||
id: PendingImageId,
|
||||
callback: impl Fn(PendingImageResponse) + 'static,
|
||||
) -> IpcSender<PendingImageResponse> {
|
||||
) -> IpcSender<ImageCacheResponseMessage> {
|
||||
self.pending_image_callbacks
|
||||
.borrow_mut()
|
||||
.entry(id)
|
||||
|
@ -597,6 +606,22 @@ impl Window {
|
|||
}
|
||||
}
|
||||
|
||||
pub(crate) fn handle_image_rasterization_complete_notification(
|
||||
&self,
|
||||
response: RasterizationCompleteResponse,
|
||||
) {
|
||||
let mut images = self.pending_images_for_rasterization.borrow_mut();
|
||||
let nodes = images.entry((response.image_id, response.requested_size));
|
||||
let nodes = match nodes {
|
||||
Entry::Occupied(nodes) => nodes,
|
||||
Entry::Vacant(_) => return,
|
||||
};
|
||||
for node in nodes.get() {
|
||||
node.dirty(NodeDamage::OtherNodeDamage);
|
||||
}
|
||||
nodes.remove();
|
||||
}
|
||||
|
||||
pub(crate) fn pending_image_notification(&self, response: PendingImageResponse) {
|
||||
// We take the images here, in order to prevent maintaining a mutable borrow when
|
||||
// image callbacks are called. These, in turn, can trigger garbage collection.
|
||||
|
@ -2224,8 +2249,11 @@ impl Window {
|
|||
.pending_layout_image_notification(response);
|
||||
});
|
||||
|
||||
self.image_cache
|
||||
.add_listener(ImageResponder::new(sender, self.pipeline_id(), id));
|
||||
self.image_cache.add_listener(ImageLoadListener::new(
|
||||
sender,
|
||||
self.pipeline_id(),
|
||||
id,
|
||||
));
|
||||
}
|
||||
|
||||
let nodes = images.entry(id).or_default();
|
||||
|
@ -2234,6 +2262,25 @@ impl Window {
|
|||
}
|
||||
}
|
||||
|
||||
for image in results.pending_rasterization_images {
|
||||
let node = unsafe { from_untrusted_node_address(image.node) };
|
||||
|
||||
let mut images = self.pending_images_for_rasterization.borrow_mut();
|
||||
if !images.contains_key(&(image.id, image.size)) {
|
||||
self.image_cache.add_rasterization_complete_listener(
|
||||
pipeline_id,
|
||||
image.id,
|
||||
image.size,
|
||||
self.image_cache_sender.clone(),
|
||||
);
|
||||
}
|
||||
|
||||
let nodes = images.entry((image.id, image.size)).or_default();
|
||||
if !nodes.iter().any(|n| std::ptr::eq(&**n, &*node)) {
|
||||
nodes.push(Dom::from_ref(&*node));
|
||||
}
|
||||
}
|
||||
|
||||
let size_messages = self
|
||||
.Document()
|
||||
.iframes_mut()
|
||||
|
@ -2325,12 +2372,13 @@ impl Window {
|
|||
});
|
||||
|
||||
let has_sent_idle_message = self.has_sent_idle_message.get();
|
||||
let pending_images = !self.pending_layout_images.borrow().is_empty();
|
||||
let no_pending_images = self.pending_layout_images.borrow().is_empty() &&
|
||||
self.pending_images_for_rasterization.borrow().is_empty();
|
||||
|
||||
if !has_sent_idle_message &&
|
||||
is_ready_state_complete &&
|
||||
!reftest_wait &&
|
||||
!pending_images &&
|
||||
no_pending_images &&
|
||||
!waiting_for_web_fonts_to_load
|
||||
{
|
||||
debug!(
|
||||
|
@ -3005,7 +3053,7 @@ impl Window {
|
|||
script_chan: Sender<MainThreadScriptMsg>,
|
||||
layout: Box<dyn Layout>,
|
||||
font_context: Arc<FontContext>,
|
||||
image_cache_sender: IpcSender<PendingImageResponse>,
|
||||
image_cache_sender: IpcSender<ImageCacheResponseMessage>,
|
||||
image_cache: Arc<dyn ImageCache>,
|
||||
resource_threads: ResourceThreads,
|
||||
#[cfg(feature = "bluetooth")] bluetooth_thread: IpcSender<BluetoothRequest>,
|
||||
|
@ -3104,6 +3152,7 @@ impl Window {
|
|||
webxr_registry,
|
||||
pending_image_callbacks: Default::default(),
|
||||
pending_layout_images: Default::default(),
|
||||
pending_images_for_rasterization: Default::default(),
|
||||
unminified_css_dir: Default::default(),
|
||||
local_script_source,
|
||||
test_worklet: Default::default(),
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue