验证 SVG

本文是 SVG 清理文章 的一部分。

SVG 可能包含许多潜在危险的内容：脚本和外部资源。

样式

全局 <style> 和内联 style 会被转换为属性。

样式会使分析图标结构的过程变得复杂，而该结构是后续移除未使用元素和解析调色板所必需的，因此应当移除样式。如果样式过于复杂无法解析，或样式覆盖了属性，则会抛出异常。

非法标签

在 清理 过程中，还会检查图标是否包含不良内容。

验证非常严格且遵循特定规范。

导致验证失败的情况（函数将抛出异常）：

• 发现 <script> 或事件监听器。
• 文本或字体。见下文。
• 任何外部资源。
• 光栅图像。见下文。
• 链接。

svg<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
 <script>
 // <![CDATA[
 window.addEventListener('DOMContentLoaded', () => {
     alert('Bad stuff!!!');
 })
 // ]]>
 </script>

 <circle cx="5" cy="5" r="4" />
</svg>

svg<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <image href="https://example.com/totally-not-a-tracker.png" height="200" width="200"/>
</svg>

被移除的标签

清理函数包含所有允许的 SVG 标签及其属性的列表。

如果遇到未知标签，将按以下方式处理：

• 如果标签属于某个命名空间（例如 <rdf:RDF>），它及其所有子元素将被移除。
• 如果标签没有命名空间，则会抛出异常。

属性

清理函数还会检查每个元素上的每个属性。

所有不影响图标渲染的属性都会被移除。

如果发现事件监听器，函数将抛出异常。

允许使用 class 属性。

内联 style 会被转换为属性（在解析其他属性之前）。

文本和字体

不允许使用任何文本标签。

为什么？因为不同操作系统使用不同的字体，这会导致图标渲染效果不一致。

此规则无法禁用。

svg<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
 <style>
   .small { font: italic 13px sans-serif; }
   .heavy { font: bold 30px sans-serif; }

   /* Note that the color of the text is set with the    *
    * fill property, the color property is for HTML only */
   .Rrrrr { font: italic 40px serif; fill: red; }
 </style>

 <text x="20" y="35" class="small">My</text>
 <text x="40" y="35" class="heavy">cat</text>
 <text x="55" y="55" class="small">is</text>
 <text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>

光栅图像

有时图标会出于各种目的使用光栅图像，通常用于遮罩或被遮罩的内容。

它们是不被允许的。为什么？

• 它们无法无损缩放，因此不再是矢量图标。
• 验证它们会增加不必要的复杂性。在 SVG 中包含无法完全验证的内容是不可接受的。

清理

验证是在 清理过程 中完成的。

这是通过 Iconify Tools 中的 cleanupSVG() 函数完成的。