ngx-fast-svg

Feature

viewBox

The component copies the file's viewBox onto every reference. Without one, the drawing is clipped to the default box.

file without viewBox: clipped to 0 0 24 24
same file with viewBox="0 0 52 71"
<img> for reference
svg-registry.service.ts (excerpt)
// SvgRegistry: the viewBox is read from the raw file once...
const viewBox = svgString.match(/viewBox="([^"]*)"/);

// ...and applied to every <fast-svg> that references the icon,
// falling back to `0 0 ${defaultSize} ${defaultSize}`.
svg.setAttribute('viewBox', viewBox?.[1] || defaultViewBox);

Rules for your files

  • Put a viewBox on the root <svg>. The first viewBox="…" in the file, in double quotes, is used.
  • Start the file with the <svg> element. An XML declaration or comment in front of it breaks parsing.
  • Keep internal ids unique across files. All icons share one document, so two gradients with id="a" collide.