如何解析 `svgo` 中不带引号的属性的 svg？

Question

当使用 svgo or as part of webpack loader (svgo-loader) or plugin (imagemin) 解析时，两者都使用 svgo，如果您的 svg 具有未加引号的属性，例如：

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

错误：发出 Error in parsing SVG: Unquoted attribute value。

是否可以在所有这些中使用具有不带引号的属性的 svg？

Answer 1

我已经创建了一个加载器来规范 webpack 中的 xmls（包括 svgs）：

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

它通常做的是使用 xml2js 不严格地解析 xml，然后将其字符串化以得到一个统一的 xml（或 svg）。

这消除了未加引号的属性等问题。所以：

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

变成

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

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