[edit] [comment] [remove] |2007-06-20| e1 # Was is SVG ?

SVG ist …

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

[edit] [comment] [remove] |2007-06-20| e2 # SVG Beispiel

 

[ berühmter Tiger, Quelle(Mozilla)]

 

[edit] [comment] [remove] |2007-06-20| e3 # SVG Beispiel (2)

 

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>
 

[edit] [comment] [remove] |2007-06-20| e4 # SVG Grundgerüst 

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

[edit] [comment] [remove] |2007-06-20| e5 # SVG Koordinatensystem

 

  • 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]">
 

[edit] [comment] [remove] |2007-06-20| e6 # Grafikaufbau ... Painters Model

 

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>
 

[edit] [comment] [remove] |2007-06-20| e7 # Grundlegende Geometrieelemente

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

[edit] [comment] [remove] |2007-06-20| e8 # line

 

Syntax 

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

[edit] [comment] [remove] |2007-06-20| e9 # circle

 

Syntax 

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

[edit] [comment] [remove] |2007-06-20| e10 # ellipse

 

Syntax 

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

[edit] [comment] [remove] |2007-06-20| e11 # rect

 

Syntax 

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

[edit] [comment] [remove] |2007-06-20| e12 # polygon, polyline

 

Syntax 

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

[edit] [comment] [remove] |2007-06-20| e13 # image

 

Syntax 

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

[edit] [comment] [remove] |2007-06-20| e14 # text

 

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>
 

[edit] [comment] [remove] |2007-06-20| e15 # path

 

Syntax 

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

[edit] [comment] [remove] |2007-06-20| e16 # presentation attributes

 

Attribut Werte Default Bedeutung
stroke [Name|\#rgb-Wert|rgb(r,b,g)|none|inherit] none Strichfarbe
stroke-width [Länge|inherit] 1 Linienweite
stroke-opacity [0.0 - 1.0] 1 Linienopazität
stroke-linecap [butt|round|square|inherit] butt Linenabschluss
stroke-linejoin [miter|round|bevel|inherit] miter Eckenrundung
stroke-dasharray [dasharray|none|inherit] none Liste von Längenangaben definiert als Muster abwechselnd die Länge von Strichen und Lücken (durch Kommata getrennt)
stroke-dashoffset [Länge|inherit] 0 Anfangswert (Offset) des Strichmusters
fill [Name|#rgb-Wert|rgb(r,b,g)|none|inherit] black Füllfarbe
fill-opacity [0.0 - 1.0] 1 Füllopazität
fill-rule [nonzero|evenodd|inherit] nonzero Füll-Intransparenz
 

[edit] [comment] [remove] |2007-06-20| e17 # group

 

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>