如何在SVG文件中显示所有符号？

Question

我有一个SVG文件,如下所示:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 13 13" id="icon-arrow-down">
        <path d="M12.9 4.5l-6.1 6.1c-.2.2-.6.2-.8 0L.1 4.5c-.1-.1-.1-.2 0-.3l1.8-1.8c.1-.1.2-.1.3 0l4.4 4.4L11 2.4c.1-.1.2-.1.3 0l1.8 1.8c-.1.1-.1.2-.2.3z"/>
    </symbol>
    <symbol viewBox="0 0 13 13" id="icon-arrow-down-double">
        <path d="M12 7.7l-5.1 5.1c-.2.2-.5.2-.7 0L1 7.7v-.2L2.6 6c.1-.1.2-.1.2 0l3.7 3.7L10.2 6c.1-.1.2-.1.2 0L12 7.5v.2z"/>
        <path d="M12 1.8L6.8 6.9c-.2.2-.5.2-.7 0L1 1.8v-.2L2.6 0h.2l3.7 3.7L10.2 0h.2L12 1.6v.2z"/>
    </symbol>

此文件中有数百个符号.

有没有一种简单的方法可以一次查看SVG文件中的所有符号？

现在我正在使用HTML来查看单个符号,如下所示:

<svg><use xlink:href="icons.svg#icon-nextstep-compare"></use></svg>

但这太乏味了.

Answer 1

您可以在 Inkscape 中打开文件，然后选择菜单“对象”->“符号”（或按 Ctrl+Shift+Y），然后在下拉菜单中选择“当前文档”。

Answer 2

每个 svg 文件一个文件？乏味就对了！

只是稍微不那么乏味（但也许你可以使用脚本来生成它）：

<svg>
   <use  x="50"  y="50" xlink:href="icons.svg#icon-nextstep-compare" />
   <use x="100"  y="50" xlink:href="icons.svg#icon-arrow-down" />
   <use  x="50" y="100" xlink:href="icons.svg#icon-arrow-down-double" />
   <!-- etc, etc -->
</svg>

更新

您甚至可以使用 xslt 样式表的魔力生成上述内容。:-)

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:svg="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
  <xsl:template match="/">
    <svg>
      <xsl:for-each select="//svg:symbol">
        <use>
          <xsl:attribute name="x"><xsl:value-of select="position() mod 10 * 20"/></xsl:attribute>
          <xsl:attribute name="y"><xsl:value-of select="floor(position() div 10) * 20"/></xsl:attribute>
          <xsl:attribute name="xlink:href">icons.svg#<xsl:value-of select="@id"/></xsl:attribute>
        </use>
      </xsl:for-each>
    </svg>
  </xsl:template>
</xsl:stylesheet>