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

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>

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>

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>

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

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

more advanced example:

SVG Test TextAlign.svg

Multilingial files

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>
    <g transform="translate(30,110)" fill="red">
        <switch allowReorder="yes">
            <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>
    </g>
</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: