fix: support SVGs with metadata

hanna-skryl commented 1 year ago

Description

Sometimes, an SVG file can include metadata, like the XML prolog and XML comments that are automatically added by Adobe Illustrator, Sketch, etc. when generating a new SVG.

In such a case, the input is considered invalid, so cache is never created and the image is not loaded.

BioPhoton commented 1 year ago

The svg needs to get cleaned up.

here we can do the following things:

[ ] add information to the docs
[ ] add runtime errors (in dev mode, in prod remove the checks from the bundle)
[ ] add a cli that cleans up the svg's

Would you be so kind and help with the docs and give me more information about how you discovered the error pls.

hanna-skryl commented 1 year ago

There are no actual runtime errors. When supplying an SVG file containing extra meta information, what happens is the <fast-svg> element is generated as usual:

<fast-svg name="Name" size="100">
  <svg class="fast-svg" width="100" height="100" viewBox="0 0 100 100">
    <use href="#Name"></use>
  </svg>
</fast-svg>

But the anchor link in the <use> element is invalid, the referred SVG is not in the <div id="svg-cache"></div>, and it's hard to tell at which point it failed.

SVG Optimizer(SVGO) might help with cleaning up the clutter.

push-based / ngx-fast-svg

fix: support SVGs with metadata #41

Description