Can I have Multiple SVG images in a single file? - css

Instead of doing the following:
<html>
<body>
<embed src="circle.svg" type="image/svg+xml" />
<embed src="square.svg" type="image/svg+xml" />
<embed src="triangle.svg" type="image/svg+xml" />
</body>
</html>
I would prever to do something like this
<html>
<body>
<embed src="shapes.svg" type="image/svg+xml" id="circle" />
<embed src="shapes.svg" type="image/svg+xml" id="square" />
<embed src="shapes.svg" type="image/svg+xml" id="triangle" />
</body>
</html>
with a svg file that may look something like this
<?xml version="1.0" standalone="no"?>
<!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" version="1.1" >
<svg id="circle">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
<svg id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
<svg id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</svg>
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.


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
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(0,0)">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</g>
<g transform="translate(0,200)">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0,400)">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="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>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px; height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
<embed src="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.


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 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" version="1.1">
<svg id="circle">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
<svg id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
<svg id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</svg>


Reference:
<svg alt="">
<use xlink:href="shapes.svg#circle"></use>
</svg>
<svg alt="">
<use xlink:href="shapes.svg#square"></use>
</svg>
<svg alt="">
<use xlink:href="shapes.svg#triangle"></use>
</svg>
shapes.svg:
<?xml version="1.0" encoding="UTF-8" ?>
<!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 id="circle">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</symbol>
<symbol id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</symbol>
<symbol id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</symbol>
</svg>

Related

SVG fill up path element

How can i animated fill up a path element with color in a SVG ? In the lower area I added a rect element, that worked fine. But how can i fill up the rest (the head) ?
The SVG looks like this
And here is my SVG code
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110.6 225.5" style="enable-background:new 0 0 110.6 225.5" xml:space="preserve">
<style type="text/css">
.st2{
fill:#FEC400;
}
}
</style>
<g>
<g>
<g>
<!-- mouth -->
<path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
</g>
<g>
<!-- eye -->
<circle cx="78.3" cy="60.5" r="6.5"/>
</g>
<g>
<!-- eye -->
<circle cx="38.2" cy="60.5" r="6.5"/>
</g>
<g>
<!-- lower -->
<rect class="st2" x="5" y="220" width="24" height="90">
<animate attributeName="y" values="220 ; 100" dur="2.5s"/>
<animate attributeName="height" values="90 ; 120" dur="2.5s"/>
</rect>
</g>
<g>
<!-- figure, needs to fill up with color -->
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
</g>
</g>
</g>
</svg>

It works with a mask:
<svg width="200" height="190">
<g transform="translate(0,-35)">
<mask id="shape-mask">
<rect x="0" y="0" width="200" height="230" fill="black" />
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z" fill="white" />
</mask>
<rect y="230" width="200" height="0" fill="orange" mask="url(#shape-mask)">
<animate attributeName="y" values="230 ; 0" dur="2.5s"/>
<animate attributeName="height" values="0 ; 230" dur="2.5s"/>
</rect>
<path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
<circle cx="78.3" cy="60.5" r="6.5"/>
<circle cx="38.2" cy="60.5" r="6.5"/>
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
</g>
</svg>

SVG center horizontal and vertical line

How can I create an SVG containing two lines (one horizontal, one vertical) going from the middle from one side to the middle of the opposite side, thus making a plus sign the same size as the SVG container?
This is what I have now but when changing SVG size the line lengths will not change
<svg width="10px" height="10px">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

