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

Question

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?

Answer 1

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"