SVG_FORMAT_TEMPLATES
===============VIEW_SVG_IN_WEB_PAGE=====================
===============LINE==============================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="60" y2="120"
style="stroke:rgb(0,255,0);
stroke-width:2"/>
</svg>
===============CIRCLE==============================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40"
stroke="black"
stroke-width="2"
fill="red"/>
</svg>
===============ELLIPSE==============================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="150" cy="100" rx="100" ry="60"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);
stroke-width:2"/>
</svg>
===============POLYGON==============================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!-- polygon Tag X=0 y=0 at top left -->
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;
stroke-width:1"
/>
</svg>
===============POLYGON==============================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="220,100 300,210 170,250 123,234"
style="fill:#cccccc;
stroke:#000000;
stroke-width:1"/>
</svg>
===============POLYLINE==============================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline points="10,10 10,20 20,20 20,40 40,40 40,60"
style="fill:white;
stroke:red;
stroke-width:2"/>
</svg>
===============POLYLINE==============================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon points="3,3 3,60 60,60 60,3"
style="fill:#cccccc;
stroke:#000000;
stroke-width:1"
/>
<polyline points="5,5 5,20 20,20 20,40 40,40 40,60"
style="fill:none;
stroke:red;
stroke-width:2"/>
</svg>
===============TEXT============================================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text id="TextElement" x="10" y="40"
style="font-family:Verdana;
font-size:24">
It's SVG!
</text>
</svg>
===============LINETO_PATH============================================
<?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">
<!-- path Tag = x y points define a path -->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d = "
M250 150
L150 350
L350 350
Z"
/>
<!-- d = pathData
M = moveto
L = lineto
Z = closepath
-->
</svg>
===============CURVETO_PATH============================================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="
M153 134
C224,153 202,285 156,274"
style="fill:white;
stroke:red;
stroke-width:2"
/>
<!-- d = pathData
M = moveto
C = curveto
Z = closepath
-->
</svg>
===============PATH============================================
<path> used to define a path.
The following commands are available for path data:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
Capital letters means absolutely positioned,
lower cases means relatively positioned.
===============ANIMATION============================================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0"
style="font-family:Verdana;
font-size:24">
It's SVG!
<animateMotion path= "M 0 0 L 100 100"
dur="5s"
fill="freeze"
/>
<!-- M = moveto
L = lineto
-->
</text>
</g>
</svg>
===============GRADIENT============================================
<?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 width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset= "0%"
style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset= "100%"
style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
===============OPEN_IN_EDIT_IN_INKSCAPE==========================
