Grunticon + svgmin + PNG fallbacks

If you're using filamentgroup's grunticon to inline SVG icons in your workflow and you're minifying them with svgmin before you're running Grunticon (as you should), you may run into broken PNG fallback images that are output by Grunticon.

The bug: the PNGs contain a big blob of SVG text instead of the image.

The reason: By default, svgmin removes the XML encoding header <?xml version="1.0" encoding="utf-8"?>. Without this, Grunticon's Phantom renderer doesn't know what to do and decides to put the SVG text into the PNGs.

The fix: You need to configure svgmin with

svgmin: {
options: {
plugins: [
{
removeXMLProcInst: false
}
]
},
dist: {
...
}
}

This stops svgmin from removing the encoding header and everything works as intended.

Changelog

  • Oct 20, 2019 Split blog articles and bookmarks
Post a comment If you post a tweet with a link to this page, it will appear here as a webmention (updated daily).

Webmentions

No mentions yet.