Skip to content

perf(svg): optimize imported SVGs with SVGO at build time - #1780

Open
AriaEdo wants to merge 2 commits into
mainfrom
perf/svgo-svg-optimizer
Open

AriaEdo wants to merge 2 commits into
mainfrom
perf/svgo-svg-optimizer

Conversation

@AriaEdo

@AriaEdo AriaEdo commented Oct 6, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Enable Astro's experimental.svgOptimizer (SVGO 4, already installed) so SVGs imported as components are minified before being inlined into HTML.
  • Disable six preset-default plugins that would break the line-draw animation or inline rendering: cleanupIds, convertShapeToPath, mergePaths, collapseGroups, removeEmptyAttrs, inlineStyles (reasons in astro.config.mjs).
  • Change data-line-draw → data-line-draw="" in 8 blueprint SVGs. SVGO's XML parser rejects valueless attributes and fails the build. [data-line-draw] selectors and hasAttribute() still match.
  • Remove unreferenced Font Squirrel demo/specimen/generator files from public/fonts (fonts and license files kept).

Impact (brotli, what the browser downloads)

Before After
/ HTML 34.0 KB 27.9 KB
ServiceArt strokes on /dedicated-cloud (2 SVGs) ~50 KB each ~27 KB each
All built HTML (raw) 14.2 MB 13.0 MB

Other pages only save a few hundred bytes on icons.

Verification

  • astro build passes, with the same warning count as the baseline build
  • Across 100 built pages, counts of rect/path[data-line-draw], data-line-draw-panel, pathLength, id, url(#…) and <svg> match the baseline exactly
  • 43 imported SVGs rasterized before and after (sharp) and compared per pixel: ≤0.35% difference (anti-aliasing). close.svg is 1.75% because the circle is rewritten as true arcs.
  • icons/grafana.svg could not be pixel-compared: its source has a duplicate fill attribute and is invalid XML for the rasterizer. It isn't rendered on any page today.
  • Manual browser check (not done, no browser available locally): open /, /about, /dedicated-cloud at desktop, tablet and mobile widths, scroll, and confirm the line-draw grid animations still play and the hero/footer grids look unchanged.

Notes

  • svgOptimizer is still experimental in Astro, so its API may change on upgrade.
  • New SVGs with valueless attributes will now fail the build loudly instead of shipping unoptimized.

The demo pages, specimen stylesheets and generator config were shipped
to production from public/ but nothing references them. Font files and
license texts stay.
Enable Astro's experimental svgOptimizer so SVGs imported as components
are minified before being inlined into the HTML. Homepage HTML drops
from 34.0KB to 27.9KB brotli; the two ServiceArt strokes on
/dedicated-cloud shrink from ~50KB to ~27KB each.

Six preset-default plugins are disabled because they would break the
line-draw animation or inline rendering (reasons in the config).

SVGO's XML parser rejects valueless attributes, so the blueprint SVGs
now use data-line-draw="" — the [data-line-draw] selectors and
hasAttribute() checks match it unchanged.
@felixwidjaja
felixwidjaja self-requested a review October 6, 2026 09:36

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants