svg - 尾随的目的是什么SVG 末尾的标签？

Question

我经常从一个包含大量 SVG 文件的站点下载图标，并且它最后总是有 SVG 的踪迹：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
    <g>
        <path d="M503.839,395.379l-195.7-338.962C297.257,37.569,277.766,26.315,256,26.315c-21.765,0-41.257,11.254-52.139,30.102
            L8.162,395.378c-10.883,18.85-10.883,41.356,0,60.205c10.883,18.849,30.373,30.102,52.139,30.102h391.398
            c21.765,0,41.256-11.254,52.14-30.101C514.722,436.734,514.722,414.228,503.839,395.379z M477.861,440.586
            c-5.461,9.458-15.241,15.104-26.162,15.104H60.301c-10.922,0-20.702-5.646-26.162-15.104c-5.46-9.458-5.46-20.75,0-30.208
            L229.84,71.416c5.46-9.458,15.24-15.104,26.161-15.104c10.92,0,20.701,5.646,26.161,15.104l195.7,338.962
            C483.321,419.836,483.321,431.128,477.861,440.586z"/>
    </g>
</g>
<g>
    <g>
        <rect x="241.001" y="176.01" width="29.996" height="149.982"/>
    </g>
</g>
<g>
    <g>
        <path d="M256,355.99c-11.027,0-19.998,8.971-19.998,19.998s8.971,19.998,19.998,19.998c11.026,0,19.998-8.971,19.998-19.998
            S267.027,355.99,256,355.99z"/>
    </g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

这似乎是良性的，但是当我需要复制、粘贴和修改并知道我的标签的结束标签在哪里时，这可能会很困难。我知道标签的用途，但我不确定为什么会有这么多标签。所有这些标签的目的是什么？

标签： svg

Answer 1

需要注意的关键是 SVG 生成器并不完美。

您不仅可以从尾随元素中看到这一点，<g>还可以从观察到某些元素在元素内部双重嵌套<g>，如下所示：

<g>
  <g>
    <path />
  </g>
</g>

没有明显优势。

作为一种质量控制实践，我喜欢清理我的 SVG——尤其是为了便于未来的易读性和编辑。

因此，面对上面的 SVG，我将其编辑为以下内容：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     lang="en-US"
     viewBox="0 0 512.001 512.001">

<title>My SVG</title>

<path d="M503.839,395.379l 195.7-338.962C297.257,37.569,277.766,26.315,256,26.315c-21.765,0-41.257,11.254-52.139,30.102 L8.162,395.378c-10.883,18.85-10.883,41.356,0,60.205c10.883,18.849,30.373,30.102,52.139,30.102h391.398 c21.765,0,41.256-11.254,52.14-30.101C514.722,436.734,514.722,414.228,503.839,395.379z M477.861,440.586 c-5.461,9.458-15.241,15.104-26.162,15.104H60.301c-10.922,0-20.702-5.646-26.162-15.104c-5.46-9.458-5.46-20.75,0-30.208 L229.84,71.416c5.46-9.458,15.24-15.104,26.161-15.104c10.92,0,20.701,5.646,26.161,15.104l195.7,338.962 C483.321,419.836,483.321,431.128,477.861,440.586z" />
<rect x="241.001" y="176.01" width="29.996" height="149.982" />
<path d="M256,355.99c 11.027,0-19.998,8.971-19.998,19.998s8.971,19.998,19.998,19.998c11.026,0,19.998-8.971,19.998-19.998 S267.027,355.99,256,355.99z" />

</svg>