SVG examples

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

Examples of SVG (Scalable Vector Graphics)

Basic shape examples

Lime-green rectangle

Svg example1.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" version="1.1"
      width="120" height="120" viewBox="0 0 236 120">
  <rect x="14" y="23" width="200" height="7" fill="lime"
      stroke="black" stroke-width="1" />
</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>

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

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

Marker

The presentation of markers is in different viewers implemented differently. The origin point varies. Inkscape shows the boundaries incorrectly.

Code of 3) use the translate attribute.

<circle id="circle3" transform="translate(20, 20)" stroke="rgb(0%, 70%, 0%)" cx="0" cy="0" r="20"/>
<marker id="marker3" refX="20" refY="20" viewBox="0 0 40 40"
    markerUnits="userSpaceOnUse" markerWidth="40" markerHeight="40">
  <use xlink:href="#circle3"/>  
</marker> 
<line x1="130" x2="270" y1="180" y2="180" marker-start="url(#marker3)" marker-end="url(#marker3)"/>
</svg>

See also

Very accurate PNG versions can be compared: