svg - 如何在`svgo`中解析具有未引用属性的svgs？

Question

当使用svgo或作为 webpack 加载器 ( svgo-loader ) 或插件 ( 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）：

xml 修复加载器

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

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

这消除了诸如未引用属性之类的问题。所以：

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

变成

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