Rastergrafik vs. Vektorgrafik
Bilder lassen sich in zwei Kategorien einteilen:
- Rastergrafiken (JPEG/PNG/WebP): aus Pixeln bestehend, werden ab einer bestimmten Vergrößerung unscharf und pixelig
- Vektorgrafiken (SVG): durch mathematische Pfade beschrieben, bei jeder Vergrößerung scharf
Wer diesen wesentlichen Unterschied versteht, weiß, wofür SVG geeignet ist.
Hauptvorteile von SVG
Unendliche Skalierung ohne Verlust
SVG beschreibt Grafiken durch Pfade, Kurven und Formen, nicht durch Pixel. Auf jede Größe vergrößert bleibt es scharf, ohne Pixelbildung. Das ist der größte Vorteil von SVG, besonders geeignet für Icons und Logos, die in mehreren Größen benötigt werden.
Geringe Größe (bei einfachen Grafiken)
Für einfache Icons und Logos ist die SVG-Datei deutlich kleiner als das entsprechende PNG. Ein schlichtes Logo als PNG kann einige KB bis einige zig KB wiegen, als SVG nur 1 bis 2 KB. Für komplexe fotobasierte Bilder ist SVG jedoch ungeeignet.
Per Code bearbeitbar
SVG ist im Wesentlichen XML-Text, direkt mit einem Texteditor in Farbe, Form und Text änderbar. Das Frontend kann die Farbe per CSS steuern und dynamisch per JS ändern, was Rastergrafiken nicht ermöglichen.
Animationen unterstützt
SVG unterstützt eingebaute Animationen sowie CSS-/JS-Animationen. Lade-Animationen und Icon-Effekte mit SVG sind leicht und flüssig.
Durchsuchbar und indizierbar
Text in SVG ist echter Text, von Suchmaschinen indizierbar und von Barrierefreiheits-Lesegeräten lesbar, freundlicher als Text in einem Bild.
Wofür SVG geeignet ist
- Icons: Navigations-Icons, Funktions-Icons, erste Wahl im UI-Design
- Logos: Markenlogos benötigen mehrere Größen, Vektorgrafik ist am besten geeignet
- Illustrationen: Flat-Design-Illustrationen, dekorative Grafiken
- Diagramme: Datenvisualisierungs-Diagramme als Vektorgrafik bleiben bei jeder Skalierung scharf
- Icon-Schriftarten: Icon-Schriftarten sind im Wesentlichen SVG
Wofür SVG nicht geeignet ist
- Fotos: Fotos sind farb- und detailreich, als Vektor beschreiben bläht die Größe auf und verliert an Treue. Für Fotos JPEG/WebP verwenden
- Komplexe Verläufe und Texturen: übermäßig komplexe Verläufe und Texturen vergrößern das SVG, weniger effizient als Rastergrafik
- Filtereffekte nötig: komplexe Filtereffekte sind in Rastergrafiken effizienter
Grenzen von SVG
Randprobleme bei der Kompatibilität
Moderne Browser unterstützen SVG vollständig, aber einige ältere Umgebungen und manche E-Mail-Clients kommen damit nicht zurecht. In wichtigen Fällen testen.
Komplexe Bilder werden größer
Fotos als SVG konvertiert werden extrem groß und untreu. SVG ist nicht universell, es eignet sich nur für Vektorgrafiken.
Lernkurve
SVG zu entwerfen erfordert Vektorzeichenfähigkeiten, anders als Rastergrafiken, die man fotografieren kann. Doch vorhandene SVG-Ressourcen oder ein Raster-zu-SVG-Tool senken die Einstiegshürde.
Rastergrafik in SVG konvertieren
Die Konvertierung einer Rastergrafik (wie PNG) in SVG ist ein „Nachzeichnen“-Prozess — das Tool identifiziert die Formkonturen im Bild und generiert einen approximativen Vektorpfad.
Verwenden Sie das Bild-zu-SVG-Tool:
- Rastergrafik hochladen (einfache, hochkontrastige Grafik empfohlen, z. B. ein Logo)
- Das Tool zeichnet nach und generiert das SVG
- SVG herunterladen
Hinweise zur Konvertierung
- Einfache Grafiken (Logos, Icons) liefern als SVG gute Ergebnisse
- Fotos und komplexe Bilder als SVG verlieren an Treue und blähen auf, nicht empfohlen
- Nach der Konvertierung Kanten auf Glätte und Farben auf Genauigkeit prüfen
- Das fertige SVG kann mit einem Texteditor weiter optimiert werden
SVG-Verwendungstipps
Inline in HTML einbetten
Kleine SVGs direkt inline in HTML einbetten, spart HTTP-Anfragen und bleibt per CSS steuerbar.
currentColor für Icons verwenden
Icon-SVGs mit currentColor gefüllt ändern die Farbe per CSS über color, ein Icon-Set mehrfarbig wiederverwendbar.
SVG komprimieren
SVG ist Text, per Tool komprimierbar (Kommentare entfernen, Pfade vereinfachen). Vor der Veröffentlichung komprimieren, um die Größe zu reduzieren.
Zusammenfassung
SVG beruht auf „Vektor, skalierbar, bearbeitbar“. Icons, Logos, Illustrationen und Diagramme sind am besten als SVG, Fotos als Rastergrafik. Die Raster-zu-SVG-Konvertierung eignet sich für einfache Grafiken. Das DocsAll-SVG-Konvertierungstool verarbeitet im Browser und wandelt ein Rasterlogo mit einem Klick in eine Vektorgrafik um, praktisch für späere Mehrgrößenverwendung.