SVG examples

Examples of SVG (Scalable Vector Graphics)

Example #1 - Green 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" version="1.1"
      width="120" height="120" viewBox="0 0 236 120">
  <rect x="14" y="23" width="250" height="50" fill="green"
      stroke="black" stroke-width="1" />
</svg>

Example #2 - 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="137" y="14" width="500" height="200" rx="50" ry="100"
      fill="none" stroke="blue" stroke-width="10" />
</svg>

Example #3 - 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="450" 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>

Example #4 - 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="200" height="200">
  <circle cx="100" cy="100" r="50" stroke="black"
    stroke-width="5" fill="red" />
</svg>

Example #5 - 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>

Example #6 - multiple grayscales

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

Example #7 - Pentagramm

<?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:#B00;stroke-width:4;stroke-linejoin:round"/>
</svg>

See also: Das Pentagramm als manuelle SVG-Grafik (de) Eine Anleitung

Example #8 - 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