title: Can I have Multiple SVG images in a single file?
body: <p>Instead of doing the following:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;embed src="circle.svg" type="image/svg+xml" /&gt; 
    &lt;embed src="square.svg" type="image/svg+xml" /&gt; 
    &lt;embed src="triangle.svg" type="image/svg+xml" /&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would prever to do something like this</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;embed src="shapes.svg" type="image/svg+xml" id="circle" /&gt; 
  &lt;embed src="shapes.svg" type="image/svg+xml" id="square" /&gt; 
  &lt;embed src="shapes.svg" type="image/svg+xml" id="triangle" /&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>with a svg file that may look something like this</p>
  
  <pre><code>&lt;?xml version="1.0" standalone="no"?&gt;
  &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" version="1.1" &gt;
  
    &lt;svg id="circle"&gt;
      &lt;circle cx="100" cy="50" r="40" stroke="black"
      stroke-width="2" fill="red" /&gt;
    &lt;/svg&gt; 
  
    &lt;svg id="square"&gt;
      &lt;rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /&gt;
    &lt;/svg&gt;
  
    &lt;svg id="triangle"&gt;
      &lt;line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" /&gt;
      &lt;line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" /&gt;
      &lt;line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" /&gt;
    &lt;/svg&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>It seems as an SVG is just XML I should be able to store all my images in a single file that downloades a single time and is used throughout the site.</p>