The Servo Browser Engine
Find a file
Mukilan Thiyagarajan 8a20e42de4
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:
![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>
2025-05-27 11:02:40 +00:00
.cargo Move various reflector types and traits to script_bindings (#35279) 2025-02-04 06:58:08 +00:00
.github OHOS CI: Allow run.json to be overwritten in upload action. (#37083) 2025-05-23 02:17:41 +00:00
.vscode use ruff rather than flake8 for python code linting (#37045) 2025-05-24 14:19:47 +00:00
components Add support for static SVG images using resvg crate (#36721) 2025-05-27 11:02:40 +00:00
docs Update in-tree docs to point to the new book (#32743) 2024-07-09 15:42:00 +00:00
etc Use ruff to enforce python code formatting (#37117) 2025-05-26 11:54:43 +00:00
ports/servoshell servoshell: Ensure that the theme is applied properly on startup (#37128) 2025-05-26 15:09:04 +00:00
python bootstrap: Add winget fallback (#32836) 2025-05-27 09:51:46 +00:00
resources Replace hsts preload list hashmap with an FST (#37015) 2025-05-20 04:26:55 +00:00
support ohos: servoshell: Use Flex{Column} to avoid Column bug (#37087) 2025-05-24 01:37:46 +00:00
tests Add support for static SVG images using resvg crate (#36721) 2025-05-27 11:02:40 +00:00
third_party imagebitmap: Make ImageBitmap serializable and transferable (#37101) 2025-05-23 20:40:25 +00:00
.clang-format Run test-tidy on Windows 2019-11-21 09:56:39 +01:00
.gitattributes openharmony: add servoshell for ohos (#33295) 2024-09-20 08:20:27 +00:00
.gitignore Add Zed configuration files to .gitignore (#36909) 2025-05-08 08:23:19 +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 Add support for static SVG images using resvg crate (#36721) 2025-05-27 11:02:40 +00:00
Cargo.toml Add support for static SVG images using resvg crate (#36721) 2025-05-27 11:02:40 +00:00
CLOBBER Add clobber mechanism 2017-05-08 16:19:56 +02: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 build(deps): bump the objc2-related group with 2 updates (#36919) 2025-05-11 18:39:49 +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 Fix mach argument quoting on NixOS (#35573) 2025-02-21 08:21:50 +00:00
mach.bat mach: adopt uv and avoid system python (#34632) 2024-12-16 09:20:37 +00:00
PULL_REQUEST_TEMPLATE.md Use a simpler GitHub pull request template (#36203) 2025-03-30 10:14:13 +00:00
README.md Link to the Zulip and project repo in README (#37134) 2025-05-26 15:51:50 +00:00
ruff.toml use ruff rather than flake8 for python code linting (#37045) 2025-05-24 14:19:47 +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 Replace hsts preload list hashmap with an FST (#37015) 2025-05-20 04:26:55 +00:00
servobuild.example Remove some references to layout 2013 vs layout 2020 (#37007) 2025-05-14 19:53:48 +00:00
shell.nix Install tshark for automated tests in #36033 (#36201) 2025-03-28 09:43:03 +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 SDK (10.0.19041.0) (Microsoft.VisualStudio.Component.Windows10SDK.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>.