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?

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:

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

Grundform	Beispiel
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>

Code	Beschreibung
<svg>	Start des SVG Codes
<rect	bedeutet, 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:

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:

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

• Bild Vektor Baum erstellt von upklyak – de.freepik.com
• Bild Hund von PublicDomainPictures auf Pixabay
• Sulkar.org einfacher online Vektorgrafikeditor