Basic Examples
| Primitive | Code | Show |
|---|---|---|
| Images | ||
|
image
xlink:href, x, y, width, height
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <image xlink:href="Venus_de_Milo_Louvre.jpg" x="110" y="1" width="80" height="198" /> </svg> |
|
| Text | ||
|
text
x, y
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="60" y="150">Hello World</text> </svg> |
|
|
stroke, stroke-width, fill (text)
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="110" y="30">Simplest Text</text> <text x="110" y="70" stroke="black">Outlined/filled</text> <text x="110" y="110" stroke="black" stroke-width="0.5" fill="none">Outlined only</text> </svg> |
|
|
color stroke (text)
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="210px"> <text x="110" y="30" font-size="1.1em" stroke="red">stroke="red"</text> <text x="110" y="60" font-size="1.1em" stroke="orange">stroke="orange"</text> <text x="110" y="90" font-size="1.1em" stroke="yellow">stroke="yellow"</text> <text x="110" y="120" font-size="1.1em" stroke="green">stroke="green"</text> <text x="110" y="150" font-size="1.1em" stroke="blue">stroke="blue"</text> <text x="110" y="180" font-size="1.1em" stroke="darkblue">stroke="darkblue"</text> <text x="110" y="210" font-size="1.1em" stroke="violet">stroke="violet"</text> </svg> |
|
|
color fill (text)
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="210px"> <text x="110" y="30" font-size="1.1em" fill="red">fill="red"</text> <text x="110" y="60" font-size="1.1em" fill="orange">fill="orange"</text> <text x="110" y="90" font-size="1.1em" fill="yellow">fill="yellow"</text> <text x="110" y="120" font-size="1.1em" fill="green">fill="green"</text> <text x="110" y="150" font-size="1.1em" fill="blue">fill="blue"</text> <text x="110" y="180" font-size="1.1em" fill="darkblue">fill="darkblue"</text> <text x="110" y="210" font-size="1.1em" fill="violet">fill="violet"</text> </svg> |
|
|
font-size
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="500px"> <text x="60" y="30">no font-size</text> <text x="60" y="60" font-size="10">font-size="10"</text> <text x="60" y="90" font-size="12">font-size="12"</text> <text x="60" y="120" font-size="14">font-size="14"</text> <text x="60" y="150" font-size="10pt">font-size="10pt"</text> <text x="60" y="180" font-size="12pt">font-size="12pt"</text> <text x="60" y="210" font-size="14pt">font-size="14pt"</text> <text x="60" y="240" font-size="10px">font-size="10px"</text> <text x="60" y="270" font-size="12px">font-size="12px"</text> <text x="60" y="300" font-size="14px">font-size="14px"</text> <text x="60" y="330" font-size="0.8em">font-size="0.8em"</text> <text x="60" y="360" font-size="1em">font-size="1em"</text> <text x="60" y="390" font-size="1.2em">font-size="1.2em"</text> <text x="60" y="420" font-size="80%">font-size="80%"</text> <text x="60" y="450" font-size="100%">font-size="100%"</text> <text x="60" y="480" font-size="120%">font-size="120%"</text> </svg> |
|
|
font-weight
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <text x="60" y="20" font-size="1.1em">normal</text> <text x="60" y="40" font-size="1.1em" font-weight="normal">font-weight="normal"</text> <text x="60" y="60" font-size="1.1em" font-weight="bold">font-weight="bold"</text> <text x="60" y="80" font-size="1.1em" font-weight="bolder">font-weight="bolder"</text> <text x="60" y="100" font-size="1.1em" font-weight="lighter">font-weight="lighter"</text> <text x="60" y="120" font-size="1.1em" font-weight="100">font-weight="100"</text> <text x="60" y="140" font-size="1.1em" font-weight="200">font-weight="200"</text> <text x="60" y="160" font-size="1.1em" font-weight="300">font-weight="300"</text> <text x="60" y="180" font-size="1.1em" font-weight="400">font-weight="400"</text> <text x="60" y="200" font-size="1.1em" font-weight="500">font-weight="500"</text> <text x="60" y="220" font-size="1.1em" font-weight="600">font-weight="600"</text> <text x="60" y="240" font-size="1.1em" font-weight="700">font-weight="700"</text> <text x="60" y="260" font-size="1.1em" font-weight="800">font-weight="800"</text> <text x="60" y="280" font-size="1.1em" font-weight="900">font-weight="900"</text> </svg> |
|
|
font-family
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="60" y="20" font-size="1.1em">no font-family</text> <text x="60" y="40" font-size="1.1em" font-family="serif">font-family="serif"</text> <text x="60" y="60" font-size="1.1em" font-family="sans-serif">font-family="sans-serif"</text> <text x="60" y="80" font-size="1.1em" font-family="cursive">font-family="cursive"</text> <text x="60" y="100" font-size="1.1em" font-family="fantasy">font-family="fantasy"</text> <text x="60" y="120" font-size="1.1em" font-family="monospace">font-family="monospace"</text> <text x="60" y="140" font-size="1.1em" font-family="georgia">font-family="georgia"</text> <text x="60" y="160" font-size="1.1em" font-family="impact">font-family="impact"</text> <text x="60" y="180" font-size="1.1em" font-family="times">font-family="times"</text> </svg> |
|
|
font-style
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="60" y="20" font-size="1.1em">no font-style</text> <text x="60" y="40" font-size="1.1em" font-style="normal">font-style="normal"</text> <text x="60" y="60" font-size="1.1em" font-style="italic">font-style="italic"</text> <text x="60" y="80" font-size="1.1em" font-style="oblique">font-style="oblique"</text> </svg> |
|
|
text-decoration
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="60" y="20" font-size="1.1em">no text-decoration</text> <text x="60" y="50" font-size="1.1em" text-decoration="none">text-decoration="none"</text> <text x="60" y="80" font-size="1.1em" text-decoration="underline">text-decoration="underline"</text> <text x="60" y="110" font-size="1.1em" text-decoration="overline">text-decoration="overline"</text> <text x="60" y="140" font-size="1.1em" text-decoration="line-through">text-decoration="line-through"</text> <text x="60" y="170" font-size="1.1em" text-decoration="blink">text-decoration="blink"</text> </svg> |
|
|
word-spacing
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="60" y="20" font-size="1.1em">no word spacing</text> <text x="60" y="40" font-size="1.1em" word-spacing="10">word spacing 10</text> <text x="60" y="60" font-size="1.1em" word-spacing="20">word spacing 20</text> <text x="60" y="80" font-size="1.1em" word-spacing="10pt">word spacing 10pt</text> <text x="60" y="100" font-size="1.1em" word-spacing="20pt">word spacing 20pt</text> <text x="60" y="120" font-size="1.1em" word-spacing="10px">word spacing 10px</text> <text x="60" y="140" font-size="1.1em" word-spacing="20px">word spacing 20px</text> <text x="60" y="160" font-size="1.1em" word-spacing="1em">word spacing 1em</text> <text x="60" y="180" font-size="1.1em" word-spacing="2em">word spacing 2em</text> <text x="60" y="200" font-size="1.1em" word-spacing="50%">word spacing 50%</text> <text x="60" y="220" font-size="1.1em" word-spacing="200%">word spacing 200%</text> </svg> |
|
|
letter-spacing
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="240px"> <text x="5" y="20" font-size="1.1em">no letter spacing</text> <text x="5" y="40" font-size="1.1em" letter-spacing="2">letter spacing 2</text> <text x="5" y="60" font-size="1.1em" letter-spacing="5">letter spacing 5</text> <text x="5" y="80" font-size="1.1em" letter-spacing="2pt">letter spacing 2pt</text> <text x="5" y="100" font-size="1.1em" letter-spacing="5pt">letter spacing 5pt</text> <text x="5" y="120" font-size="1.1em" letter-spacing="2px">letter spacing 2px</text> <text x="5" y="140" font-size="1.1em" letter-spacing="5px">letter spacing 5px</text> <text x="5" y="160" font-size="1.1em" letter-spacing="0.2em">letter spacing 0.2em</text> <text x="5" y="180" font-size="1.1em" letter-spacing="0.5em">letter spacing 0.5em</text> <text x="5" y="200" font-size="1.1em" letter-spacing="50%">letter spacing 50%</text> <text x="5" y="220" font-size="1.1em" letter-spacing="200%">letter spacing 200%</text> </svg> |
|
|
text-anchor
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="150" y="30" font-size="1.1em" text-anchor="start">text-anchor="start"</text> <text x="150" y="60" font-size="1.1em" text-anchor="middle">text-anchor="middle"</text> <text x="150" y="90" font-size="1.1em" text-anchor="end">text-anchor="end"</text> </svg> |
|
|
tspan
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="10" y="30" style="font-size:12pt;"> Switch among <tspan font-style="italic">italic</tspan>, normal, and <tspan font-weight="bold">bold</tspan> text. </text> </svg> |
|
|
dy (text)
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="10" y="30" style="font-size:12pt;"> F <tspan dy="4">a</tspan> <tspan dy="8">l</tspan> <tspan dy="12">l</tspan> </text> </svg> |
|
|
baseline-shift
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="20" y="50" font-size="1.1em"> C<tspan baseline-shift="sub">12</tspan> H<tspan baseline-shift="sub">22</tspan> O<tspan baseline-shift="sub">11</tspan> (Sugar) </text> <text x="20" y="100" font-size="1.1em"> 6.02 x 10<tspan baseline-shift="super">23</tspan> (Avogadro's number) </text> <text x="20" y="150" font-size="1.1em"> 10<tspan baseline-shift="super">10<tspan baseline-shift="super">2</tspan></tspan> (Googol) </text> </svg> |
|
|
textLength and lengthAdjust
spacing, spacingAndGlyphs
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="20" y="50" font-size="1.1em"> <text x="20" y="30" font-size="1.1em" textLength="200" lengthAdjust="spacing">Two words</text> <text x="20" y="60" font-size="1.1em" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text> <text x="20" y="90" font-size="1.1em">Two words <tspan style="font-size: 10pt;">(normal length)</tspan></text> <text x="20" y="120" font-size="1.1em" textLength="80" lengthAdjust="spacing">Two words</text> <text x="20" y="150" font-size="1.1em" textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text> </svg> |
|
|
direction
ltr, rtl
unicode-bidi
normal, embed, bidi-override
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="20" y="40" direction="rtl">direction="rtl"</text> <text x="20" y="60" direction="ltr">direction="ltr"</text> <text x="20" y="80" direction="rtl" unicode-bidi="normal">direction="rtl" unicode-bidi="normal"</text> <text x="20" y="100" direction="ltr" unicode-bidi="normal">direction="ltr" unicode-bidi="normal"</text> <text x="20" y="120" direction="rtl" unicode-bidi="embed">direction="rtl" unicode-bidi="embed"</text> <text x="20" y="140" direction="ltr" unicode-bidi="embed">direction="ltr" unicode-bidi="embed"</text> <text x="20" y="160" direction="rtl" unicode-bidi="bidi-override">direction="rtl" unicode-bidi="bidi-override"</text> <text x="20" y="180" direction="ltr" unicode-bidi="bidi-override">direction="ltr" unicode-bidi="bidi-override"</text> </svg> |
|
|
unicode
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <text x="10" y="30">Greek: </text> <text x="100" y="30">αβγδε</text> <text x="10" y="50">Russian:</text> <text x="100" y="50">абвгд</text> <text x="10" y="70">Hebrew:</text> <text x="100" y="70">אבגדה (written right to left)</text> <text x="10" y="90">Arabic:</text> <text x="100" y="90">ابةت (written right to left)</text> </svg> |
|
|
writing-mode
lr-tb, rl-tb, tb-rl, lr, rl, tb
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <text x="60" y="20" font-size="1.1em" writing-mode="lr">writing-mode: lr</text> <text x="80" y="40" font-size="1.1em" writing-mode="rl">writing-mode: rl</text> <text x="100" y="60" font-size="1.1em" writing-mode="lr-tb">writing-mode: lr-tb</text> <text x="120" y="80" font-size="1.1em" writing-mode="rl-tb">writing-mode: rl-tb</text> <text x="140" y="100" font-size="1.1em" writing-mode="tb">writing-mode: tb</text> <text x="160" y="120" font-size="1.1em" writing-mode="tb-rl">writing-mode: tb-rl</text> </svg> |
|
| Lines | ||
|
line
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <line x1="10" y1="30" x2="230" y2="110" stroke="green" stroke-width="5" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <line x1="20" y1="180" x2="250" y2="10" stroke="red" stroke-width="1" /> </svg> |
||
|
vertical line
see also: path
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <line x1="150" y1="20" x2="150" y2="180" stroke="blue" stroke-width="10" /> </svg> |
|
|
horizontal line
see also: path
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <line x1="20" y1="100" x2="280" y2="100" stroke="orange" stroke-width="2" /> </svg> |
|
|
stroke-width
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <line x1="40" y1="10" x2="10" y2="190" stroke="midnightblue" /> <line x1="70" y1="10" x2="40" y2="190" stroke="midnightblue" stroke-width="0" /> <line x1="100" y1="10" x2="70" y2="190" stroke="midnightblue" stroke-width="1" /> <line x1="130" y1="10" x2="100" y2="190" stroke="midnightblue" stroke-width="2" /> <line x1="160" y1="10" x2="130" y2="190" stroke="midnightblue" stroke-width="4" /> <line x1="190" y1="10" x2="160" y2="190" stroke="midnightblue" stroke-width="6" /> <line x1="220" y1="10" x2="190" y2="190" stroke="midnightblue" stroke-width="10" /> <line x1="250" y1="10" x2="220" y2="190" stroke="midnightblue" stroke-width="12" /> <line x1="280" y1="10" x2="250" y2="190" stroke="midnightblue" stroke-width="14" /> </svg> |
|
|
stroke-opacity
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <line x1="150" y1="0" x2="150" y2="200" stroke="red" stroke-width="10" /> <line x1="20" y1="10" x2="280" y2="10" stroke="violet" stroke-width="10" stroke-opacity="0.0" /> <line x1="20" y1="30" x2="280" y2="30" stroke="violet" stroke-width="10" stroke-opacity="0.1" /> <line x1="20" y1="50" x2="280" y2="50" stroke="violet" stroke-width="10" stroke-opacity="0.2" /> <line x1="20" y1="70" x2="280" y2="70" stroke="violet" stroke-width="10" stroke-opacity="0.3" /> <line x1="20" y1="90" x2="280" y2="90" stroke="violet" stroke-width="10" stroke-opacity="0.5" /> <line x1="20" y1="110" x2="280" y2="110" stroke="violet" stroke-width="10" stroke-opacity="0.6" /> <line x1="20" y1="130" x2="280" y2="130" stroke="violet" stroke-width="10" stroke-opacity="0.7" /> <line x1="20" y1="150" x2="280" y2="150" stroke="violet" stroke-width="10" stroke-opacity="0.8" /> <line x1="20" y1="170" x2="280" y2="170" stroke="violet" stroke-width="10" stroke-opacity="0.9" /> <line x1="20" y1="190" x2="280" y2="190" stroke="violet" stroke-width="10" stroke-opacity="1.0" /> </svg> |
|
|
stroke-dasharray
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <line x1="20" y1="10" x2="280" y2="10" stroke="grey" stroke-width="2" stroke-dasharray="5, 5" /> <line x1="20" y1="30" x2="280" y2="30" stroke="grey" stroke-width="2" stroke-dasharray="5, 10" /> <line x1="20" y1="50" x2="280" y2="50" stroke="grey" stroke-width="2" stroke-dasharray="10, 5" /> <line x1="20" y1="70" x2="280" y2="70" stroke="grey" stroke-width="2" stroke-dasharray="5, 1" /> <line x1="20" y1="90" x2="280" y2="90" stroke="grey" stroke-width="2" stroke-dasharray="1, 5" /> <line x1="20" y1="110" x2="280" y2="110" stroke="grey" stroke-width="2" stroke-dasharray="0.9" /> <line x1="20" y1="130" x2="280" y2="130" stroke="grey" stroke-width="2" stroke-dasharray="15, 10, 5" /> <line x1="20" y1="150" x2="280" y2="150" stroke="grey" stroke-width="2" stroke-dasharray="15, 10, 5, 10" /> <line x1="20" y1="170" x2="280" y2="170" stroke="grey" stroke-width="2" stroke-dasharray="15, 10, 5, 10, 15" /> <line x1="20" y1="190" x2="280" y2="190" stroke="grey" stroke-width="2" stroke-dasharray="5, 5, 1, 5" /> </svg> |
|
|
stroke-linecap
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <line x1="20" y1="50" x2="280" y2="50" stroke="black" stroke-linecap="butt" stroke-width="20" /> <line x1="20" y1="100" x2="280" y2="100" stroke="black" stroke-linecap="round" stroke-width="20" /> <line x1="20" y1="150" x2="280" y2="150" stroke="black" stroke-linecap="square" stroke-width="20" /> </svg> |
|
| Rectangles | ||
|
rect
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="1" y="1" width="119" height="39" fill="none" stroke="blue" stroke-width="2" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <!-- black interior, no outline --> <rect x="10" y="10" width="100" height="80" /> <!-- no interior, black outline --> <rect x="150" y="10" width="120" height="70" style="fill: none; stroke: black;" /> <!-- blue interior, thick semi-transparent red outline --> <rect x="10" y="100" width="125" height="75" style="fill: #0000ff; stroke: red; stroke-width: 7; stroke-opacity: 0.5;" /> <!-- semi-transparent yellow interior, dashed green outline --> <rect x="150" y="100" width="135" height="60" style="fill: yellow; fill-opacity: 0.5; stroke: green; stroke-width: 2; stroke-dasharray: 5 2" /> </svg> |
||
|
black square
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="75" y="25" width="150" height="150" fill="black" /> </svg> |
|
|
square
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="40" y="10" width="140" height="120" fill="yellow" stroke="navy" stroke-width="5" /> </svg> |
|
|
rounded rectangles
rx, ry
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="10" y="10" width="250" height="150" rx="10" fill="green" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="110" y="10" width="50" height="80" rx="5" style="stroke: black; fill: none;" /> <rect x="210" y="10" width="50" height="80" ry="10" style="stroke: black; fill: none;" /> <!-- rx and ry unequal --> <rect x="10" y="110" width="50" height="80" rx="10" ry="5" style="stroke: black; fill: none;" /> <rect x="110" y="110" width="50" height="80" rx="5" ry="10" style="stroke: black; fill: none;" /> <!-- rx and ry equal --> <rect x="210" y="110" width="50" height="50" rx="20" ry="20" style="stroke: black; fill: none;" /> </svg> |
||
| Links | ||
|
a
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <a xlink:href="http://www.cheat-sheets.org/"> <text x="50" y="30" font-size="12" text-decoration="underline" fill="blue">Cheat Sheets</text> </a> <a xlink:href="http://www.cheat-sheets.org/"> <rect x="50" y="100" width="150" height="40" stroke-width="2" fill="yellowgreen" /> </a> </svg> |
|
| Circles | ||
|
circle
See also: circle from ellipse
See also: circle from elliptical arc curves
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <circle cx="150" cy="100" r="50" fill="blue" stroke="firebrick" stroke-width="3" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <circle cx="35" cy="100" r="30" style="stroke: aqua; fill: none;" /> <circle cx="125" cy="100" r="45" style="stroke-width: 5; stroke: aquamarine; fill: none;" /> <circle cx="240" cy="100" r="60" fill="antiquewhite" /> </svg> |
||
| Ellipses | ||
|
ellipse
See also: ellipse from elliptical arc curves
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <ellipse transform="translate(150 60)" rx="125" ry="50" fill="red" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <ellipse cx="80" cy="100" rx="30" ry="60" style="stroke: black; fill: none;" /> <ellipse cx="210" cy="100" rx="60" ry="30" stroke="black" fill="none" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <ellipse transform="translate(130 80) rotate(20)" rx="120" ry="50" fill="none" stroke="blue" stroke-width="20" /> </svg> |
||
|
circle from ellipse
See also: circle
See also: ellipse
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <ellipse cx="150" cy="100" rx="80" ry="80" fill="none" stroke="black" /> </svg> |
|
| Polylines | ||
|
polyline
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <polyline fill="none" stroke="greenyellow" stroke-width="3" points=" 10,190 30,190 30,140 50,140 50,190 70,190 70,120 90,120 90,190 110,190 110,100 130,100 130,190 150,190 150, 80 170, 80 170,190 190,190 190, 60 210, 60 210,190 230,190 230, 40 250, 40 250,190 270,190 270, 20 290, 20" /> </svg> |
|
|
stroke-linejoin
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <polyline stroke-linejoin="miter" stroke="black" stroke-width="12" fill="none" points="20,150 50,50 80,150"/> <polyline stroke-linejoin="round" stroke="black" stroke-width="12" fill="none" points="120,150 150,50 180,150"/> <polyline stroke-linejoin="bevel" stroke="black" stroke-width="12" fill="none" points="220,150 250,50 280,150"/> </svg> |
|
| Polygons | ||
|
polygon
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <title>Star</title</title> <polygon fill="red" stroke="blue" stroke-width="10" points="175,37.5 189.5,80.5 234.5,80.5 198.5,107.5 211.5,150.5 175,125 138.5,150.5 151.5,107.5 115.5,80.5 160.5,80.5" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <title>Hexagon</title> <polygon fill="lime" stroke="blue" stroke-width="3" points="125,37.5 179,68.75 179,131.25 125,162.5 71,131.3 71,68.75" /> </svg> |
||
|
fill-rule
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <title>Stars</title> <polygon fill-rule="nonzero" fill="yellow" stroke="black" points="48,16 16,96 96,48 0,48 80,96" /> <polygon fill-rule="evenodd" fill="#00ff00" stroke="black" points="148,16 116,96 196,48 100,48 180,96" /> </svg> |
|
| Pathes | ||
|
path
absolute coordinates: H, L, M, V, Z, z
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <!-- single line: Move pen to (10, 10); Draw a line to (290, 190) --> <path d="M 10 10 L 290 190" stroke="black" fill="none" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <!-- a angle: Move pen to (280,20); Draw a line to (10,190); Draw a line to (280,190) --> <path d="M 280,20 L 10,190 280,190" fill="none" stroke="brown" stroke-width="2" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,20 L 280,20 L 150,180 Z" fill="red" stroke="blue" stroke-width="3" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 150,20 V 180" stroke="cornflowerblue" stroke-width="4" /> </svg> See also: vertical line
|
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,100 H 280" stroke="darkcyan" stroke-width="4" /> </svg> See also: horizontal line
|
||
|
path
relative coordinates: h, l, m, v, z
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="m 20,10 v 180 m 40,0 l 180,-180 m 40,80 h -220" stroke="deeppink" fill="none" /> </svg> |
|
| Bézier Curves | ||
|
Quadratic Bézier Curves
Q, q - quadratic Bézier curveto
T, t - shorthand/smooth quadratic Bézier curveto
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,100 Q 150,20 280,100" stroke="black" fill="none" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 25,100 Q 50,0 75,100 T135,100 T185,100 T235,100 T275,100" stroke="black" fill="none" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,100 Q 150,-50 280,100" stroke="red" fill="none" /> <path d="M 20,100 Q 150,0 280,100" stroke="orange" fill="none" /> <path d="M 20,100 Q 150,50 280,100" stroke="yellow" fill="none" /> <path d="M 20,100 Q 150,100 280,100" stroke="green" fill="none" /> <path d="M 20,100 Q 150,150 280,100" stroke="blue" fill="none" /> <path d="M 20,100 Q 150,200 280,100" stroke="darkblue" fill="none" /> <path d="M 20,100 Q 150,250 280,100" stroke="violet" fill="none" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,150 Q -150,-100 280,150" stroke="red" fill="none" /> <path d="M 20,150 Q -50,-100 280,150" stroke="orange" fill="none" /> <path d="M 20,150 Q 50,-100 280,150" stroke="yellow" fill="none" /> <path d="M 20,150 Q 150,-100 280,150" stroke="green" fill="none" /> <path d="M 20,150 Q 250,-100 280,150" stroke="blue" fill="none" /> <path d="M 20,150 Q 350,-100 280,150" stroke="darkblue" fill="none" /> <path d="M 20,150 Q 450,-100 280,150" stroke="violet" fill="none" /> </svg> |
||
|
Cubic Bézier Curves
С, с - quadratic Bézier curveto
S, s - shorthand/smooth quadratic Bézier curveto
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,100 C 10,5 280,80 280,100" stroke="black" fill="none" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 25,100 C 30,0 60,20 75,100 S 130,130 135,100 S 180,70 185,100 S 230,130 235,100 S 280,70" stroke="black" fill="none" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,100 C 65,-50 235,0 280,100" stroke="red" fill="none" /> <path d="M 20,100 C 65,0 235,0 280,100" stroke="orange" fill="none" /> <path d="M 20,100 C 65,50 235,0 280,100" stroke="yellow" fill="none" /> <path d="M 20,100 C 65,100 235,0 280,100" stroke="green" fill="none" /> <path d="M 20,100 C 65,150 235,0 280,100" stroke="blue" fill="none" /> <path d="M 20,100 C 65,200 235,0 280,100" stroke="darkblue" fill="none" /> <path d="M 20,100 C 65,250 235,0 280,100" stroke="violet" fill="none" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,100 C 65,0 235,-50 280,100" stroke="red" fill="none" /> <path d="M 20,100 C 65,0 235,0 280,100" stroke="orange" fill="none" /> <path d="M 20,100 C 65,0 235,50 280,100" stroke="yellow" fill="none" /> <path d="M 20,100 C 65,0 235,100 280,100" stroke="green" fill="none" /> <path d="M 20,100 C 65,0 235,150 280,100" stroke="blue" fill="none" /> <path d="M 20,100 C 65,0 235,200 280,100" stroke="darkblue" fill="none" /> <path d="M 20,100 C 65,0 235,250 280,100" stroke="violet" fill="none" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,100 C -300,0 300,0 280,100" stroke="red" fill="none" /> <path d="M 20,100 C -200,0 300,0 280,100" stroke="orange" fill="none" /> <path d="M 20,100 C -100,0 300,0 280,100" stroke="yellow" fill="none" /> <path d="M 20,100 C 0,0 300,0 280,100" stroke="green" fill="none" /> <path d="M 20,100 C 100,0 300,0 280,100" stroke="blue" fill="none" /> <path d="M 20,100 C 200,0 300,0 280,100" stroke="darkblue" fill="none" /> <path d="M 20,100 C 300,0 300,0 280,100" stroke="violet" fill="none" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M 20,100 C 0,0 0,0 280,100" stroke="red" fill="none" /> <path d="M 20,100 C 0,0 100,0 280,100" stroke="orange" fill="none" /> <path d="M 20,100 C 0,0 200,0 280,100" stroke="yellow" fill="none" /> <path d="M 20,100 C 0,0 300,0 280,100" stroke="green" fill="none" /> <path d="M 20,100 C 0,0 400,0 280,100" stroke="blue" fill="none" /> <path d="M 20,100 C 0,0 500,0 280,100" stroke="darkblue" fill="none" /> <path d="M 20,100 C 0,0 600,0 280,100" stroke="violet" fill="none" /> </svg> |
||
| Elliptical Arc | ||
|
Elliptical Arc Curves
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag x y
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M20,100 A80,30 0 1,1 220,150" fill="none" stroke="black" /> </svg> |
|
|
x-axis-rotation
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M40,180 A70,30 -80 1,1 220,190" stroke="red" fill="none" /> <path d="M40,180 A70,30 -50 1,1 220,190" stroke="orange" fill="none" /> <path d="M40,180 A70,30 -30 1,1 220,190" stroke="yellow" fill="none" /> <path d="M40,180 A70,30 0 1,1 220,190" stroke="green" fill="none" stroke-width="2" /> <path d="M40,180 A70,30 30 1,1 220,190" stroke="blue" fill="none" /> <path d="M40,180 A70,30 50 1,1 220,190" stroke="darkblue" fill="none" /> <path d="M40,180 A70,30 80 1,1 220,190" stroke="violet" fill="none" /> </svg> |
|
|
large-arc-flag and sweep-flag
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M120,70 A80,30 0 0,0 150,120" fill="none" stroke="red" stroke-width="2" /> <path d="M120,70 A80,30 0 1,1 150,120" fill="none" stroke="orange" stroke-width="2" /> <path d="M120,70 A80,30 0 0,1 150,120" fill="none" stroke="blue" stroke-width="2" /> <path d="M120,70 A80,30 0 1,0 150,120" fill="none" stroke="violet" stroke-width="2" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M120,70 A80,30 0 0,0 150,120" fill="none" stroke="black" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M120,70 A80,30 0 1,1 150,120" fill="none" stroke="black" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M120,70 A80,30 0 0,1 150,120" fill="none" stroke="black" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M120,70 A80,30 0 1,0 150,120" fill="none" stroke="black" /> </svg> |
||
|
circle from elliptical arc curves
See also: circle
See also: Elliptical Arc Curves
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M20,100 A80,80 0 1,1 20,101 z" fill="none" stroke="black" /> </svg> |
|
|
ellipse from elliptical arc curves
See also: ellipse
See also: Elliptical Arc Curves
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M20,100 A80,30 0 1,1 20,101 z" fill="none" stroke="black" /> </svg> |
|
|
sectors from elliptical arc curves
See also: Elliptical Arc Curves
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <path d="M150,100 h-75 a75,75 0 1,0 75,-75 z" fill="red" stroke="blue" stroke-width="5" /> <path d="M137.5,87.5 v-75 a75,75 0 0,0 -75,75 z" fill="yellow" stroke="blue" stroke-width="5" /> </svg> |
|
| Transform | ||
|
transform
translate, rotate, scale, skewX, skewY
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" transform="translate(60 51)" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" transform="translate(60 51) rotate(10)" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" transform="translate(60 51) rotate(-10)" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" transform="translate(60 51) skewX(10)" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" transform="translate(60 51) skewY(10)" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" transform="translate(60 51) skewX(10) skewY(10)" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" transform="translate(60 51) scale(0.6)" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <rect x="0" y="0" width="200" height="100" rx="5" fill="none" stroke="purple" stroke-width="30" transform="translate(60 51) scale(0.2, 1.2)" /> </svg> |
||
| Grouping | ||
|
g
|
<!-- From: J. David Eisenberg, SVG Essentials, Publisher: O'Reilly, First Edition February 2002, ISBN: 0-596-00223-8, 364 pages --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px""> <title>Grouped Drawing</title> <desc>Stick-figure drawings of a house and people</desc> <g id="house" style="fill: none; stroke: black;"> <desc>House with door</desc> <rect x="6" y="50" width="60" height="60"/> <polyline points="6 50, 36 9, 66 50"/> <polyline points="36 110, 36 80, 50 80, 50 110"/> </g> <g id="man" style="fill: none; stroke: black;"> <desc>Male human</desc> <circle cx="85" cy="56" r="10"/> <line x1="85" y1="66" x2="85" y2="80"/> <polyline points="76 104, 85 80, 94 104" /> <polyline points="76 70, 85 76, 94 70" /> </g> <g id="woman" style="fill: none; stroke: black;"> <desc>Female human</desc> <circle cx="110" cy="56" r="10"/> <polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/> <line x1="104" y1="104" x2="108" y2="90"/> <line x1="112" y1="90" x2="116" y2="104"/> <polyline points="101 70, 110 76, 119 70" /> </g> </svg> |
|
|
use
|
<!-- From: J. David Eisenberg, SVG Essentials, Publisher: O'Reilly, First Edition February 2002, ISBN: 0-596-00223-8, 364 pages --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px""> <use xlink:href="#house" x="70" y="80"/> <use xlink:href="#woman" x="-80" y="80"/> <use xlink:href="#man" x="-30" y="80"/> </svg> |
|
|
defs
|
<!-- From: J. David Eisenberg, SVG Essentials, Publisher: O'Reilly, First Edition February 2002, ISBN: 0-596-00223-8, 364 pages --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="250px"> <title>Grouped Drawing</title> <desc>Stick-figure drawings of a house and people</desc> <defs> <g id="house1" style="stroke: black;"> <desc>House with door</desc> <rect x="0" y="41" width="60" height="60" /> <polyline points="0 41, 30 0, 60 41" /> <polyline points="30 101, 30 71, 44 71, 44 101" /> </g> <g id="man1" style="fill: none; stroke: black;"> <desc>Male human</desc> <circle cx="10" cy="10" r="10"/> <line x1="10" y1="20" x2="10" y2="44" /> <polyline points="1 58, 10 44, 19 58" /> <polyline points="1 24, 10 30, 19 24" /> </g> <g id="woman1" style="fill: none; stroke: black;"> <desc>Female human</desc> <circle cx="10" cy="10" r="10" /> <polyline points="10 20, 10 34, 0 44, 20 44, 10 34" /> <line x1="4" y1="58" x2="8" y2="44" /> <line x1="12" y1="44" x2="16" y2="58" /> <polyline points="1 24, 10 30, 19 24" /> </g> <g id="couple1"> <desc>Male and female human</desc> <use xlink:href="#man1" x="0" y="0" /> <use xlink:href="#woman1" x="25" y="0" /> </g> </defs> <!-- make use of the defined groups --> <use xlink:href="#house1" x="0" y="0" style="fill: #cfc;" /> <use xlink:href="#couple1" x="70" y="40" /> <use xlink:href="#house1" x="120" y="0" style="fill: #99f;" /> <use xlink:href="#couple1" x="190" y="40" /> <use xlink:href="#woman1" x="0" y="145" /> <use xlink:href="#man1" x="25" y="145" /> <use xlink:href="#house1" x="65" y="105" style="fill: #c00;" /> </svg> |
|
|
symbol
|
<!-- From: J. David Eisenberg, SVG Essentials, Publisher: O'Reilly, First Edition February 2002, ISBN: 0-596-00223-8, 364 pages --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px""> <symbol id="sym-octagon" stroke="black"> <desc>Octagon as symbol</desc> <polygon points="36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11" /> </symbol> <use xlink:href="#sym-octagon" x="20" y="30" width="60" height="60" fill="#cfc"/> <use xlink:href="#sym-octagon" x="170" y="120" width="80" height="120" fill="#699" /> </svg> |
|
| Markers | ||
|
marker
marker-start, marker-mid, marker-end
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <marker id="mC" markerWidth="10" markerHeight="10" refX="5" refY="5"> <circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/> </marker> <marker id="mA" markerWidth="6" markerHeight="10" refX="0" refY="4" orient="auto"> <path d="M 0 0 4 4 0 8" style="fill: none; stroke: black;"/> </marker> <marker id="mT" markerWidth="5" markerHeight="10" refX="5" refY="5" orient="auto"> <path d="M 0 0 5 5 0 10 Z" style="fill: black;"/> </marker> </defs> <path d="M20,20 H240 A 50,40 0 0,1 290,50 V180" marker-start="url(#mC)" marker-mid="url(#mA)" marker-end="url(#mT)" fill="none" stroke=" black" /> </svg> |
|
|
line segment
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <marker id="mLS" markerWidth="1" markerHeight="10" refY="5" orient="auto"> <line x1="0" y1="0" x2="0" y2="10" stroke="black"/> </marker> </defs> <line x1="20" y1="100" x2="280" y2="100" stroke="black" marker-start="url(#mLS)" marker-end="url(#mLS)" /> <text x="16" y="90">A</text> <text x="276" y="90">B</text> </svg> |
|
|
vector
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <marker id="mC2" markerWidth="5" markerHeight="5" refX="2.5" refY="2.5"> <circle cx="2.5" cy="2.5" r="2.5" fill="black" stroke="black"/> </marker> <marker id="mT2" markerWidth="20" markerHeight="10" refX="20" refY="5" orient="auto"> <path d="M0,0 L20,5 0,10 5,5 Z" style="fill: black;"/> </marker> </defs> <line x1="20" y1="150" x2="280" y2="50" stroke="black" marker-start="url(#mC2)" marker-end="url(#mT2)" /> <text x="16" y="140">A</text> <text x="276" y="45">B</text> </svg> |
|
| Switch | ||
|
switch
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <switch> <g systemLanguage="en-UK"><text x="10" y="100">en-UK: colour.</text></g> <g systemLanguage="en"><text x="10" y="100">en: color.</text></g> <g systemLanguage="es"><text x="10" y="100">es: color.</text></g> <g systemLanguage="en"><text x="10" y="100">ru: цвет.</text></g> </switch> </svg> |
|
| Text on a Path | ||
|
textPath
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <path id="curvepath" fill="none" d="M10 40 C 30 10, 50 10, 100 40 S 130 0, 180 40" /> <path id="round-corner" fill="none" d="M200 30 L 250 30 A 30 30 0 0 1 280 60 L 280 110" /> <path id="sharp-corner" fill="none" d="M10,110 L80,110 L80,160" /> <path id="discontinuous" fill="none" d="M120,110 A 40 30 0 1 0 200,110 M220,110 L240,160" /> </defs> <text><textPath xlink:href="#curvepath">Following a cubic Bézier curve.</textPath></text> <text><textPath xlink:href="#round-corner">Going 'round the bend</textPath></text> <text><textPath xlink:href="#sharp-corner">Making a quick turn</textPath></text> <text><textPath xlink:href="#discontinuous">Text along a broken path</textPath></text> </svg> |
|
| ViewBox | ||
|
viewBox
|
<!-- From: J. David Eisenberg, SVG Essentials, Publisher: O'Reilly, First Edition February 2002, ISBN: 0-596-00223-8, 364 pages --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px" viewBox="0 0 64 80"> <title>House</title> <rect x="10" y="35" width="40" height="40" style="stroke: black; fill: none;" /> <!-- roof --> <polyline points="10 35, 30 7.68, 50 35" style="stroke:black; fill: none;" /> <!-- door --> <polyline points="30 75, 30 55, 40 55, 40 75" style="stroke:black; fill: none;" /> </svg> |
|
|
<!-- From: J. David Eisenberg, SVG Essentials, Publisher: O'Reilly, First Edition February 2002, ISBN: 0-596-00223-8, 364 pages --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px" viewBox="0 0 90 90"> <title>House</title> <rect x="10" y="35" width="40" height="40" style="stroke: black; fill: none;" /> <!-- roof --> <polyline points="10 35, 30 7.68, 50 35" style="stroke:black; fill: none;" /> <!-- door --> <polyline points="30 75, 30 55, 40 55, 40 75" style="stroke:black; fill: none;" /> </svg> |
||
| Patterns | ||
|
pattern
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <pattern id="smPt" width="6" height="6" patternUnits="userSpaceOnUse"> <rect width="5" height="5" stroke="chartreuse" stroke-width="2" /> </pattern> </defs> <ellipse fill="url(#smPt)" stroke="indigo" stroke-width="5" cx="150" cy="100" rx="140" ry="50" /> </svg> |
|
|
patternUnits
objectBoundingBox, userSpaceOnUse
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <pattern id="smPt1" x="0" y="0" width="40" height="20" patternUnits="objectBoundingBox"> <rect x="0" y="0" width="40" height="20" stroke="darkturquoise" stroke-width="1" fill="none" /> </pattern> </defs> <rect fill="url(#smPt1)" x="20" y="10" width="65" height="25" stroke="indianred" stroke-width="2" /> <rect fill="url(#smPt1)" x="150" y="10" width="130" height="50" stroke="goldenrod" stroke-width="2" /> <rect fill="url(#smPt1)" x="20" y="90" width="260" height="100" stroke="deeppink" stroke-width="2" /> </svg> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <pattern id="smPt2" x="0" y="0" width="40" height="20" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="40" height="20" stroke="darkturquoise" stroke-width="1" fill="none" /> </pattern> </defs> <rect fill="url(#smPt2)" x="20" y="10" width="65" height="25" stroke="indianred" stroke-width="2" /> <rect fill="url(#smPt2)" x="150" y="10" width="130" height="50" stroke="goldenrod" stroke-width="2" /> <rect fill="url(#smPt2)" x="20" y="90" width="260" height="100" stroke="deeppink" stroke-width="2" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <pattern id="smPt3" x="0" y="0" width="80%" height="80%" patternUnits="objectBoundingBox"> <rect x="0" y="0" width="40" height="20" stroke="darkturquoise" stroke-width="1" fill="none" /> </pattern> </defs> <rect fill="url(#smPt3)" x="20" y="10" width="65" height="25" stroke="indianred" stroke-width="2" /> <rect fill="url(#smPt3)" x="150" y="10" width="130" height="50" stroke="goldenrod" stroke-width="2" /> <rect fill="url(#smPt3)" x="20" y="90" width="260" height="100" stroke="deeppink" stroke-width="2" /> </svg> |
||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <pattern id="smPt4" x="0" y="0" width="80%" height="80%" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="40" height="20" stroke="darkturquoise" stroke-width="1" fill="none" /> </pattern> </defs> <rect fill="url(#smPt4)" x="20" y="10" width="65" height="25" stroke="indianred" stroke-width="2" /> <rect fill="url(#smPt4)" x="150" y="10" width="130" height="50" stroke="goldenrod" stroke-width="2" /> <rect fill="url(#smPt4)" x="20" y="90" width="260" height="100" stroke="deeppink" stroke-width="2" /> </svg> |
||
| Gradients | ||
|
linearGradient
stop, offset, stop-color
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <linearGradient id="two_hues"> <stop offset="0%" style="stop-color: #ffcc00;"/> <stop offset="100%" style="stop-color: #0099cc;"/> </linearGradient> </defs> <rect x="20" y="20" width="260" height="160" style="fill: url(#two_hues); stroke: black;"/> </svg> |
|
|
radialGradient
stop, offset, stop-color
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <defs> <radialGradient id="three_stops"> <stop offset="0%" style="stop-color: #f96;"/> <stop offset="50%" style="stop-color: #9c9;"/> <stop offset="100%" style="stop-color: #906;"/> </radialGradient> </defs> <rect x="60" y="10" width="180" height="180" style="fill: url(#three_stops); stroke: black;"/> </svg> |
|
| Animation | ||
|
animate
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <circle cx="150" cy="150" r="10" fill="greenyellow" stroke="orangered" stroke-width="2"> <animate attributeName="r" to="150" dur="180s" repeatCount="indefinite" /> </circle> </svg> |
|
|
dur
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <circle cx="150" cy="150" r="10" fill="none" stroke="purple" stroke-width="2"> <animate attributeName="r" to="150" dur="120s" repeatCount="indefinite" /> </circle> <circle cx="150" cy="150" r="10" fill="none" stroke="royalblue" stroke-width="2"> <animate attributeName="r" to="150" dur="60s" repeatCount="indefinite" /> </circle> </svg> |
|
|
fill (animate)
freeze, remove
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <rect x="50" y="50" width="10" height="100" fill="none" stroke="steelblue" stroke-width="3"> <animate attributeName="width" to="200" dur="60s" fill="freeze" /> </rect> <rect x="50" y="170" width="10" height="100" fill="none" stroke="teal" stroke-width="3"> <animate attributeName="width" to="200" dur="60s" fill="remove" /> </rect> </svg> |
|
|
animateColor
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <ellipse transform="translate(150,150)" rx="125" ry="50" fill="blue"> <animateColor to="red" attributeName="fill" begin="5s" dur="20s" fill="freeze" repeatCount="indefinite" /> </ellipse> </svg> |
|
|
animateMotion
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <path id="path1" d="M70,250 C 70,100 220,50 220,250" fill="none" stroke="blue" stroke-width="3" /> <path d="M-12.5,-6.75 L12.5,-6.75 L 0,-43.75 z" fill="yellow" stroke="red" stroke-width="3"> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animateMotion> </path> </svg> |
|
|
animateTransform
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <title>Golden Watch</title> <circle cx="150" cy="150" r="140" fill="ghostwhite" stroke="goldenrod" stroke-width="2" /> <circle cx="150" cy="150" r="130" fill="none" stroke="goldenrod" stroke-width="3" stroke-dasharray="2,13.613568" transform="rotate(-.12)" /> <line y2="-130" stroke="gold" stroke-width="1" transform="translate(150,150) rotate(0)"> <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="60s" by="360" /> </line> <line y2="-120" stroke="gold" stroke-width="2" transform="translate(150,150) rotate(0)"> <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="60min" by="360" /> </line> <line y2="-110" stroke="gold" stroke-width="3" transform="translate(150,150) rotate(0)"> <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="12h" by="360" /> </line> </svg> |
|
| Scripting | ||
|
script
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px"> <script> <![CDATA[ function circle_click(evt) { var circle = evt.target; var currentRadius = circle.getAttribute("r"); if (currentRadius == 25) { circle.setAttribute("r", currentRadius*2); } else { circle.setAttribute("r", currentRadius*0.5); }; }; // ]]> </script> <circle cx="150" cy="100" r="25" fill="red" onclick="circle_click(evt)" /> <text x="150" y="175" text-anchor="middle">Click on circle to change its size.</text> </svg> |
|
| The End | ||
Additional Examples
| Name | Code | Show |
|---|---|---|
|
Cat
|
<!-- From: J. David Eisenberg, SVG Essentials, Publisher: O'Reilly, First Edition February 2002, ISBN: 0-596-00223-8, 364 pages --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px"> <g transform="translate(85 20)"> <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" /> <circle cx="55" cy="80" r="5" stroke="black" fill="blue" /> <circle cx="85" cy="80" r="5" stroke="black" fill="blue" /> <g id="whiskers"> <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" /> <line x1="75" y1="95" x2="135" y2="105" style="stroke: black; " /> </g> <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" /> <!-- ears --> <polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" /> <!-- mouth --> <polyline points="35 110, 45 120, 95 120, 105, 110" style="stroke: black; fill: none;" /> <!-- nose --> <path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90" style="stroke: black; fill: #ffcccc" /> <text x="60" y="165" style="font-family: sans-serif; font-size: 14pt; stroke: none; fill: black;">Cat</text> </g> </svg> |
|
|
Using elliptical arc
|
<!-- From: J. David Eisenberg, SVG Essentials, Publisher: O'Reilly, First Edition February 2002, ISBN: 0-596-00223-8, 364 pages --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="310px" height="300px"> <title>Using elliptical arc</title> <!-- gray drop shadow --> <ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;" /> <!-- light blue ellipse --> <ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;" /> <!-- large light red semicircle fills upper half, followed by small light red semicircle that dips into lower left half of symbol --> <path d="M 302 152 A 150 120, 0, 1, 0, 2 152 A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;" /> <!-- light blue semicircle rises into upper right half of symbol --> <path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;" /> </svg> |
Colors
| Show | Name | rgb |
|---|---|---|
| aliceblue | rgb(240, 248, 255) | |
| antiquewhite | rgb(250,235,215) | |
| aqua | rgb(0,255,255) | |
| aquamarine | rgb(127,255,212) | |
| azure | rgb(240,255,255) | |
| beige | rgb(245,245,220) | |
| bisque | rgb(255,228,196) | |
| black | rgb(0,0,0) | |
| blanchedalmond | rgb(255,235,205) | |
| blue | rgb(0,0,255) | |
| blueviolet | rgb(138,43,226) | |
| brown | rgb(165,42,42) | |
| burlywood | rgb(222,184,135) | |
| cadetblue | rgb(95,158,160) | |
| chartreuse | rgb(127,255,0) | |
| chocolate | rgb(210,105,30) | |
| coral | rgb(255,127,80) | |
| cornflowerblue | rgb(100,149,237) | |
| cornsilk | rgb(255,248,220) | |
| crimson | rgb(220,20,60) | |
| cyan | rgb(0,255,255) | |
| darkblue | rgb(0,0,139) | |
| darkcyan | rgb(0,139,139) | |
| darkgoldenrod | rgb(184,134,11) | |
| darkgray | rgb(169,169,169) | |
| darkgreen | rgb(0,100,0) | |
| darkgrey | rgb(169,169,169) | |
| darkkhaki | rgb(189,183,107) | |
| darkmagenta | rgb(139,0,139) | |
| darkolivegreen | rgb(85,107,47) | |
| darkorange | rgb(255,140,0) | |
| darkorchid | rgb(153,50,204) | |
| darkred | rgb(139,0,0) | |
| darksalmon | rgb(233,150,122) | |
| darkseagreen | rgb(143,188,143) | |
| darkslateblue | rgb(72,61,139) | |
| darkslategray | rgb(47,79,79) | |
| darkslategrey | rgb(47,79,79) | |
| darkturquoise | rgb(0,206,209) | |
| darkviolet | rgb(148,0,211) | |
| deeppink | rgb(255,20,147) | |
| deepskyblue | rgb(0,191,255) | |
| dimgray | rgb(105,105,105) | |
| dimgrey | rgb(105,105,105) | |
| dodgerblue | rgb(30,144,255) | |
| firebrick | rgb(178,34,34) | |
| floralwhite | rgb(255,250,240) | |
| forestgreen | rgb(34,139,34) | |
| fuchsia | rgb(255,0,255) | |
| gainsboro | rgb(220,220,220) | |
| ghostwhite | rgb(248,248,255) | |
| gold | rgb(255,215,0) | |
| goldenrod | rgb(218,165,32) | |
| gray | rgb(128,128,128) | |
| grey | rgb(128,128,128) | |
| green | rgb(0,128,0) | |
| greenyellow | rgb(173,255,47) | |
| honeydew | rgb(240,255,240) | |
| hotpink | rgb(255,105,180) | |
| indianred | rgb(205,92,92) | |
| indigo | rgb(75,0,130) | |
| ivory | rgb(255,255,240) | |
| khaki | rgb(240,230,140) | |
| lavender | rgb(230,230,250) | |
| lavenderblush | rgb(255,240,245) | |
| lawngreen | rgb(124,252,0) | |
| lemonchiffon | rgb(255,250,205) | |
| lightblue | rgb(173,216,230) | |
| lightcoral | rgb(240,128,128) | |
| lightcyan | rgb(224,255,255) | |
| lightgoldenrodyellow | rgb(250,250,210) | |
| lightgray | rgb(211,211,211) | |
| lightgreen | rgb(144,238,144) | |
| lightgrey | rgb(211,211,211) | |
| lightpink | rgb(255,182,193) | |
| lightsalmon | rgb(255,160,122) | |
| lightseagreen | rgb(32,178,170) | |
| lightskyblue | rgb(135,206,250) | |
| lightslategray | rgb(119,136,153) | |
| lightslategrey | rgb(119,136,153) | |
| lightsteelblue | rgb(176,196,222) | |
| lightyellow | rgb(255,255,224) | |
| lime | rgb(0,255,0) | |
| limegreen | rgb(50,205,50) | |
| linen | rgb(250,240,230) | |
| magenta | rgb(255,0,255) | |
| maroon | rgb(128,0,0) | |
| mediumaquamarine | rgb(102,205,170) | |
| mediumblue | rgb(0,0,205) | |
| mediumorchid | rgb(186,85,211) | |
| mediumpurple | rgb(147,112,219) | |
| mediumseagreen | rgb(60,179,113) | |
| mediumslateblue | rgb(123,104,238) | |
| mediumspringgreen | rgb(0,250,154) | |
| mediumturquoise | rgb(72,209,204) | |
| mediumvioletred | rgb(199,21,133) | |
| midnightblue | rgb(25,25,112) | |
| mintcream | rgb(245,255,250) | |
| mistyrose | rgb(255,228,225) | |
| moccasin | rgb(255,228,181) | |
| navajowhite | rgb(255,222,173) | |
| navy | rgb(0,0,128) | |
| oldlace | rgb(253,245,230) | |
| olive | rgb(128,128,0) | |
| olivedrab | rgb(107,142,35) | |
| orange | rgb(255,165,0) | |
| orangered | rgb(255,69,0) | |
| orchid | rgb(218,112,214) | |
| palegoldenrod | rgb(238,232,170) | |
| palegreen | rgb(152,251,152) | |
| paleturquoise | rgb(175,238,238) | |
| palevioletred | rgb(219,112,147) | |
| papayawhip | rgb(255,239,213) | |
| peachpuff | rgb(255,218,185) | |
| peru | rgb(205,133,63) | |
| pink | rgb(255,192,203) | |
| plum | rgb(221,160,221) | |
| powderblue | rgb(176,224,230) | |
| purple | rgb(128,0,128) | |
| red | rgb(255,0,0) | |
| rosybrown | rgb(188,143,143) | |
| royalblue | rgb(65,105,225) | |
| saddlebrown | rgb(139,69,19) | |
| salmon | rgb(250,128,114) | |
| sandybrown | rgb(244,164,96) | |
| seagreen | rgb(46,139,87) | |
| seashell | rgb(255,245,238) | |
| sienna | rgb(160,82,45) | |
| silver | rgb(192,192,192) | |
| skyblue | rgb(135,206,235) | |
| slateblue | rgb(106,90,205) | |
| slategray | rgb(112,128,144) | |
| slategrey | rgb(112,128,144) | |
| snow | rgb(255,250,250) | |
| springgreen | rgb(0,255,127) | |
| steelblue | rgb(70,130,180) | |
| tan | rgb(210,180,140) | |
| teal | rgb(0,128,128) | |
| thistle | rgb(216,191,216) | |
| tomato | rgb(255,99,71) | |
| turquoise | rgb(64,224,208) | |
| violet | rgb(238,130,238) | |
| wheat | rgb(245,222,179) | |
| white | rgb(255,255,255) | |
| whitesmoke | rgb(245,245,245) | |
| yellow | rgb(255,255,0) | |
| yellowgreen | rgb(154,205,50) |
Attributes
a class, externalResourcesRequired, style, target, transform, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, xmlns:xlinkaltGlyph class, dx, dy, externalResourcesRequired, format, glyphRef, rotate, style, x, xlink:href, y
animAdditionAttrs accumulate
animAttributeAttrs attributeType
animElementAttrs xlink:href
animTimingAttrs dur, end, fill, max, min, repeatCount, repeatDur, restart
animValueAttrs by, from, keySplines, keyTimes, to, values
animate externalResourcesRequired
animateColor externalResourcesRequired
animateMotion by, calcMode, externalResourcesRequired, from, keyPoints, keySplines, keyTimes, origin, path, rotate, to, values
animateTransform externalResourcesRequired, type
animationEvents onbegin, onend, onrepeat
circle class, cx, cy, externalResourcesRequired, r, style, transform
clipPath class, clipPathUnits, externalResourcesRequired, style, transform
color-profile local, name, rendering-intent, xlink:href
component_transfer_function_attributes amplitude, exponent, intercept, offset, slope, tableValues, type
cursor externalResourcesRequired, x, xlink:href, y
definition-src xlink:href
defs class, externalResourcesRequired, style, transform
desc class, style
documentEvents onabort, onerror, onresize, onscroll, onunload, onzoom
ellipse class, cx, cy, externalResourcesRequired, rx, ry, style, transform
feBlend in2, mode
feColorMatrix type, values
feComposite in2, k1, k2, k3, k4, operator
feConvolveMatrix bias, divisor, edgeMode, kernelMatrix, kernelUnitLength, order, preserveAlpha, targetX, targetY
feDiffuseLighting class, diffuseConstant, kernelUnitLength, surfaceScale
feDisplacementMap in2, scale, xChannelSelector, yChannelSelector
feDistantLight azimuth, elevation
feFlood class
feGaussianBlur stdDeviation
feImage class, externalResourcesRequired, style, xlink:href
feMergeNode in
feMorphology operator, radius
feOffset dx, dy
fePointLight x, y, z
feSpecularLighting class, kernelUnitLength, specularConstant, specularExponent, surfaceScale
feSpotLight limitingConeAngle, pointsAtX, pointsAtY, pointsAtZ, specularExponent, x, y, z
feTurbulence baseFrequency, numOctaves, seed, stitchTiles, type
filter animate, class, externalResourcesRequired, feColorMatrix, feComposite, feGaussianBlur, feMorphology, feTile, filterRes, filterUnits, height, primitiveUnits, style, width, x, xlink:href, y
font class, externalResourcesRequired, horiz-adv-x, horiz-origin-x, horiz-origin-y, style, vert-adv-y, vert-origin-x, vert-origin-y
font-face accent-height, alphabetic, ascent, bbox, cap-height, descent, font-family, font-size, font-stretch, font-style, font-variant, font-weight, hanging, ideographic, mathematical, overline-position, overline-thickness, panose-1, slope, stemh, stemv, strikethrough-position, strikethrough-thickness, underline-position, underline-thickness, unicode-range, units-per-em, v-alphabetic, v-hanging, v-ideographic, v-mathematical, widths, x-height
font-face-uri xlink:href
foreignObject class, externalResourcesRequired, height, style, transform, width, x, y
g class, externalResourcesRequired, style, transform
glyph arabic-form, class, d, glyph-name, horiz-adv-x, lang, orientation, style, unicode, vert-adv-y, vert-origin-x, vert-origin-y
glyphRef class, dx, dy, format, glyphRef, style, x, xlink:href, y
graphicsElementEvents onactivate, onclick, onfocusin, onfocusout, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
hkern g1, g2, k, u1, u2
image class, externalResourcesRequired, height, preserveAspectRatio, style, transform, width, x, xlink:href, y
langSpaceAttrs xml:space
line class, externalResourcesRequired, style, transform, x1, x2, y1, y2
linearGradient class, externalResourcesRequired, gradientTransform, gradientUnits, spreadMethod, style, x1, x2, xlink:href, y1, y2
marker class, externalResourcesRequired, markerHeight, markerUnits, markerWidth, orient, preserveAspectRatio, refX, refY, style, viewBox
mask class, externalResourcesRequired, height, maskContentUnits, maskUnits, style, width, x, y
missing-glyph class, d, horiz-adv-x, style, vert-adv-y, vert-origin-x, vert-origin-y
mpath externalResourcesRequired, xlink:href
path class, d, externalResourcesRequired, pathLength, style, transform
pattern class, externalResourcesRequired, height, patternContentUnits, patternTransform, patternUnits, preserveAspectRatio, style, viewBox, width, x, xlink:href, y
polygon class, externalResourcesRequired, points, style, transform
polyline class, externalResourcesRequired, points, style, transform
radialGradient class, cx, cy, externalResourcesRequired, fx, fy, gradientTransform, gradientUnits, r, spreadMethod, style, xlink:href
rect class, externalResourcesRequired, height, rx, ry, style, transform, width, x, y
script externalResourcesRequired, type, xlink:href
set externalResourcesRequired, to
stdAttrs xml:base
stop class, offset, style
style media, title, type, xml:space
svg baseProfile, class, contentScriptType, contentStyleType, externalResourcesRequired, height, preserveAspectRatio, style, version, viewBox, width, x, xmlns, y, zoomAndPan
switch class, externalResourcesRequired, style, transform
symbol class, externalResourcesRequired, preserveAspectRatio, style, viewBox
testAttrs requiredExtensions, systemLanguage
text class, dx, dy, externalResourcesRequired, lengthAdjust, rotate, style, textLength, transform, x, y
textPath class, externalResourcesRequired, lengthAdjust, method, spacing, startOffset, style, textLength, xlink:href
title class, style
tref class, dx, dy, externalResourcesRequired, lengthAdjust, rotate, style, textLength, x, xlink:href, y
tspan class, dx, dy, externalResourcesRequired, lengthAdjust, rotate, style, textLength, x, y
use class, externalResourcesRequired, height, style, transform, width, x, xlink:href, y
view externalResourcesRequired, preserveAspectRatio, viewBox, viewTarget, zoomAndPan
vkern g1, g2, k, u1, u2
xlinkRefAttrs xlink:actuate, xlink:arcrole, xlink:role, xlink:show, xlink:title, xlink:type
xlinkRefAttrsEmbed xlink:actuate, xlink:arcrole, xlink:role, xlink:show, xlink:title, xlink:type