This question already has answers here:
Closing SVG tags, explicit or self closing?
(2 answers)
Closed 5 years ago.
The reason why I asked was because, everyone does it like this.
></path>
All the tutorials show /> without the </path>
Spotify:
<svg class="icon-play" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path></svg>
Google:
<svg width="100" height="100" style="background-color:pink;" viewBox="0 0 24 24">
<path fill="currentColor" style="fill:green;" d="M7.995,18.9899999 13.68046871,15.4912499 13.68046871,8.49374997 7.995,4.995 Z M13.6804687,15.4912499 19.3659374,11.99249994 19.3659374,11.99249994 13.6804687,8.49374997 Z"></path>
</svg>
Twitter:
<svg style="fill: currentcolor;color: #1DA1F2;" width="67" height="67" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<path fill="white" d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path fill="green" d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" ></path>
</svg>
YouTube:
<svg width="100" height="100" version="1.1" style="background-color:black;" viewBox="0 0 36 36">
<path fill="currentColor" style="fill:#0059dd; "d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>
Neither is correct, and neither is incorrect. Both ways are valid. Use whichever you prefer.
Obviously if the path has child elements (eg. <title> or <animate> then you need to use the closing tag. But otherwise, it doesn't matter.
Related
why this svg does not fill the screen?
i just open "and_gate.svg" (svg below) with last version of firefox/chrome. it doesn't fill height of the screen. (I wrote height because this svg's width:26 height:32.)
<svg viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 19 A 13 13 0 0 1 26 19 v 19 h -26 v -19 Z" fill="#000" />
</svg>
however if a svg that width:26 height:32 fills entire height of the screen. (svg below)
<svg viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="26" height="32" fill="#000" />
</svg>
If you combine the two it is clear your path leaves white.. ehm green space
The A(rc) goes from y=19 to y=13 , not to y=0 (top)
<svg viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="26" height="32" fill="green" />
<path d="M 0 19 A 13 13 0 0 1 26 19 v 19 h -26 v -19 Z" fill="#000" />
</svg>
I have lines with arrow head at the end. when the lines point up, right, and down, auto is working to orient the arrow head correctly. When the line goes from right to left, the arrow head ends by pointing right instead of left.
Can anyone see why that is? thanks
<marker id="markerArrow" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" /></marker></defs>
You correctly noticed that the direction of the marker depends on the direction of drawing the line.
Your marker is drawn with the tip to the right.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<!--<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs> -->
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</svg>
The marker can be attached to the beginning of the line - marker-start and to the end of the line -marker-end
The line is drawn from the left M10,100 to the rightL190.100
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs>
<path d="M10,50 L190,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerStart)" />
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;"/>
</svg>
Now draw a line in the opposite direction from right to left
<path d="M190,100 L10,100" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs>
<path d="M190,50 L10,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerStart)" />
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;"/>
</svg>
There are two ways to solve this problem:
Draw and define in the section two markers that are directed in different directions and use them depending on the direction of the line
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="0">
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</marker>
<marker id="markerEnd" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs>
<path d="M10,100 L190,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerEnd)" />
<!-- Marker Start -->
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</svg>
Rotate one of the markers 180 degrees orient ="180"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
<marker id="markerEnd" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="180">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: red;" />
</marker>
</defs>
<path d="M10,100 L190,100" stroke="black" marker-start="url(#markerEnd)" marker-end="url(#markerStart)" />
</svg>
Update
Marker-mid
Used only on kinks of the line. On a completely straight line it will not be visible
In the example below, marker-mid ="url(#markerRight) is red
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerRight" viewBox="0 0 12 12" refX="6" refY="6"
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</marker>
<marker id="markerLeft" viewBox="0 0 12 12" refX="6" refY="6"
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs>
<path fill="none" d="M10,100 50,50 100,150 180,50 190,150" stroke="black" marker-start="url(#markerLeft)" marker-mid="url(#markerRight)" marker-end="url(#markerLeft)" />
</svg>
Can someone please tell me, why the left arrow head in the following file shows correctly in the generated PNG, but not in the browser?
https://commons.wikimedia.org/wiki/File:SVG_double_arrow_with_marker-start_and_marker-end.svg
In Firefox it is just not there, and in Chrome I see it pointing to the bottom right instead of left.
These are the two markers:
<marker id="arrowend" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
<path d="M 0 0 C 0 0, 3 5, 0 10 L 0 10 L 13 5" fill="red"/>
</marker>
<marker id="arrowstart" viewBox="0 0 -13 -10" refX="-2" refY="-5" markerWidth="-3.5" markerHeight="-3.5" orient="auto">
<path d="M 0 0 C 0 0, -3 -5, 0 -10 L 0 -10 L -13 -5" fill="red"/>
</marker>
My solution based on the hint below:
<marker id="arrowstart" viewBox="0 0 13 10" refX="11" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
<path d="M 13 0 C 13 0, 10 5, 13 10 L 13 10 L 0 5" fill="red"/>
</marker>
So I changed the actual path. All my attempts to just mirror it failed, so for me this was the best solution.
This is where I put it in action, BTW: https://commons.wikimedia.org/wiki/Category:Full_octahedral_group;_single_elements;_signed_perm_mat,_perm_mat_and_cube
A viewBox with negative width and height is invalid. The contents of invalid viewBoxes do not render.
If Chrome renders arrowstart in any way, that's a Chrome bug. Whatever png generator you're using is clearly also buggy.
Here's one way to get the arrows on both ends, at least on browsers that support orient="auto-start-reverse"
<svg width="500" height="300" viewBox="0 0 200 50">
<defs>
<marker id="arrow" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto-start-reverse">
<path d="M 0 0 C 0 0, 3 5, 0 10 L 0 10 L 13 5" fill="red"/>
</marker>
</defs>
<line x1="25" y1="25" x2="175" y2="25" stroke="red" stroke-width="5" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
</svg>
I'm trying to make an svg animation for a path. The start result and the end result are fine, but for some reasons there are no intermediate positions (the animation just jumps from start to end after the duration.
This is the code I'm using:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:10px;}</style></defs><title>percentage-green</title>
<path
id="p1"
class="cls-1"
d="
M 20 40 A 20 20 0 1 0 40 20
"
/>
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
from="M 20 40 A 20 20 0 1 0 40 20"
to="M 50 57.32050807568877 A 20 20 0 0 0 40 20"
dur="10s"
/>
</svg>
If I understand you correctly, despite the difficulties you want to do an arc animation.
Arc formula
<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />
Large-arc-flag and sweep-flag are integer-constant, which take only two values of "0" or "1" and do not lend themselves to smooth animation.
You can make a discrete transition animation from a large arc when Large-arc-flag = 1 to a small arcLarge-arc-flag = 0
On the example below the location of the small arc is indicated by a red dashed line.
The coordinates of the beginning and end of the small and large arcs coincide, only the value of the flag `Large-arc-flag from" 1 "to" 0 "
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
</style>
</defs>
<title>percentage-green</title>
<g transform="scale(2)">
<path id="p1"
class="cls-1"
d="M 20 40 A 20 20 0 1 0 40 20">
<animate
attributeName="d"
attributeType="XML"
repeatCount="5"
begin="Layer_1.mouseover"
from="M 20 40 A 20 20 0 1 0 40 20"
to="M 20 40 A 20 20 0 0 0 40 20"
dur="2s" >
</animate>
</path>
<circle cx="40" cy="20" r="3" stroke="dodgerblue" fill="none" />
<path d="M 20 40 A 20 20 0 0 0 40 20" stroke-dasharray="3" stroke="red" fill="none" />
</g>
</svg>
Animation begins when you hover the cursor
The second example
Is similar to yours - the parameter "d" of the patch will change smoothly, with the constant value of large-arc-flag = 1 (large arc)
Animation begins when you hover the cursor
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
</style>
</defs>
<title>percentage-green</title>
<g transform="scale(2)">
<path id="p1"
class="cls-1"
d="M 20 40 A 20 20 0 1 0 40 20">
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
repeatCount="5"
values="M 20 40 A 20 20 0 1 0 40 20;M 50 57 A 20 20 0 1 0 40 20;M 20 40 A 20 20 0 1 0 40 20"
begin="Layer_1.mouseover"
dur="3s"
restart="whenNotActive" >
</animate>
</path>
<circle cx="40" cy="20" r="4" stroke="dodgerblue" fill="none" />
<path d="M 50 57 A 20 20 0 1 0 40 20" stroke-dasharray="3" stroke="red" fill="none" />
</g>
</svg>
Can I just finish a path where I started it and it will be considered closed or does the Z command have to be used?
For example, is this
path d="M150 0 L75 200 L225 200 L150 0" stroke="black" fill="none"
the same as this
path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="none"
or are there two points on same spot (150, 0) in the first and the second example?
There is a slight difference. If a path isn't closed, then you are liable to see missing pixels at the corner where the two ends of the path meet. Here's an example:
<svg width="360" height="100" viewBox="0 0 360 100">
<g stroke-width="20" fill="none">
<path d="m10 10h80v80h-80v-80" stroke="#f00" stroke-linecap="butt" />
<path d="m130 10h80v80h-80v-80" stroke="#0a0" stroke-linecap="square" />
<path d="m250 10h80v80h-80z" stroke="#04f" />
</g>
</svg>
The path on the left is open, and since the two vertices at the top left are unconnected, you can see a gap where the two line caps overlap. This can be fixed by adding stroke-linecap="square" to the svg markup, but in most situations it would make more sense to use a closed path, as shown on the right.
Edit:
For curved shapes where you don't want a straight-line segment between the start and end points of the path, just put the start and end points in the same place. If your tangents are aligned in the same direction, it probably doesn't matter if you leave leave the path open unless you have the stroke-linecap set to butt, in which case the end sections will be liable to project away from the path slightly. For example:
<svg width="160" height="160" viewBox="-80 -80 160 160">
<path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70" fill="#fcc" stroke="#f00" stroke-width="20" stroke-linecap="square"/>
</svg>
<svg width="160" height="160" viewBox="-80 -80 160 160">
<path d="M0 70C20 70 0 40 20 20 40 0 70 20 70 0 70-20 40 0 20-20 0-40 20-70 0-70-20-70 0-40-20-20-40 0-70-20-70 0-70 20-40 0-20 20 0 40-20 70 0 70z" fill="#afa" stroke="#0a0" stroke-width="20" stroke-linecap="square"/>
</svg>
If you look closely, you can see some slight blockiness at the bottom of the red shape where the line caps extend past each other. The green shape has a closed curve, so there are no line caps to worry about.
■ Addendum:
Just landed back on this page after a few days, and it looks like Chrome has been updated in the meantime (currently using Chrome version 53.0.2785.116/64 bit on OS X). It now seems that open paths are closed automatically if the start and end points are coincident within a small margin of error.
Here's that first graphic again, but with three open paths where the start and end points are separated by 0.1px, 0.001px and 0.00001px respectively (from left to right):
<svg width="360" height="100" viewBox="0 0 360 100">
<g stroke-width="20" fill="none">
<path d="m10 10h80v80h-80v-79.99" stroke="#f00" stroke-linecap="butt" />
<path d="m130 10h80v80h-80v-79.9999" stroke="#0a0" stroke-linecap="butt" />
<path d="m250 10h80v80h-80v-79.999999" stroke="#04f" stroke-linecap="butt" />
</g>
</svg>
I'm not sure I agree with this behaviour. It's liable to cause glitchiness with animated paths:
<svg width="120" height="120" viewBox="0 0 120 120">
<path id="p" d="M10 10 110 10 110 110 10 110 10 10" stroke="#f00" fill="none" stroke-width="20" />
<animate xlink:href="#p" attributeName="d" attributeType="XML" from="M9.99999 9.99999 110 10 110 110 10 110 10 10" to="M10.00001 10.00001 110 10 110 110 10 110 10 10" dur="1s" fill="freeze" repeatCount="indefinite" />
</svg>
Adding Z command at the end of path or adding the starting point at the end of the path is essentially doing the same thing.And it does not add an extra point on the same spot.It just joins the points.