Raster vs. Vektor
Es gibt mehr als ein paar Bilddateiformate, die heute im Web verwendet werden und die wir in zwei Kategorien einteilen können: Rastergrafiken und Vektorgrafiken.
Sie sind wahrscheinlich mit den gängigen Formaten PNG und JPEG vertraut. Dies sind Raster-Grafikformate, was bedeutet, dass sie Bildinformationen in einem Raster aus farbigen Quadraten, auch Bitmap genannt, speichern. Die Quadrate in dieser Bitmap fügen sich zu einem zusammenhängenden Bild zusammen, ähnlich wie Pixel auf einem Computerbildschirm.
Rastergrafiken eignen sich gut für sehr detaillierte Bilder wie Fotos, bei denen die genaue Farbe jedes Pixels angegeben werden muss. Rasterbilder haben eine feste Auflösung, sodass eine Vergrößerung die Qualität des Bildes verringert.
Vektorgrafikformate - wie SVG und PDF - funktionieren anders. Diese Formate speichern Bilder als eine Menge von Punkten und Linien zwischen den Punkten. Mathematische Formeln diktieren die Platzierung und Form dieser Punkte und Linien und behalten ihre räumlichen Beziehungen bei, wenn das Bild vergrößert oder verkleinert wird. Vektorgrafikdateien speichern auch Farbinformationen und können sogar Text anzeigen.
Wie SVG-Dateien funktionieren
SVG-Dateien sind in XML geschrieben, einer Auszeichnungssprache, die zum Speichern und Übertragen von digitalen Informationen verwendet wird. Der XML-Code in einer SVG-Datei gibt alle Formen, Farben und den Text an, aus denen das Bild besteht.
Wenn eine SVG-Füllung bereitgestellt wird, nimmt ein Webbrowser (oder eine andere Anwendung) diese XML-Informationen auf, verarbeitet sie und zeigt sie auf dem Bildschirm als Vektorgrafik an. Alle modernen Browser können SVGs auf diese Weise darstellen, ebenso wie spezielle Grafikbearbeitungsprogramme.
Vorteile von SVG-Dateien
XML-Code ist nicht nur hübsch anzusehen - er macht SVG-Dateien sehr leistungsfähig und praktisch für Website- und Web-Anwendungen.
- Unendliche Skalierbarkeit
- Anpassung
- Skripting-Kompatibilität
- Barrierefreiheit und Suchmaschinen-Optimierung
- Kleinere Dateigrößen
Wofür werden SVG-Dateien verwendet?
SVG-Dateien eignen sich am besten für Bilder, die weniger Details enthalten als ein Foto. Einige der häufigsten Verwendungen von SVGs online:
- Icons
- Logos
- Illustrationen
- Animationen und Oberflächenelemente
- Infografiken und Datenvisualisierungen
Entwerfen für Skalierung
Skalierbare Vektorgrafiken sind in vielen verschiedenen Szenarien nützlich. Sie sind vielseitig, interaktiv und lassen sich mit einem Grafikeditor und ein wenig Design-Know-how leicht erstellen. Mit SVGs in Ihrem Webdesign-Werkzeuggürtel müssen Sie sich nie wieder Gedanken über unscharfe Grafiken machen - zumindest nicht für Ihre einfachen Bilder. Für Fotos sollten Sie bei PNGs und JPEGs bleiben.