SVG

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorbildformat. Statt Pixel zu speichern, speichert SVG Anweisungen: „zeichne einen Kreis mit Radius 50 bei (100, 100), Füllung Blau“. Der Browser rastert zur Anzeigezeit, sodass dieselbe Datei in jeder Größe von 16×16 bis zur 4K-Plakatwand gestochen scharf aussieht.

Eigenschaften:

• Auflösungsunabhängig — dieselbe Datei für Retina- und Standard-Displays.
• Winzige Dateigrößen für einfache Formen — ein typisches Icon liegt bei 500 Byte bis 5 KB. Schlägt jedes Rasterformat bei gleichem Inhalt in der Größe.
• Als Text editierbar — in jedem Editor öffnen, die Pfaddaten anpassen, speichern. Keine proprietären Werkzeuge nötig.
• Per CSS gestaltbar — Füllung, Kontur und Transformation können aus externem CSS kommen.
• Animierbar über CSS-Übergänge und SMIL (wobei SMIL zugunsten von CSS + WAAPI abgekündigt wird).

Wo SVG gewinnt: Logos, Icons, Illustrationen, Diagramme, Datenvisualisierungen. Wo es verliert: Fotos (keine effiziente Möglichkeit, Millionen subtil verschiedener Pixel als Vektoren darzustellen), komplexe Verläufe (Dateigröße explodiert), 3D-Rendering (nutzen Sie Canvas/WebGL).

Inline-SVG (im HTML eingebettet) ist die moderne Best Practice für Icons — keine separate Anfrage, per CSS gestaltbar, über aria-label barrierefrei. Externes SVG (in einer separaten Datei) ist für weniger kritische Assets in Ordnung.

Die XSS-Angriffsfläche, vor der niemand warnt: SVG ist XML und kann <script>-Tags enthalten. Ein SVG, das in ein Forum, als Profilbild oder in ein CMS hochgeladen wird, wird zu einem Vektor für beliebige Codeausführung, wenn es mit Content-Type: image/svg+xml von derselben Origin wie die Anwendung ausgeliefert wird. Die Gegenmaßnahme ist, von Nutzern hochgeladene SVGs zu bereinigen (DOMPurify funktioniert) oder sie von einer Sandbox-Origin auszuliefern (img.example.com statt example.com). Manche Hosts rastern hochgeladene SVGs beim Upload einfach zu PNG, um das Risiko vollständig zu beseitigen.

SVG-Dateigröße optimieren: SVGO ist das Standard-Kommandozeilenwerkzeug — es führt ~40 Plugins aus, die Metadaten entfernen, Pfade vereinfachen, Transformationen zusammenführen und die numerische Präzision runden. Typische Einsparungen bei Sketch-/Figma-Exporten liegen bei 50–80 %, gelegentlich über 95 % bei Designs mit vielen versteckten Ebenen und Editor-Metadaten. Das komprimierte SVG lässt sich auch gut per gzip komprimieren (Textinhalt), sodass ein 5-KB-SVG auf der Leitung oft unter 1 KB endet. Quelle: W3C — Scalable Vector Graphics (SVG) 2.

Durchgerechnetes Beispiel

Ein rundes „X“-Schließen-Icon in SVG: <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> — das sind ~150 Byte unkomprimiert, ~80 Byte gzippt, und es wird bei 16 px, 24 px, 48 px oder als 2-Meter-Vinylaufkleber identisch dargestellt. Das entsprechende PNG bei 1x ist ~400 Byte; bei 2x Retina ~1 KB; bei 3x ~1,8 KB; jeweils eine separate Datei. Das currentColor-Attribut des SVG lässt ein einziges Icon die Textfarbe für Hover-Zustände erben, ohne zwei Bilddateien zu erzeugen. Betrachten Sie nun ein SVG mit komplexem Verlaufsnetz und 5.000 Pfadknoten (eine detaillierte, aus Illustrator exportierte Illustration): Die Datei bläht sich auf ~400 KB auf, und das Rastern zur Zeichenzeit kostet messbar CPU pro Frame. An diesem Punkt ist ein 25-KB-WebP die bessere Wahl — Vektor gewinnt bei einfacher Geometrie, Raster gewinnt bei Komplexität.

Wann und warum es zählt

Die richtige Formatwahl verändert Seitengewicht und Rendering-Performance um Größenordnungen. Verwenden Sie SVG für: Logos (auflösungsunabhängig über Breakpoints), monochrome Icons (Sprite oder Inline), einfache Diagramme und Infografiken (D3 erzeugt SVG) und jedes Bild, das per CSS gestaltet werden muss (themenfähige Icons). Verwenden Sie Raster (PNG/WebP/AVIF) für: Fotos, Screenshots, Verläufe mit vielen Farbstopps und jedes Bild mit mehr visueller Komplexität, als ein Designer bereit ist, in Pfadbefehlen auszudrücken. Der unterschätzte Vorteil von SVG ist Barrierefreiheit: Ein gut ausgezeichnetes SVG mit <title>- und <desc>-Elementen ist auf eine Weise screenreaderfreundlich, wie es kein Rasterbild ohne separaten alt-Text sein kann. Quelle: MDN — SVG.