How can I show all symbols in an SVG file?

Question

I have an SVG file, which looks like this:

<!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>

There are hundreds of symbols in this file.

Is there an easy way to see all symbols in the SVG file at once?

Right now I'm using HTML to see a single symbol, like this:

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

But this is way too tedious.

Answer 1

You can open file in Inkscape and choose menu Object -> Symbols (or press Ctrl+Shift+Y) an choose "Current document" in drop-down menu.

Answer 2

One file per svg file? Tedious is right!

Only slightly less tedious (but perhaps you could use a script to generate this, though):

<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>

---

UPDATE

You could even generate the above with the magic of an xslt stylesheet. :-)

<?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>