Startseite Skripte für das Wintersemester 2018/19 Webdesign CSS Grundlagen Bildformate Web-Dateiformate (vektorbasiert): SVG


Web-Dateiformate (vektorbasiert): SVG

Scalable Vector Graphics

Eines der wesentlichen Merkmale und Vorteile gegenüber der Rastergrafik ist die stufenlose und verlustfreie Skalierbarkeit.

Vektorgrafiken basieren anders als Rastergrafiken nicht auf einem Pixelraster, in dem jedem Bildpunkt ein Farbwert zugeordnet ist, sondern auf einer Bildbeschreibung, die die Objekte, aus denen das Bild aufgebaut ist, exakt definiert.

So kann beispielsweise ein Kreis in einer Vektorgrafik über Lage des Mittelpunktes, Radius, Linienstärke und Farbe vollständig beschrieben werden; nur diese Parameter werden gespeichert.

Im Vergleich zu Rastergrafiken lassen sich Vektorgrafiken daher oft mit deutlich geringerem Platzbedarf speichern.

Moderne Browser können Vektorgrafiken sehr gut darstellen, wenn man diese als SVG-Dateien abspeichert! Dies kann z.B. der Illustrator …

HTML

<img src="pix/demo-bild.svg" alt="demo bild">

<!-- wenn Ihr die Größe des Bildes anpassen möchtet -->
<img src="pix/demo-bild.svg" alt="demo bild" width="400" height="300">