SVG examples

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search

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 archive copy or codepen.io (use html for svg) archive copy.

Lime-green rectangle

Svg example1.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" 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

Svg example2.svg 

<?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

Svg example3.svg 

<?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

A sample of the transparent rectangle.svg 

<?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

Svg example3b.svg 

<?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

Svg example4.svg 

<?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

Svg example5.svg 

<?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

Blue oval.svg 

<?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

Svg exsample6.svg Svg example6.svg Svg example6s.svg
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

SVG example7.svg 

<?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

Example text.Svg 

<?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:

SVG Test TextAlign.svg

Multilingual files

Using the switch element:
SystemLanguage.svgSystemLanguage.svgSystemLanguage.svgSystemLanguage.svgSystemLanguage.svgSystemLanguage.svgSystemLanguage.svgSystemLanguage.svgSystemLanguage.svg 

<?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>


Unicode Geschlechtersymbole.svgUnicode Geschlechtersymbole.svgUnicode Geschlechtersymbole.svgUnicode Geschlechtersymbole.svgUnicode Geschlechtersymbole.svgUnicode Geschlechtersymbole.svgUnicode Geschlechtersymbole.svgUnicode Geschlechtersymbole.svgUnicode Geschlechtersymbole.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. Trajans-Column-lower-animated.svg

See also

Very accurate PNG versions can be compared:

Retrieved from "https://commons.wikimedia.org/w/index.php?title=SVG_examples&oldid=714201191"