SVG runtime and compiler infra improvements#100
Open
scorsin-oai wants to merge 6 commits into
Open
Conversation
## Description This change adds support for SVG in the `<image>` and `<animatedimage>` element. This is implemented using the Skia SVG module. When rendered through an `<image>`, the SVG gets rasterized, then encoded to PNG before being passed back to iOS/Android. There is thus a PNG encode/decode dance occurring, but it is still much much faster than spinning up a webview. That encode/decode dance could be optimized out if we added support for providing bitmaps directly from the C++ level in our asset loading APIs. When rendered through an `<animatedimage>`, the SVG is rendered in real time in a hardware accelerated context (same as Lottie). When the element resizes, it will redraw at the new size, making svgs scalable when used in this context. <img width="426" height="897" alt="Screenshot 2026-04-24 at 10 03 48 AM" src="https://github.com/user-attachments/assets/b91e16b4-bf04-49c8-ab28-48c85c8b8b1f" /> ## Type of Change - [ ] Bug fix (non-breaking change that fixes an issue) - [ ] Documentation improvement - [ ] Performance optimization - [ ] Test improvement - [ ] Other (please describe) ## Testing - [ ] Tests pass locally (`bazel test //...`) - [ ] Added/updated tests for changes (if applicable) - [ ] Tested on multiple platforms (iOS/Android/Web/macOS as applicable) - [ ] Manual testing performed (describe below) ### Testing Details <!-- Describe the testing you performed --> ## Checklist - [ ] Code follows project style guidelines - [ ] Documentation updated (if needed) - [ ] No breaking changes (or documented in description) - [ ] Commit messages follow [conventional format](../CONTRIBUTING.md#commit-messages) - [ ] No secrets, API keys, or internal URLs included ## Related Issues <!-- Link related issues using: Closes #(issue), Fixes #(issue), Relates to #(issue) --> ## Additional Context <!-- Add any other context, screenshots, or information that would help reviewers --> (cherry picked from commit 4bfdd4341e3fd03c43e319a040298d3d1462d321)
This change removes the PNG encode-decode dance when using an `<image>` element with an SVG source. We were encoding the SVGs into PNG before handing back to the iOS/Android platform code which was able to take care of the decode from byte array. We now directly raster into a Bitmap, and the bitmap gets represented into an iOS/Android image representation without a further copy, and without decode/encode dance. - [ ] Bug fix (non-breaking change that fixes an issue) - [ ] Documentation improvement - [ ] Performance optimization - [ ] Test improvement - [ ] Other (please describe) - [ ] Tests pass locally (`bazel test //...`) - [ ] Added/updated tests for changes (if applicable) - [ ] Tested on multiple platforms (iOS/Android/Web/macOS as applicable) - [ ] Manual testing performed (describe below) <!-- Describe the testing you performed --> - [ ] Code follows project style guidelines - [ ] Documentation updated (if needed) - [ ] No breaking changes (or documented in description) - [ ] Commit messages follow [conventional format](../CONTRIBUTING.md#commit-messages) - [ ] No secrets, API keys, or internal URLs included <!-- Link related issues using: Closes #(issue), Fixes #(issue), Relates to #(issue) --> <!-- Add any other context, screenshots, or information that would help reviewers --> (cherry picked from commit 9730fbebdec48853fd1ceadc7d4604636b23e1c6)
This change builds the resvg library from source, which will make it possible to use it on iOS and Android (right now we precompile the binaries for macOS and Linux only). - [ ] Bug fix (non-breaking change that fixes an issue) - [ ] Documentation improvement - [ ] Performance optimization - [ ] Test improvement - [ ] Other (please describe) - [ ] Tests pass locally (`bazel test //...`) - [ ] Added/updated tests for changes (if applicable) - [ ] Tested on multiple platforms (iOS/Android/Web/macOS as applicable) - [ ] Manual testing performed (describe below) <!-- Describe the testing you performed --> - [ ] Code follows project style guidelines - [ ] Documentation updated (if needed) - [ ] No breaking changes (or documented in description) - [ ] Commit messages follow [conventional format](../CONTRIBUTING.md#commit-messages) - [ ] No secrets, API keys, or internal URLs included <!-- Link related issues using: Closes #(issue), Fixes #(issue), Relates to #(issue) --> <!-- Add any other context, screenshots, or information that would help reviewers --> (cherry picked from commit e29161e0cf8be8dccdee431f8ea169782932268f)
ReSVG doesn't build on Android armv7 and x86_64. This change fixes it. - [ ] Bug fix (non-breaking change that fixes an issue) - [ ] Documentation improvement - [ ] Performance optimization - [ ] Test improvement - [ ] Other (please describe) - [ ] Tests pass locally (`bazel test //...`) - [ ] Added/updated tests for changes (if applicable) - [ ] Tested on multiple platforms (iOS/Android/Web/macOS as applicable) - [ ] Manual testing performed (describe below) <!-- Describe the testing you performed --> - [ ] Code follows project style guidelines - [ ] Documentation updated (if needed) - [ ] No breaking changes (or documented in description) - [ ] Commit messages follow [conventional format](../CONTRIBUTING.md#commit-messages) - [ ] No secrets, API keys, or internal URLs included <!-- Link related issues using: Closes #(issue), Fixes #(issue), Relates to #(issue) --> <!-- Add any other context, screenshots, or information that would help reviewers --> (cherry picked from commit 8255db95f0658a49f76e08b4497f5dacf201f8fb)
This PR removes the need for bundling a pngquant binary. We now build pngquant from source inside the compiler toolbox binary. This simplifies the framework packaging by removing an additional binary that we have to carry around. This change was made possible recently because we are now building resvg from source, which is a rust library, and pngquant is in rust too. pngquant is now a rust dependency of compiler toolbox. - [ ] Bug fix (non-breaking change that fixes an issue) - [ ] Documentation improvement - [ ] Performance optimization - [ ] Test improvement - [ ] Other (please describe) - [ ] Tests pass locally (`bazel test //...`) - [ ] Added/updated tests for changes (if applicable) - [ ] Tested on multiple platforms (iOS/Android/Web/macOS as applicable) - [ ] Manual testing performed (describe below) <!-- Describe the testing you performed --> - [ ] Code follows project style guidelines - [ ] Documentation updated (if needed) - [ ] No breaking changes (or documented in description) - [ ] Commit messages follow [conventional format](../CONTRIBUTING.md#commit-messages) - [ ] No secrets, API keys, or internal URLs included <!-- Link related issues using: Closes #(issue), Fixes #(issue), Relates to #(issue) --> <!-- Add any other context, screenshots, or information that would help reviewers --> (cherry picked from commit 184a16b09137196a9b289c71c8436062ac4acd26)
Sensitive Files Detected📦 Dependency change — Modifies the Bazel module graph — needs runtime team review after import. 📎 Prebuilt binary — Changes a prebuilt binary — requires verification of provenance. 🔧 Build rules — Affects build rules for all Valdi consumers. This is an automated notice. A maintainer will review after import. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This change contains some SVG related changes.
Compiler/Infra:
--pngquantoption which the Valdi compiler uses.valdi_initialize_rust_workspace()call. This is necessary to get the Rust Bazel dependencies needed to build pngquant and resvg from source.Runtime:
<image>element now supports svgs. It can have asrcthat points to a URL that fetches SVG. The SVG is rasterized at runtime in a background thread after the image is loaded. This works on iOS, Android and SnapDrawing.<animatedimage>element now also support svg. Unlike<image>, there is no rasterization, the SVG is drawn at full resolution every time the layer is redrawn (after an invalidation). That means that if the layer is being resized, it will render in full resolution in real time, it will always look sharp.Type of Change
Testing
bazel test //...)Testing Details
Checklist
Related Issues
Additional Context