title: How can I show all symbols in an SVG file?
body: <p>I have an SVG file, which looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;symbol viewBox="0 0 13 13" id="icon-arrow-down"&gt;
          &lt;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"/&gt;
      &lt;/symbol&gt;
      &lt;symbol viewBox="0 0 13 13" id="icon-arrow-down-double"&gt;
          &lt;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"/&gt;
          &lt;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"/&gt;
      &lt;/symbol&gt;
  </code></pre>
  
  <p>There are hundreds of symbols in this file.</p>
  
  <p>Is there an easy way to see all symbols in the SVG file at once?</p>
  
  <p>Right now I'm using HTML to see a single symbol, like this:</p>
  
  <pre><code>&lt;svg&gt;&lt;use xlink:href="icons.svg#icon-nextstep-compare"&gt;&lt;/use&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>But this is way too tedious.</p>