SVG examples
Examples of SVG (Scalable Vector Graphics)
Basic shape examples
This simple svg examples show the code below. Changing the code will not affect the image, to do so use other tools such as rapidtables.com or polycursor.com Archivkopie in der Wayback Machine or codepen.io (use html for svg) Archivkopie in der Wayback Machine.
Lime-green rectangle
<?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" version="1.1"
width="120" height="120">
<rect x="14" y="23" width="200" height="50" fill="lime"
stroke="black" />
</svg>
See also Transparent rectangle.
Blue rounded rectangle
<?xml version="1.0"?>
<!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"
width="526" height="233">
<rect x="13" y="14" width="500" height="200" rx="50" ry="100"
fill="none" stroke="blue" stroke-width="10" />
</svg>
Red and blue squares
<?xml version="1.0"?>
<!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"
width="467" height="462">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
</svg>
Can as well be written
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="467" height="462" stroke="#000" stroke-width="2">
<rect x="80" y="60" width="250" height="250" rx="20" fill="#F00"/>
<rect x="140" y="120" width="250" height="250" rx="40" fill="#00F" fill-opacity=".7"/>
</svg>
Transparent rectangle
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 1288.000000 728.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,728.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 3640 l0 -3640 6440 0 6440 0 0 3640 0 3640 -6440 0 -6440 0 0 -3640z
m12800 0 l0 -3560 -6360 0 -6360 0 0 3560 0 3560 6360 0 6360 0 0 -3560z"/>
</g>
</svg>
Can as well be written with less effort
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="289">
<path fill="none" stroke="#000" stroke-width="8" d="m0,0h512v289H0z"/>
</svg>
or, with rect
instead of path
...
<rect fill="none" stroke="#000" stroke-width="8" width="512" height="289"/>
...
Red, blue and green squares
<?xml version="1.0"?>
<!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"
width="467" height="462">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#00ff00; stroke:#0000cc; stroke-width:5px;
fill-opacity:1.0;" />
</svg>
Red circle
<?xml version="1.0"?>
<!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"
width="400" height="400">
<circle cx="100" cy="100" r="50" stroke="black"
stroke-width="5" fill="red" />
</svg>
Ellipse
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="520" height="350">
<ellipse
cx="258" cy="169" rx="250" ry="80"
transform="matrix(0.866025,-0.5,0.5,0.866025,-46,152)"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
Filled Oval
<?xml version="1.0"?>
<!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"
width="100" height="50">
<ellipse
cx="50" cy="25" rx="50" ry="25"
fill="blue" stroke="none" />
</svg>
Multiple grayscales
Exact the same image differently coded (needing 744 / 450 / 295 bytes)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg"
width="1000" height="600"
viewBox="0 0 5 5">
<rect id="black"
fill="#000"
width="5"
height="3"/>
<rect id="gray_i"
fill="#444"
width="5"
height="2" y="1"/>
<rect id="gray_ii"
fill="#888"
width="5"
height="1" y="2"/>
<rect id="gray_iii"
fill="#ccc"
width="5"
height="1" y="3"/>
<rect id="white"
fill="#fff"
width="15"
height="1" y="4"/>
</svg>
Pentagram
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg"
width="304" height="290">
<path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z"
style="fill:#FB2;stroke:#BBB;stroke-width:15;stroke-linejoin:round"/>
</svg>
See also: Das Pentagramm als manuelle SVG-Grafik (de) Eine Anleitung
Text
<?xml version="1.0"?>
<!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" width="105" height="100"><text x="1" y="50"><tspan>Just an example</tspan></text></svg>
Same display, reduced (126 bytes):
<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="105" height="99"><text y="50">Just an example</text></svg>
more advanced example:
Multilingual files
Using the switch element:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="140" style="font-family:sans-serif;font-size:30px">
<text x="30" y="50">systemLanguage:</text>
<switch allowReorder="yes" transform="translate(30,110)" fill="red">
<text systemLanguage="de">de</text>
<text systemLanguage="en">en</text>
<text systemLanguage="es">es</text>
<text systemLanguage="fr">fr</text>
<text systemLanguage="it">it</text>
<text systemLanguage="cs">cs</text>
<text systemLanguage="tl">tl</text>
<text systemLanguage="to">to</text>
<text systemLanguage="zh">zh</text>
<text systemLanguage="zh-hans">zh-hans</text>
<text systemLanguage="zh-hant">zh-hant</text>
<text systemLanguage="zh-cn">zh-cn</text>
<text systemLanguage="zh-tw">zh-tw</text>
<text systemLanguage="qsc">qsc</text>
<text systemLanguage="qtc">qtc</text>
<text systemLanguage="nan">nan</text>
<text systemLanguage="yue">yue</text>
<text systemLanguage="wuu">wuu</text>
<text systemLanguage="cdo">cdo</text>
<text systemLanguage="hak">hak</text>
<text systemLanguage="id">id</text>
<text systemLanguage="ja">ja</text>
<text systemLanguage="ko">ko</text>
<text systemLanguage="th">th</text>
<text>other</text>
</switch>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="-50 -100 100 120" xmlns="http://www.w3.org/2000/svg">
<switch font-family="DejaVu Sans" font-size="100px" text-anchor="middle">
<text systemLanguage="gem">♂</text>
<text systemLanguage="gew">♀</text>
<text systemLanguage="gei">⚥</text>
<text systemLanguage="geu">⚲</text>
<text systemLanguage="geg">☿</text>
<text systemLanguage="gen">⚪</text>
<text systemLanguage="get">⚧</text>
<g systemLanguage="ged">
<text y="10" font-size="50px" font-weight="bold">d</text>
<circle cx="2.5" cy="-57.5" r="22.5" fill="none" stroke="#000" stroke-width="9"/>
<path d="m-14-74 33 33m0-33-33 33" fill="none" stroke="#000" stroke-width="7"/>
</g>
<text>?</text>
</switch>
</svg>
Animated SVG
This preview isn't animated. To see the original SVG, look here.
To see the animations, you need an SVG animation capable browser or viewer.
See also
Very accurate PNG versions can be compared:
- Svg example1.png ~ Svg example1.svg
- Svg example2.png ~ Svg example2.svg
- Svg example3.png ~ Svg example3.svg
- Svg example4.png ~ Svg example4.svg
- Svg example5.png ~ Svg example5.svg
- Svg example6.svg ~ Svg example7.svg
- Help:SVG
- Einführung_in_SVG (german introduction for beginners)