How to show all characters in an SVG file?

I have an SVG file that 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 characters in this file.

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

Right now I'm using HTML to see a single character, for example:

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

But this is too tiring.

+4
source share
2 answers

One file per svg file? Difficult right!

Just a little less tedious (but maybe you could use a script to create this):

<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 can even create the above using the xslt style sheet magic. :-)

<?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>
+2
source

You can open the file in Inkscape and select the menu Object → Symbols (or press Ctrl + Shift + Y), select "Current Document" in the drop-down menu.

0

All Articles