Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Svg

Can I Have Multiple Svg Images In A Single File?

Post a Comment
Instead of doing the following:

Solution 1:

Yes, but XML documents need a single root node. Yours has three. Try wrapping the three nodes in an svg element and move the namespace and version number to it. Seems to validate via http://validator.w3.org/check

<?xml version="1.0" standalone="no"?><!DOCTYPE svgPUBLIC"-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgxmlns="http://www.w3.org/2000/svg"version="1.1"><svgid="circle"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red" /></svg><svgid="square"><rectwidth="100"height="100"style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /></svg><svgid="triangle"><linex1="50"y1="0"x2="0"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /><linex1="50"y1="0"x2="100"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /><linex1="0"y1="50"x2="100"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /></svg></svg>

Solution 2:

You can only have a single root node in an html document. Nevertheless there are various ways to achieve what you want.

One way is SVG Stacks which works by having all the drawings on top of each other and then just displaying the one you want to see using CSS.

Another way might be to have a shapes.svg like this with all the drawings in different places

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"><gtransform="translate(0,0)"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red" /></g><gtransform="translate(0,200)"><rectwidth="100"height="100"style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /></g><gtransform="translate(0,400)"><linex1="50"y1="0"x2="0"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /><linex1="50"y1="0"x2="100"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /><linex1="0"y1="50"x2="100"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /></g></svg>

And then use svgView to show just the bits you want.

<html><body><embedsrc="shapes.svg#svgView(viewBox(50,0,100,100))"style="width:100px;        height:100px"type="image/svg+xml" /><embedsrc="shapes.svg#svgView(viewBox(0,200,100,100))"style="width:100px;height:100px"type="image/svg+xml"/><embedsrc="shapes.svg#svgView(viewBox(0,400,100,100))"style="width:100px;height:100px"type="image/svg+xml"/></body></html>

All of these do mean though that you use more memory in the UA as the whole svg file is loaded 3 times and you just see a part of it each time.

Solution 3:

Reference:

<svgalt=""><usexlink:href="shapes.svg#circle"></use></svg><svgalt=""><usexlink:href="shapes.svg#square"></use></svg><svgalt=""><usexlink:href="shapes.svg#triangle"></use></svg>

shapes.svg:

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE svgPUBLIC"-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><symbolid="circle"><circlecx="100"cy="50"r="40"stroke="black"stroke-width="2"fill="red" /></symbol><symbolid="square"><rectwidth="100"height="100"style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /></symbol><symbolid="triangle"><linex1="50"y1="0"x2="0"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /><linex1="50"y1="0"x2="100"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /><linex1="0"y1="50"x2="100"y2="50"style="stroke:rgb(255,0,0);stroke-width:2" /></symbol></svg>

You may like these posts

Post a Comment for "Can I Have Multiple Svg Images In A Single File?"