Scalable Vecor Graphics in Browser HTML - a short Introduction

SVG - Teil 1

Da gibt es doch für LaTex immer diese "not so short Introduction". Eigentlich habe ich mal so etwas für SVG gesucht. Nicht gefunden. Da machen wir uns das einfach mal selber:

Zeichenbereich

Aussen muss erst mal ein Rahmen definiert werden. Damit der Browser dann auch den Rest interpretieren kann:

<svg>...</svg>

na, das ist vielleicht ein bißchen wenig, also noch die Größe angeben...

<svg width="420" height="120">...</svg>

Das ist dann der eingeräumte Platz im Browser. Wir können dann natürlich auch noch angeben, wie da ein Koordinatensystem drin abgebildet ist, die viewBox:

<svg width="420" height="120" viewBox="0 0 500 500" >...</svg>

Da sind zwar nur 420 x 120 Pixel im Browser reserviert, aber auf diese wird ein Koordinatensystem 0,0 bis 500,500 gelegt.

Elemente

In diesem SVG Bereich können wir nun Grafiken erzeugen wie wir wollen.
Zeichenelemente

Rechteck

<rect x="210" y="10" width="90" height="40" rx="5" ry="10"

    fill="none" stroke="black" />

Hier haben wir ein Rechteck an der Position x,y in der Größe width und height mit abgerundeten Ecken (unterschiedlich) ohne Füllung und mit schwarzem Rand.
Man kann auch noch die Stärke des Randes mit dem Parameter stroke-width angeben.

Kreis

<circle cx="230" cy="67" r="14" fill="white" stroke="black" />

Ellipse

<ellipse cx="200" cy="50" rx="20" ry="40" style="fill:green;" />

Linien

 <line x1="90" y1="150" x2="310" y2="150"
style="stroke:black; stroke-width:2px;" 

Polylinien

<polyline fill="lightgray" stroke="red" stroke-width="5px"
    points="400 10, 120 10, 200 80, 280 20, 300 20
            220 100, 300 180, 280 180, 200 120, 120 180, 100 180
            180 100, 80 10, 10 10, 10 200, 400 200" />

Polygone

<polygon fill="yellow" stroke="none"
    points="350 75, 379 161, 469 161, 397 215,
            423 301, 350 250, 277 301, 303 215,
            231 161, 321 161" 

    transform="scale(.5)"

Hier wird zusätzlich noch ein transform Parameter mit angegeben.

Formattierung

Style

<rect x="50" y="50" width="125" height="100"
    style="fill:yellow; stroke:black; stroke-width:.1cm;" />
  <rect x="225" y="50" width="125" height="100"
    style="fill:yellow; stroke:black; stroke-width:.1cm;" />

  <!-- ein überlappender Kreis mit Transparenz -->
  <circle cx="200" cy="100" r="95"
    style="fill:blue; stroke:black; opacity:.4;" />

Styles können direkt im Element angegeben werden.

Globale Formattierung

<STYLE>
rect {fill:yellow; stroke:black; stroke-width:.1cm;}

.blauTransparent {fill:blue; stroke:black; opacity:.4;}

</STYLE>

...

<!-- zwei gleich angemalte Rechtecke -->
  <rect x="50" y="50" width="125" height="100" />
  <rect x="225" y="50" width="125" height="100" />

<!-- ein überlappender Kreis mit Transparenz -->
  <circle cx="200" cy="100" r="95" class="blauTransparent" />

Hyperlinks

<a xlink:href="webseite.html"
     xlink:title="Verweis zu einer HTML-Seite">
    <rect x="10" y="10" ry="5" width="40" height="40"
    style="fill:limegreen; stroke:black;" />
  </a>

Hyperlinks können verschiedene Graphikelemente inkludieren.

Gruppierungen

<g stroke="red">
    <rect x="140" y="20" width="120" height="110"
      rx="10" ry="5"
      fill="none" stroke-width="1.5" />
    <rect x="270" y="20" width="120" height="110"
      style="fill:#efefef;" />
  </g>

Elemente können gruppiert werden und in de Gruppe "lokale" Attribute erhalten.