Note that there are some explanatory texts on larger screens.

plurals
  1. POCan I have Multiple SVG images in a single file?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload