Add embedded sprite option for animations and font-face support#2
Merged
Conversation
Introduces an `embedded` plugin option that inlines named sprite sheets directly into the HTML document via Vite's `transformIndexHtml` hook, rather than loading them as external files. When a sprite is loaded as an external SVG document and referenced via `<use href="sprite.svg#id">`, browsers prevent CSS animations (@Keyframes), SMIL animations (<animate>, <animateMotion>), and @font-face rules defined inside <symbol> elements from affecting the referencing document. Inlining the sprite into the HTML bypasses this restriction entirely. - Add `embedded: boolean | string[]` option to SvgJarOptions - Embedded sprites are still emitted as asset files and additionally injected into every HTML entry point via transformIndexHtml - Symbols in embedded sprites use local fragment hrefs (#symbolId) rather than external file references - Add 5 animated SVG fixtures to the vanilla test project covering CSS animations, SMIL <animate>, and SMIL <animateMotion> - Add animations.html manual test page to the vanilla test project - Add external asset reference fixtures (absolute image URL, @font-face with external font URL) and verify they pass through unchanged - Fix bug: absolute URLs in <image href> and <use href> were being incorrectly resolved against the local filesystem in both the load and generateBundle hooks - Add E2E tests for embedded sprite injection and animation preservation - Update README with embedded option documentation and explanation
evoactivity
changed the title
Contributor
Author
|
Note that this adds new svg's to the vanilla test-project, requiring the e2e test to be ran manually to update the saved screenshot. |
Merged
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
1 participant
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.
Introduces an
embeddedplugin option that inlines named sprite sheets directly into the HTML document via Vite'stransformIndexHtmlhook, rather than loading them as external files.When a sprite is loaded as an external SVG document and referenced via
<use href="sprite.svg#id">, browsers prevent CSS animations (@Keyframes), SMIL animations (, ), and @font-face rules defined inside elements from affecting the referencing document. Inlining the sprite into the HTML bypasses this restriction entirely.