11

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.

honk
  • 9,137
  • 11
  • 75
  • 83
Bernie
  • 1,607
  • 1
  • 18
  • 30

3 Answers3

6

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

ANAT01
  • 61
  • 1
  • 1
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>
AJNeufeld
  • 8,526
  • 1
  • 25
  • 44
  • 1
    It looks like Inkscape may have what you are looking for: See [Symbol Dialog](http://wiki.inkscape.org/wiki/index.php/SymbolsDialog) – AJNeufeld Apr 15 '16 at 16:07
0

This is not so elegant, but quick and useable. Make a html file:

<!DOCTYPE html><html><body>

<!-- copy here the content of svg -->   
<svg id="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16" id="alarm" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 5.5a.5.5 0 00-1 0v3.362l-1.429 2.38a.5.5 0 10.858.515l1.5-2.5A.5.5 0 008.5 9V5.5z"/><path d="M6.5 0a.5.5 0 000 1H7v1.07a7.001 7.001 0 00-3.273 12.474l-.602.602a.5.5 0 00.707.708l.746-.746A6.97 6.97 0 008 16a6.97 6.97 0 003.422-.892l.746.746a.5.5 0 00.707-.708l-.601-.602A7.001 7.001 0 009 2.07V1h.5a.5.5 0 000-1h-3zm1.038 3.018a6.093 6.093 0 01.924 0 6 6 0 11-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 014.387 1.86 2.5 2.5 0 000 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 013.527 3.527A2.5 2.5 0 0013.5 1z"/></symbol><symbol fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16" id="alarm-fill" xmlns="http://www.w3.org/2000/svg"><path d="M6 .5a.5.5 0 01.5-.5h3a.5.5 0 010 1H9v1.07a7.001 7.001 0 013.274 12.474l.601.602a.5.5 0 01-.707.708l-.746-.746A6.97 6.97 0 018 16a6.97 6.97 0 01-3.422-.892l-.746.746a.5.5 0 01-.707-.708l.602-.602A7.001 7.001 0 017 2.07V1h-.5A.5.5 0 016 .5zm2.5 5a.5.5 0 00-1 0v3.362l-1.429 2.38a.5.5 0 10.858.515l1.5-2.5A.5.5 0 008.5 9V5.5zM.86 5.387A2.5 2.5 0 114.387 1.86 8.035 8.035 0 00.86 5.387zM11.613 1.86a2.5 2.5 0 113.527 3.527 8.035 8.035 0 00-3.527-3.527z"/></symbol><symbol fill="currentColor" class="bi bi-align-bottom" viewBox="0 0 16 16" id="align-bottom" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="12" x="6" y="1" rx="1"/><path d="M1.5 14a.5.5 0 000 1v-1zm13 1a.5.5 0 000-1v1zm-13 0h13v-1h-13v1z"/></symbol><symbol fill="currentColor" class="bi bi-align-center" viewBox="0 0 16 16" id="align-center" xmlns="http://www.w3.org/2000/svg"><path d="M8 1a.5.5 0 01.5.5V6h-1V1.5A.5.5 0 018 1zm0 14a.5.5 0 01-.5-.5V10h1v4.5a.5.5 0 01-.5.5zM2 7a1 1 0 011-1h10a1 1 0 011 1v2a1 1 0 01-1 1H3a1 1 0 01-1-1V7z"/></symbol><symbol fill="currentColor" class="bi bi-align-end" viewBox="0 0 16 16" id="align-end" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.5 1a.5.5 0 00-.5.5v13a.5.5 0 001 0v-13a.5.5 0 00-.5-.5z"/><path d="M13 7a1 1 0 00-1-1H2a1 1 0 00-1 1v2a1 1 0 001 1h10a1 1 0 001-1V7z"/></symbol><symbol fill="currentColor" class="bi bi-align-middle" viewBox="0 0 16 16" id="align-middle" xmlns="http://www.w3.org/2000/svg"><path d="M6 13a1 1 0 001 1h2a1 1 0 001-1V3a1 1 0 00-1-1H7a1 1 0 00-1 1v10zM1 8a.5.5 0 00.5.5H6v-1H1.5A.5.5 0 001 8zm14 0a.5.5 0 01-.5.5H10v-1h4.5a.5.5 0 01.5.5z"/></symbol></svg>
<!-- copy here the content of svg -->

<br />
<script type="text/javascript">
 const icons=document.getElementById("icons").getElementsByTagName('symbol');
 for(const icon of icons){
  document.write( '<svg>'+
                                        '<use  xlink:href="bootstrap-icons.svg#'+icon.id+'"  color="red" />' +
                                        '<text x="0" y="13">'+icon.id+'<text>' +
                                        
                  '</svg>');
}
</script>

</body>
</html>
  1. Copy the content of svg to the marked place (only the svg), and give it id="icons".
  2. Put the svg file next to the html, in this example there is a part of bootstrap-icons.svg
  3. The icon color is red, because the text is black, just for black is visible on red, it may cause problems with color icons.
  4. Open html in a browser.
Sándor Krisztián
  • 570
  • 6
  • 9