SVG ist …

• eine XML-basierte Auszeichnungssprache zur Beschreibung zweidimensionaler Vektorgrafiken.
• ein offener Webstandard des W3C.
• wahlweise
  • statisch
  • animiert
  • interaktiv

[ berühmter Tiger, Quelle(Mozilla)]

Quellcode

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    circle:hover {fill-opacity:0.9;}
  </style>
  <g style="fill-opacity:0.7;" stroke="black" stroke-width="4">
    <circle cx="250" cy="120" r="100" fill="red" />
    <circle cx="320" cy="220" r="100" fill="blue" />
    <circle cx="180" cy="220" r="100" fill="green" />
  </g>
</svg>

<?xml version="1.0"?>  
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="[breite]" height="[höhe]">        
  <title>Titeltext</title>
  <desc>Textuelle Bildbeschreibung (optional)</desc>
  <defs>Stylesheets, Definitionen, Skripte</defs>
  <!-- Grafische Elemente -->
</svg>

• Das SVG Koordinatensystem ist ein linkshändiges System, bei dem die y-Achse nach "unten" weist.
• Der Grafikbereich (canvas) ist unbegrenzt.
• Breite und Höhe des Ausgabefensters (viewport) werden im svg Wurzelelement spezifiziert.
• Alternativ zu Höhen- und Breitenangabe kann ein Ausgabefenster mittels einer viewbox definiert werden.

Ausgabefenster mittels Höhe und Breite

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="[breite]" height="[höhe]">        

Ausgabefenster mittels viewbox

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewbox="[xmin ymin width height]">        

Quellcode

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="-50 -50 400 300">

  <rect x="50" y="50" width="250" height="150" stroke="blue" fill="gray"/>
  <circle cx="100" cy="120" r="80" stroke="black" fill="lightgreen"/>
  <line x1="0" y1="150" x2="250" y2="0" stroke="red" stroke-width="15"/>
</svg>

• line
• circle
• ellipse
• rect
• polyline
• polygon
• path

Syntax

<line x1="[xstart]" 
      y1="[ystart]" 
      x2="[xend]" 
      y2="[yend]" 
      [presentation-attributes]/>

Syntax

<circle cx="[center-x]" 
        cy="[center-y]" 
        r="[radius]" 
        [presentation-attributes]/>

Syntax

<ellipse cx="[center-x]" 
         cy="[center-y]" 
         rx="[radius-x]" 
         ry="[radius-y]" 
        [presentation-attributes]/>

Syntax

<rect x="[upper-left-x]" 
      y="[uper-left-y]" 
      width="[width]" 
      height="[height]" 
      rx="[radius-x]" 
      ry="[radius-y]"
      [presentation-attributes]/>

Syntax

<polygon points="[coordinate-pairs]" 
         [presentation-attributes]/>
<polyline points="[coordinate-pairs]" 
          [presentation-attributes]/>

Syntax

<image x="[upper-left-x]" 
       y="[upper-left-y]"
       width="[width]" 
       height="[height]" 
       xlink:href="[image-uri]" />

Syntax

<text x="[base-x]" 
       y="[base-y]"
       font-size="[size]" 
       font-weight="[size]" 
       font-style="[style]" 
       text-decoration="[decoration]"
       text-anchor="[start|middle|end]"
       [presentation-attributes]>text content</text>

Syntax

<path d="[list-of-path-commands]" 
      [presentation-attributes]>text content</text>

Example

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="300" viewBox="-50 -50 400 300">
  <defs>
    <g id="smiley">
      <circle cx="0" cy="0" r="40" stroke="black" />
      <circle cx="-15" cy="-15" r="10" fill="black" />
      <circle cx="15" cy="-15" r="10" fill="black" />
      <path d="M -30,0 A 60,60,0,0,0,30,0" stroke="black" fill="none" />
    </g>
  </defs>

  <use x="50" y="50" xlink:href="#smiley" stroke-width="5" fill="yellow"/>
  <use x="150" y="50" xlink:href="#smiley" stroke-width="5" fill="orange"/>
  <use x="250" y="50" xlink:href="#smiley" stroke-width="10" fill="yellow"/>
  <use xlink:href="#smiley" stroke-width="5" fill="yellow"   transform="translate(50,150) scale(0.5,1)"/>
  <use xlink:href="#smiley" stroke-width="5" fill="orange" transform="translate(150,150) rotate(30)"/>
  <use xlink:href="#smiley" stroke-width="10" fill="yellow" transform="translate(250,150) skewX(30)"/>
</svg>