For an SVG's contents to scale with its size, it needs to have a viewBox.
svg {
background-color: linen;
}
.point {
stroke: black;
stroke-width: 1;
}
<svg width="10px" height="10px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
<svg width="30px" height="30px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
<svg width="100px" height="100px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
In this example, everything scales, including the line width. If that's not what you want, then you can either use #SirExotic's approach (using percentage coordinates), or you could set the lines to not scale by using vector-effect: non-scaling-stroke.
svg {
background-color: linen;
}
.point {
stroke: black;
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
<svg width="10px" height="10px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
<svg width="30px" height="30px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>
<svg width="100px" height="100px" viewBox="0 0 10 10">
<line class="point" x1="0" x2="10" y1="5" y2="5" />
<line class="point" x1="5" x2="5" y1="0" y2="10" />
</svg>

The container in this example is the body, but you can always wrap it in another container and set your desired height and width.
body,
html {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
<svg height="100%" width="100%">
<line x1="50%" y1="0" x2="50%" y2="100%" style="stroke:blue;stroke-width:1" />
<line x1="0" y1="50%" x2="100%" y2="50%" style="stroke:blue;stroke-width:1" />
</svg>

SVG stroke-linecap at one end only

Is it possible to add a linecap to only one end of a stroke? Not both ends as is the default shown in the sample below.
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line stroke-linecap="butt"
x1="30" y1="30" x2="30" y2="90"
stroke="teal" stroke-width="20"/>
<line stroke-linecap="round"
x1="60" y1="30" x2="60" y2="90"
stroke="teal" stroke-width="20"/>
<path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
stroke="white" />
</svg>

You could do this with two lines, one on top of the other.
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line stroke-linecap="butt"
x1="30" y1="30" x2="30" y2="90"
stroke="teal" stroke-width="20"/>
<line stroke-linecap="round"
x1="60" y1="30" x2="60" y2="70"
stroke="teal" stroke-width="20"/>
<line stroke-linecap="butt"
x1="60" y1="40" x2="60" y2="90"
stroke="teal" stroke-width="20"/>
<path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
stroke="white" />
</svg>

Another flexible solution using a single line and markers/marker-ends as suggested by Paulie_D:
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="round" viewBox="-1 -1 2 2" markerWidth="1" orient="auto">
<circle r="1" fill="teal"/>
</marker>
</defs>
<line x1="30" y1="90" x2="30" y2="30"
stroke="teal" stroke-width="20" marker-end="url(#round)"/>
<line stroke-linecap="round"
x1="60" y1="30" x2="60" y2="90"
stroke="teal" stroke-width="20"/>
<line x1="90" y1="30" x2="90" y2="90"
stroke="teal" stroke-width="20" marker-end="url(#round)"/>
<path d="M30,30 L30,90 M60,30 L60,90 M90,30 L90,90"
stroke="white"/>
</svg>

Make a portion of a transparent svg opaque [duplicate]

I have a jsfiddle here - http://jsfiddle.net/apbuc773/
I'd like to create a star using svg.
I'd like to stroke the outside of the star. In my example the stroke is on every line which dissects the inner shape.
Also is it possible to half fill the star shape.
I'd like to use this for a star rating but I need half and maybe quarter fills.
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:blue;"/>
</svg>

You can alternatively do this with a filter. Here is one that animates the fill:
<svg height="210" width="500">
<defs>
<filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
<feOffset dy="0.5">
<animate attributeName="dy" from="1" to=".5" dur="3s" />
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" />
</filter>
</defs>
<polygon filter="url(#fillpartial)" points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,
203.042, 152.639,
176.756, 148.820,
165.000, 125.000,
153.244, 148.820,
126.958, 152.639,
145.979, 171.180,
141.489, 197.361,
165.000, 185.000" style="fill:white;stroke:red;" />
</svg>

Here is a example: http://jsfiddle.net/apbuc773/11/
Gradient can be used like this:
<svg height="210" width="500">
<defs>
<linearGradient id="half">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="red" />
<stop offset="50%" stop-color="white" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
<g fill="url(#half)" stroke="blue" stroke-width="2">
If you don't want to change your polygon points, just apply this polygon twice: one time with stroke and one time without.

I've noticed the comment of the accepted answer, and here is how you fill an custom shape:
<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="heart">
<path d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923 C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379 C99.387,33.883,93.598,19.539,81.495,13.923z"/>
</clipPath>
</defs>
<rect x="0" y="0" fill="rgb(217,217,217)" width="100%" height="100%" clip-path="url(#heart)" />
<rect x="0" y="50%" fill="red" width="100%" height="100%" clip-path="url(#heart)" />
</svg>

Whole figure mouseover effect

When I mouseover on grey rectangle I'm scale him
<defs>
<g id="rectangl">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
fill="freeze"/>
</g>
I'm try to add some figures like this:
<defs>
<g id="rectangl">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />
**<line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05" stroke-linecap="round"/>
<circle cx="0.5" cy="0.0" r="0.05" stroke-width="0" /><!-- dot -->
<circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" />**
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
fill="freeze"/>
</g>
After that mouse over on any of this figures - line, circle, rect - startanimation again while i'm staying into grey rectangle.
I need to scale up(+15%) while i'm mouse over on whole figure (id="rectangl") and scale down(-15%) only when I'm mouse out from whole figure.
My similar theme SVG Carefully scale hover-kind effect using animateTransform
Thank you for understanding
Text to open in html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/adobesvgviewerextensions/3.0/"
x="0px" y="0px" width="800" height="600" viewBox="-400 -300 800 600" xml:space="preserve" font-family="arial" font-size="14">
<defs>
<g id="dscn.n" cursor="pointer">
<g id="rectangl">
<rect x="-0.5" y="-0.5" width="1" height="1" fill="grey" stroke-width="0.0" />
<line x1="-0.5" y1="-0.5" x2="-0.5" y2="0.5" stroke-width="0.05" stroke-linecap="round"/><!-- left vertical -->
<circle cx="0.5" cy="0.0" r="0.05" stroke-width="0" /><!-- dot -->
<circle cx="-0.5" cy="0.0" r="0.05" fill="white" stroke-width="0.01" />
<line x1="0.5" y1="0" x2="-0.15" y2="-0.5" stroke-width="0.05" stroke-linecap="round" /><!-- off -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mouseover" dur = "0.2s"
fill="freeze"/>
</g>
</g>
</defs>
<g transform="translate(-200,-200)" >
<title>dscn.n</title>
<g transform="scale(100,100)" fill="green" stroke="green" stroke-width="0.05" >
<use xlink:href="#dscn.n" />
</g>
</g>
</svg>
</body>

Add pointer-events="none" to the line and circle elements.

Resources