Einstieg Vektorgrafik

Die Rastergrafiken hast du bereits kennen gelernt. Neben den Rastergrafiken gibt es noch ein weiteres Grafikformat: die Vektorgrafiken.

Rastergrafiken bestehen aus Bildpunkten (Pixel)Vektorgrafiken bestehen aus Objekten wie Linien, Kreisen, Polygonen oder Pfaden.

Jede Rastergrafik besteht aus kleinen Bildpunkten, den Pixeln. Je näher man an eine Rastergrafik heranzoomt, desto größer werden die Pixel und desto unschärfer wird die Rastergrafik.

1. Aufgabe:

  • Lade aus dem Internet ein beliebiges Bild herunter.
  • Öffne das Bild und zoome ganz nah ans Bild, bis du die einzelnen Bildpunkte/Pixel siehst.
  • Du kannst auch den Smiley als PNG Bild im Browser öffnen.

Bei der Vektorgrafik ist das anders. Hier kann das Bild unendlich vergrößert werden, ohne, dass man einen Pixel erkennen kann und somit wird die Grafik auch nie unscharf.

2. Aufgabe:

  • Öffne den Smiley als SVG Bild und zoome mit Hilfe des Browsers ganz nah heran.
  • Was stellst du fest?
Rastergrafik links und SVG rechts – 100% Größe
Rastergrafik links und SVG rechts – 500% Größe

Die meisten Vektorgrafiken sind im SVG (scaleable vector graphics = skalierbare Vektorgrafik) Format und haben die Endung .svg -> z.B.: Smiley.svg

Vektorgrafiken bestehen aus einfachen Formen, die zusammengefügt aber auch komplexe Bilder ergeben können:

Bäume und Berg – Vektorgrafik
Vergrößerung des Bildes und Selektion einer Form

Das Bild von den Bäumen und dem Berg wurde aus folgenden einfachen Grundformen erstellt:

GrundformBeispiel
Pfad
Kreis
Ellipse
Rechteck
Linie
Polygon
Text

Vektorgrafiken werden im SVG (Scaleable Vector Grafics) Format gespeichert, welches die Formen mathematisch beschreibt. Das Rechteck wird zum Beispiel anhand dieses Codes beschrieben:

<svg xmlns="http://www.w3.org/2000/svg">
	<rect x="10.3" y="45.1" width="62.5" height="36.7"/>
</svg>
CodeBeschreibung
<svg>Start des SVG Codes
<rectbedeutet, dass es sich um die Form Rechteck handelt
x=“10.3″die x Koordinate des Ausgangspunktes des Rechtecks
y=“45.1″die y Koordinate des Ausgangspunktes des Rechtecks
width=“62.5″Breite des Rechtecks
height=“36.7″Höhe des Rechtecks
/>Ende des Rechteck Ausdrucks
</svg>Ende des SVG Codes

3. Aufgabe

  • Was für Werte müsste man bei dem Beispiel vom Rechteck ändern, um ein Quadrat zu bekommen?

Das ist der Code der oben angezeigten Grundformen:

<svg>
	<rect x="10.3" y="45.1" width="62.5" height="36.7"/>
	<circle cx="140.1" cy="78.4" r="18.1"/>
	<ellipse class="st0" cx="135.2" cy="120.5" rx="25.7" ry="11.6"/>
	<polygon points="69.5,187.9 137,187.9 140.5,160 85.3,156 "/>
	<text transform="matrix(1 0 0 1 93.7381 41.0092)">Lorem ipsum</text>
	<path d="M20.7,143.3c0,0,3.7-23.7,34.7-15.6s25.1-24.1,25.1-24.1"/>
	<line x1="19.4" y1="171.2" x2="63.3" y2="160.6"/>
</svg>

Hier siehst du schon, dass der SVG Code immer länger und komplexer wird. Der SVG Code der Bäume und Berg Vektorgrafik hat insgesamt fast 5000 Zeilen Code:

https://gist.github.com/Sulkar/56a8e94f6214f2ad1a7bc62654f319f6

Damit man den SVG Code nicht per Hand schreiben muss um ein Bild zu erstellen gibt es verschiedene Grafikprogramme, mit denen man Vektorgrafiken „zeichnen“ kann.

Dennoch kann man mit Hilfe der oben genannten einfachen Formen, aus denen Vektorgrafiken bestehen, zum Beispiel kein fotorealistisches Bild modellieren:

Rastergrafik eines Hundes

Besonders bei der Erstellung von Illustrationen, Grafiken und Logos kommen Vektorgrafiken zum Einsatz. Will man sehr realistische und detaillierte Bilder, nutzt man statt der Vektorgrafik eine Rastergrafik.

4. Aufgabe

  • Zeichne mit Hilfe der Grundformen ein eigenes Logo auf ein Blatt Papier.

Links