The Servo Browser Engine
Find a file
Mukilan Thiyagarajan 4c05758ded
script: support inline SVG by serializing the subtree (#38188)
This patch adds support for rendering static inline SVG documents in the
DOM tree by serializing the SVGElement's subtree and leveraging the
existing resvg based SVG stack for rendering. Serialiing the subtree is
necessary as resvg's tree representation (roxmltree) is immutable, so we
can't construct the tree incrementally.

Few other design choices here:
1. The `SVGSVGElement` is now treated as a replaced element and the
   layout code is responsible for plumbing the serialized SVG source
   (encoded as a base64 data: url) into the image cache, much like how
   background images are handled.
2. The serialization is done on the script thread after an initial
   layout pass. This is necessary because the serialization code asserts
that it is invoked from script thread i.e we can't call it from layout
   workers.
3. The serialized SVG data: url is cached to avoid recomputing it on
   subsequent layouts. The cache is invalidated when the SVGSVGElement's
   subtree is mutated.

The original SVGSVGElement code was behind the `dom_svg_enabled` pref.
This patch also removes the preference and make SVG support using resvg
available unconditionally.

Below is the analysis of the new test failures:

These tests use inline SVG but used to pass by accident.
They now fail because they contain SVG with no intrinsic
sizing which is not handled by resvg in a way that would
allows us to distinguish it from the sized case. The same
limitation applies to non-inline SVG.

 - /css/CSS2/positioning/absolute-replaced-width-003a.xht
 - /css/CSS2/positioning/absolute-replaced-width-003b.xht
 - /css/CSS2/positioning/absolute-replaced-width-003c.xht

These tests employ CSS styles in the HTML that
target the elements in inline SVG, which is not currently
supported.

-
/css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html
 - /css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html

This is a tentative test that uses the unsupported 'border-shape' CSS
property. The ref uses SVG, so it used to pass accidentally. The ref
still doesn't render correctly since it also relies on styling SVG
elements using CSS classes in the HTML (instead of inline in SVG).

 - /css/css-borders/tentative/border-shape/border-shape-stroke.html

These tests use the attribute 'clip-path=circle(...)' in the
test, but this doesn't seem to work in resvg.

 - /css/css-masking/clip-path/clip-path-borderBox-1b.html
 - /css/css-masking/clip-path/clip-path-contentBox-1b.html
 - /css/css-masking/clip-path/clip-path-contentBox-1c.html
 - /css/css-masking/clip-path/clip-path-fillBox-1b.html
 - /css/css-masking/clip-path/clip-path-marginBox-1a.html
 - /css/css-masking/clip-path/clip-path-paddingBox-1b.html
 - /css/css-masking/clip-path/clip-path-strokeBox-1b.html
 - /css/css-masking/clip-path/clip-path-strokeBox-1c.html
 - /css/css-masking/clip-path/clip-path-viewBox-1a.html
 - /css/css-masking/clip-path/clip-path-viewBox-1b.html
 - /css/css-masking/clip-path/clip-path-viewBox-1d.html
 - /css/css-masking/clip-path/svg-clip-path-circle-offset.html
 - /css/css-masking/clip-path/svg-clip-path-ellipse-offset.html

Additionally, the below two tests use a `foreignObject` SVG element
which
embeds a html div fragment. This is also not supported by resvg.

 - /css/css-masking/clip-path/clip-path-viewBox-1d.html
 - /css/css-masking/clip-path/clip-path-fillBox-1b.html

The following test fails because of apparent pixel differences
between a circle rendered purely using CSS clip-path vs a circle
rendered in SVG using resvg.

 - /css/css-masking/clip-path/clip-path-contentBox-1c.html

These tests style the inline SVG elements using CSS in the HTML or
separate stylesheet. This is not supported by this implementation.

 - /css-transforms/document-styles/svg-document-styles-{001..004}.html
 - /css-transforms/document-styles/svg-document-styles-012.html
 - /css-transforms/external-styles/svg-external-styles-{001..004}.html
 - /css-transforms/external-styles/svg-external-styles-014.html

These tests seem like they should pass, but they fail because of what
seems like an anti-aliasing issue in the rendering engine. The
transformed element has a thin outline which is causing pixel difference
with the ref:

 - /css/css-transforms/group/svg-transform-group-008.html
 - /css/css-transforms/group/svg-transform-group-009.html
 - /css/css-transforms/group/svg-transform-nested-009.html
 - /css/css-transforms/group/svg-transform-nested-013.html
 - /css/css-transforms/group/svg-transform-nested-014.html
 - /css/css-transforms/group/svg-transform-nested-018.html
 - /css/css-transforms/group/svg-transform-nested-019.html
 - /css/css-transforms/group/svg-transform-nested-008.html

The below tests fail because resvg is calculating the wrong size for the
'rect' inside the SVG. The dimensions of the SVG are established via the
CSS in the HTML, so it seems resvg is using incorrect coordinates for
the children of the svg when explict width/height are not specified in
the root svg element.

 - /css/css-transforms/group/svg-transform-group-011.html
 - /css/css-transforms/group/svg-transform-nested-021.html
 - /css/css-transforms/group/svg-transform-nested-029.html

All these tests use an SVG that doesn't have width nor height attributes
and this causes resvg to use incorrect coordinates for the SVG's
children. In addition, the following tests use the CSS syntax for
transforms inside the SVG (using style attribute) which is not supported
by resvg (it only supports the SVG 1.1 transform syntax).

 - /css/css-transforms/inline-styles/svg-inline-styles-{001..004}.html
 - /css/css-transforms/inline-styles/svg-inline-styles-012.html

In the case of these four tests, the `style` attribute specifies an
invalid transform, but resvg doesn't fallback to the transform specified
via the `transform`  attribute on the same element.

 - /css/css-transforms/inline-styles/svg-inline-styles-005.html
 - /css/css-transforms/inline-styles/svg-inline-styles-006.html
 - /css/css-transforms/inline-styles/svg-inline-styles-010.html
 - /css/css-transforms/inline-styles/svg-inline-styles-013.html

The following test fails because of the lack of width/height in SVG as
described above but it also exposes gaps in our CSS tranform
implementation.

 - /css/css-transforms/preserve3d-and-filter-with-perspective.html

These tests failure because resvg doesn't handle the SVG without
explicit width and height, but specified via CSS in the HTML. In
addition, there are pixel differences between the ref due to
antialiasing issues.

 - /css/css-transforms/matrix/svg-matrix-{005...008}.html
 - /css/css-transforms/matrix/svg-matrix-010.html
 - /css/css-transforms/matrix/svg-matrix-012.html
 - /css/css-transforms/matrix/svg-matrix-{015..069}.html
 - /css/css-transforms/rotate/svg-rotate-angle-45-001.html
 - /css/css-transforms/rotate/svg-rotate-angle-45-011.html
 - /css/css-transforms/rotate/svg-rotate-angle-45-022.html
 - /css/css-transforms/scale/svg-scale-006.html
 - /css/css-transforms/scale/svg-scale-007.html

These tests seem to be failing due to some sort of antialiasing issue,
where a transformed SVG element has a thin border that causes pixel
differences compared to the solid colored reference.

 - /css/css-transforms/skewX/svg-skewx-001.html
 - /css/css-transforms/skewX/svg-skewx-006.html
 - /css/css-transforms/skewX/svg-skewx-011.html
 - /css/css-transforms/skewX/svg-skewx-016.html
 - /css/css-transforms/skewX/svg-skewx-021.html
 - /css/css-transforms/skewX/svg-skewxy-001.html
 - /css/css-transforms/skewY/svg-skewy-001.html
 - /css/css-transforms/skewY/svg-skewy-006.html
 - /css/css-transforms/skewY/svg-skewy-011.html
 - /css/css-transforms/skewY/svg-skewy-016.html
 - /css/css-transforms/skewY/svg-skewy-021.html

These tests specify several SVG attributes such as transform,
vector-effect etc via CSS in the HTML (rather than inline in SVG). The
current implementation doesn't support this.

 - /css/css-transforms/transform-box/stroke-box-mutation-001.html
 - /css/css-transforms/transform-box/stroke-box-mutation-002.html
 - /css/css-transforms/transform-box/stroke-box-mutation-003.html
 - /css/css-transforms/transform-box/stroke-box-mutation-004.html
 - /css/css-transforms/transform-box/svgbox-stroke-box-002.html
 - /css/css-transforms/transform-box/svgbox-stroke-box-003.html
 - /css/css-transforms/transform-box/svgbox-stroke-box-004.html
 - /css/css-transforms/transform-box/svgbox-stroke-box-005.html

These tests depend on 'transform-origin' specified on an element inside
an SVG, but this transform is influenced by the 'tranform-box' set via
CSS in the HTML itself (not the SVG). The current implementation doesn't
support styling the SVG using document styles, so these tests just fail.

- /css/css-transforms/transform-origin/svg-origin-relative-length-*.html

These tests check the fallback behaviour when invalid syntax is
encountered in the 'transform-origin' value. resvg doesn't correctly
fallback to 0,0 causing the tests to fail.

-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html
-
/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html

These tests use unimplemented Canvas APIs like 'beginLayer' and
the 'CanvasFilter' constructor and hence fail at runtime.

-
/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
-
/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.tentative.html
-
/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.tentative.html
-
/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.tentative.html
 - /html/canvas/element/layers/2d.layer.css-filters.blur.tentative.html
- /html/canvas/element/layers/2d.layer.css-filters.shadow.tentative.html
 - /html/canvas/element/layers/2d.layer.ctm.layer-filter.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.layers.dropShadow.tentative.html
-
/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.isotropic.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.x-only.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.anisotropic-blur.y-only.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.css-filters.blur-and-shadow.tentative.html
- /html/canvas/offscreen/layers/2d.layer.css-filters.blur.tentative.html
-
/html/canvas/offscreen/layers/2d.layer.css-filters.shadow.tentative.html
- /html/canvas/offscreen/layers/2d.layer.ctm.layer-filter.tentative.html

These tests fail because resvg doesn't seem to honour the 'translate'
CSS property specified on an SVG element using an inline 'style'
attribute.

 - /css/css-transforms/translate/svg-translate-with-units.html
-
/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html
-
/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html
 - /css/css-transforms/translate/translate-in-svg.html

These tests seem to fail due to the filter effect implementation in
resvg either not being complete or spec compliant.

 - /css/filter-effects/feconvolve-divisor.html
 - /css/filter-effects/feconvolve-region-001.html
 - /css/filter-effects/feconvolve-region-002.html
 - /css/filter-effects/filter-subregion-01.html
 - /css/filter-effects/svg-feimage-002.html
 - /css/filter-effects/svg-feimage-003.html
 - /css/filter-effects/svg-feimage-004.html
 - /css/filter-effects/svg-feoffset-001.html

The test /css/filter-effects/svg-feimage-004.html should ideally PASS
but currently fails because we don't propagate height/width set using
CSS in HTML element to the root SVG, so resvg uses the wrong dimensions
when rendering the children of the SVG.

These failures are due to deficienies in our current implementation
i.e we don't support styling SVG elements using CSS in HTML.

-
/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html
 - /css/selectors/sharing-in-svg-use.html

The below test fails as our current implementation relies on resvg to
tell us the intrinsic ratio of the SVG, but this doesn't always work
correctly.

 - /css/css-sizing/svg-intrinsic-size-005.html

This failure is due to lack of proper fallback to no-op transform in
resvg when the `rotate()` syntax is specified with an invalid list e.g
`rotate(90,)`.

 - /css/css-transforms/rotate/svg-rotate-3args-invalid-002.html

This test only passes in CI and based on the raw log output, it seems
that no text inside the SVG is rendered in the CI. This could be an font
stack related issue.

 - /css/css-display/display-contents-svg-elements.html

This test asserts that the CSP blocks loads triggered using `use`
elements in SVG. It used to TIMEOUT as without inline SVG support, no
CSP violation event was triggered. It fails now since the event is now
triggered for the load of the SVG itself (our current implementation
loads inline SVGs as serialized base64 data: urls). This doesn't match
the blocked URL in the use element though.

 - /content-security-policy/img-src/svg-use-blocked.tentative.html

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
2025-08-11 11:07:59 +00:00
.cargo Move various reflector types and traits to script_bindings (#35279) 2025-02-04 06:58:08 +00:00
.github Update to SpiderMonkey 137. (#37077) 2025-08-07 16:47:27 +00:00
.vscode use ruff rather than flake8 for python code linting (#37045) 2025-05-24 14:19:47 +00:00
components script: support inline SVG by serializing the subtree (#38188) 2025-08-11 11:07:59 +00:00
docs Update in-tree docs to point to the new book (#32743) 2024-07-09 15:42:00 +00:00
etc Support WPT subsuites in agregating and flake detection (#37584) 2025-07-04 16:58:42 +00:00
ports/servoshell script: support inline SVG by serializing the subtree (#38188) 2025-08-11 11:07:59 +00:00
python tidy: Replace custom panic/unwrap lint with clippy lint (#38593) 2025-08-11 11:04:11 +00:00
resources devtools: Create source actors from Debugger API notifications (#38334) 2025-08-11 06:04:51 +00:00
support Losslessly optimize Android resources (#38332) 2025-07-29 12:15:50 +00:00
tests script: support inline SVG by serializing the subtree (#38188) 2025-08-11 11:07:59 +00:00
third_party script_binding: Add type check on servo script bindings (#38161) 2025-08-01 04:34:24 +00:00
.gitattributes openharmony: add servoshell for ohos (#33295) 2024-09-20 08:20:27 +00:00
.gitignore Add justfile to gitignore (#37621) 2025-06-23 02:37:04 +00:00
.mailmap Update Tetsuharu OHZEKI's entry in mailmap 2019-11-15 00:46:45 +09:00
.python-version Set python version to 3.11 (#34707) 2024-12-19 18:42:36 +00:00
Cargo.lock Update Nom to 8.0.0 (#38585) 2025-08-10 21:25:37 +00:00
Cargo.toml Update Nom to 8.0.0 (#38585) 2025-08-10 21:25:37 +00:00
CODE_OF_CONDUCT.md Clarify the Code of Conduct (closes servo/servo.org#164) (#32835) 2024-07-23 09:12:03 +00:00
CONTRIBUTING.md Update in-tree docs to point to the new book (#32743) 2024-07-09 15:42:00 +00:00
deny.toml Update Nom to 8.0.0 (#38585) 2025-08-10 21:25:37 +00:00
Info.plist remove bhtml 2018-02-11 08:02:39 +01:00
LICENSE Update MPL license to https (part 1) 2018-11-19 14:46:43 +01:00
LICENSE_WHATWG_SPECS Add license for WHATWG specifications in code (#36282) 2025-04-03 04:33:06 +00:00
mach Mergeruff.toml into pyproject.toml (#37741) 2025-07-04 12:21:48 +00:00
mach.bat Mergeruff.toml into pyproject.toml (#37741) 2025-07-04 12:21:48 +00:00
PULL_REQUEST_TEMPLATE.md Use a simpler GitHub pull request template (#36203) 2025-03-30 10:14:13 +00:00
pyproject.toml script_binding: Add type check on servo script bindings (#38161) 2025-08-01 04:34:24 +00:00
README.md mach (Windows): make vswhere.exe work properly (#38028) 2025-07-13 12:23:55 +00:00
rust-toolchain.toml Unsimplify rust-toolchain.toml by adding clippy and rustfmt (#37028) 2025-05-16 17:04:27 +00:00
rustfmt.toml Update rustfmt to the 2024 style edition (#35764) 2025-03-03 11:26:53 +00:00
SECURITY.md docs(security): avoid possible misconception in the security policy (#37032) 2025-05-16 21:27:42 +00:00
servo-tidy.toml mach(test-tidy): Remove alphabetical order and line length rule from tidy (#38538) 2025-08-11 08:54:50 +00:00
servobuild.example Fix DBus warning when running mach (#37818) 2025-07-02 23:17:01 +00:00
shell.nix Fix DBus warning when running mach (#37818) 2025-07-02 23:17:01 +00:00
taplo.toml Format toml files (#30112) 2023-08-17 15:07:43 +00:00
uv.toml uv: Use native-tls (#36564) 2025-04-16 11:47:49 +00:00

The Servo Parallel Browser Engine Project

Servo is a prototype web browser engine written in the Rust language. It is currently developed on 64-bit macOS, 64-bit Linux, 64-bit Windows, 64-bit OpenHarmony, and Android.

Servo welcomes contribution from everyone. Check out:

Coordination of Servo development happens:

Getting started

For more detailed build instructions, see the Servo book under Setting up your environment, Building Servo, Building for Android and Building for OpenHarmony.

macOS

  • Download and install Xcode and brew.
  • Install uv: curl -LsSf https://astral.sh/uv/install.sh | sh
  • Install rustup: curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
  • Restart your shell to make sure cargo is available
  • Install the other dependencies: ./mach bootstrap
  • Build servoshell: ./mach build

Linux

  • Install curl:
    • Arch: sudo pacman -S --needed curl
    • Debian, Ubuntu: sudo apt install curl
    • Fedora: sudo dnf install curl
    • Gentoo: sudo emerge net-misc/curl
  • Install uv: curl -LsSf https://astral.sh/uv/install.sh | sh
  • Install rustup: curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
  • Restart your shell to make sure cargo is available
  • Install the other dependencies: ./mach bootstrap
  • Build servoshell: ./mach build

Windows

  • Download uv, choco, and rustup
    • Be sure to select Quick install via the Visual Studio Community installer
  • In the Visual Studio Installer, ensure the following components are installed:
    • Windows 10/11 SDK (anything >= 10.0.19041.0) (Microsoft.VisualStudio.Component.Windows{10, 11}SDK.{>=19041})
    • MSVC v143 - VS 2022 C++ x64/x86 build tools (Latest) (Microsoft.VisualStudio.Component.VC.Tools.x86.x64)
    • C++ ATL for latest v143 build tools (x86 & x64) (Microsoft.VisualStudio.Component.VC.ATL)
    • C++ MFC for latest v143 build tools (x86 & x64) (Microsoft.VisualStudio.Component.VC.ATLMFC)
  • Restart your shell to make sure cargo is available
  • Install the other dependencies: .\mach bootstrap
  • Build servoshell: .\mach build

Android

  • Ensure that the following environment variables are set:
    • ANDROID_SDK_ROOT
    • ANDROID_NDK_ROOT: $ANDROID_SDK_ROOT/ndk/26.2.11394342/ ANDROID_SDK_ROOT can be any directory (such as ~/android-sdk). All of the Android build dependencies will be installed there.
  • Install the latest version of the Android command-line tools to $ANDROID_SDK_ROOT/cmdline-tools/latest.
  • Run the following command to install the necessary components:
    sudo $ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager --install \
     "build-tools;34.0.0" \
     "emulator" \
     "ndk;26.2.11394342" \
     "platform-tools" \
     "platforms;android-33" \
     "system-images;android-33;google_apis;x86_64"
    
  • Follow the instructions above for the platform you are building on

OpenHarmony

  • Follow the instructions above for the platform you are building on to prepare the environment.
  • Depending on the target distribution (e.g. HarmonyOS NEXT vs pure OpenHarmony) the build configuration will differ slightly.
  • Ensure that the following environment variables are set
    • DEVECO_SDK_HOME (Required when targeting HarmonyOS NEXT)
    • OHOS_BASE_SDK_HOME (Required when targeting OpenHarmony)
    • OHOS_SDK_NATIVE (e.g. ${DEVECO_SDK_HOME}/default/openharmony/native or ${OHOS_BASE_SDK_HOME}/${API_VERSION}/native)
    • SERVO_OHOS_SIGNING_CONFIG: Path to json file containing a valid signing configuration for the demo app.
  • Review the detailed instructions at Building for OpenHarmony.
  • The target distribution can be modified by passing --flavor=<default|harmonyos> to `mach <build|package|install>.