Das SVG-Format
Überhaupt keine Pixel – Anweisungen zum Zeichnen von Formen, damit es in jeder Größe scharf bleibt.
Was ist SVG?
SVG ist ein XML-basiertes Vektorformat. Anstatt ein Pixelraster zu speichern, speichert es Geometrie: Pfade, Kreise, Farbverläufe, Text. Der Browser rendert dies in jeder benötigten Größe, sodass ein SVG-Logo auf einem Telefon und auf einer Werbetafel gleichermaßen scharf ist.
Für flache, geometrische Kunstwerke ist es auch winzig. Ein Logo, das als PNG 40 KB groß wäre, ist als SVG oft 2 KB groß und benötigt nur eine Datei statt einer pro Pixeldichte.
Da es sich um XML handelt, kann SVG Skripte, externe Referenzen und eingebettete Stile enthalten. Das macht es zu wirklich aktivem Inhalt, und ein SVG aus einer nicht vertrauenswürdigen Quelle sollte mit der gleichen Vorsicht behandelt werden wie eine HTML-Datei – deshalb injiziert KaiConvert niemals beliebige SVG-Markups in die Seite.
Häufige Verwendungen
- Logos, Icons und Interface-Grafiken
- Diagramme und Datenvisualisierung
- Illustrationen und Strichzeichnungen, die skaliert werden müssen
- Alles, was in jeder Dichte gestochen scharf gerendert werden muss
Vorteile
- Auflösungsunabhängig – scharf in jeder Größe
- Sehr kleine Dateien für geometrische Kunstwerke
- Mit CSS gestaltbar und animierbar
- Text innerhalb eines SVG bleibt echter, auswählbarer Text
Einschränkungen
- Ungeeignet für Fotos
- Komplexe Illustrationen können langsam gerendert werden
- Kann Skripte enthalten, daher sind nicht vertrauenswürdige SVGs ein Sicherheitsrisiko
- Das Rendering kann bei erweiterten Funktionen zwischen den Engines subtil variieren
Browser-Unterstützung
Universell für das Rendering. KaiConvert behandelt hochgeladene SVGs als nicht vertrauenswürdig: Sie werden in einem sandboxed Image-Element gerastert, anstatt in das DOM eingebettet zu werden, sodass eingebettete Skripte niemals ausgeführt werden.