SVG examples

From Wikimedia Commons, the free media repository

Jump to: navigation, search

Examples of SVG (Scalable Vector Graphics)

Contents

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

[edit] Example #2 - 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" version="1.1"
      width="236" height="120" viewBox="0 0 236 120">
  <rect x="14" y="23" width="200" height="50" fill="#55FF55"
      stroke="black" stroke-width="1" />
</svg>

[edit] Example #3 - 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>

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

[edit] Example #5 - 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>

[edit] Example #6 - multiple grayscales

Svg exsample6.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="5"
         height="1" y="4"/>
</svg>

[edit] Example #7 - animated SVG

Trajans-Column-lower-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.

[edit] See also

Very accurate PNG versions can be found at:

Retrieved from "http://commons.wikimedia.org/wiki/SVG_examples"