Search code examples
svgwebpackloaderwebpack-pluginsvgo

How to parse svgs with unquoted attributes in `svgo`?

When parsing using svgo or as part of webpack loader (svgo-loader) or plugin (imagemin) that both use svgo, if you have svgs with unquoted attributes such as:

xmlns="http://www.w3.org/2000/svg" width=20px height=20px

The error: Error in parsing SVG: Unquoted attribute value is emitted.

Can svg's with unquoted attributes be used in all of these?

Solution

  • I've created a loader to canonize xmls (including svgs) in webpack:

    xml-fix-loader

    {
  test: /\.svg$/,
  use: [
    { loader: 'file-loader' },
    { loader: 'svgo-loader' },
    { loader: 'xml-fix-loader' }
  ]
}

    what it does in general is to use xml2js to parse the xml unstrictly and then stringify it back to get a cononized xml (or svg).

    This removes issues like unquoted attributes. so:

    xmlns="http://www.w3.org/2000/svg" width=20px height=20px

    becomes

    xmlns="http://www.w3.org/2000/svg" width="20px" height="20px"