SVG-Dateiformat
Ein SVG ist kein Bild, sondern eine Folge von Zeichenanweisungen in XML — deshalb bleibt es in jeder Größe messerscharf und lässt sich im Texteditor bearbeiten.
oder hierher ziehen · Bilder, Video, Audio und Dokumente · bis zu 2 GB
Was ist SVG?
SVG wurde 2001 zur W3C-Empfehlung und ist unter der Haube reiner Text. Statt eines Pixelrasters speichert es Formen: dieser Pfad, diese Linienstärke, diese Füllfarbe, diese Koordinaten. Der Browser führt diese Anweisungen in der Größe aus, die das Layout verlangt, ein Logo als SVG ist deshalb auf dem Telefon, auf einem 5K-Display und auf einem gedruckten Plakat gleich gestochen scharf — aus denselben wenigen Kilobyte.
Text zu sein hat Folgen über die Skalierung hinaus. Ein SVG zeigt in Git saubere Unterschiede, Designänderungen sind also Zeile für Zeile prüfbar. Seine Elemente lassen sich per CSS gestalten und wie jeder andere DOM-Knoten mit JavaScript animieren oder verändern. Und es komprimiert mit gzip so gut, dass ein komplexer Symbolsatz oft weniger Bandbreite kostet als ein einzelnes PNG-Sprite.
Dieselbe Offenheit ist ein Sicherheitsthema. Weil SVG <script>-Elemente, externe Verweise und Ereignishandler enthalten kann, wird eine von Nutzern hochgeladene und von Ihrer Domain ausgelieferte Datei zum Vektor für Cross-Site-Scripting. Alles von außen sollte bereinigt oder von einem separaten Origin ausgeliefert werden — eine Vorsichtsmaßnahme, die kein Rasterformat verlangt.
| Endung | .svg |
|---|---|
| Kategorie | Bild |
| MIME-Typ | image/svg+xml |
| Erschienen | 2001 |
| Entwickelt von | W3C |
| Kompression | Vektor (keine Pixelkompression) |
| Transparenz | Ja |
| Animation | Ja |
SVG: häufige Fragen
- Warum zeigt mein SVG die falsche Schrift?
- Weil die Datei eine Schrift über den Namen referenziert und erwartet, dass der Betrachter sie besitzt. Fehlt sie, ersetzt der Renderer sie und das Layout verrutscht. Wandeln Sie Text vor dem Export in Pfade um oder betten Sie die Schrift ein, dann ist die Zeichnung in sich geschlossen.
- Kann ich ein JPEG oder PNG nach SVG wandeln?
- Nur durch Nachzeichnen, und das ist eine Annäherung statt einer Umwandlung. Vektorisierer erkennen Kanten und legen Kurven darauf, was bei Logos und flacher Strichgrafik gut funktioniert. Fotos werden zu Tausenden unpassender Flecken — größer als das Original und schlechter anzusehen.
- Warum erscheint ein SVG nicht in Photoshop oder Word?
- Viele Rastereditoren und ältere Office-Pakete rastern die Datei beim Import oder verweigern sie ganz, und die Unterstützung für Filter, Masken und eingebettete Schriften ist uneinheitlich. Ein PNG in der tatsächlich benötigten Größe zu exportieren ist der verlässliche Weg zu solchen Programmen.
- Ist es sicher, SVG-Uploads von Nutzern anzunehmen?
- Nicht ohne Bereinigung. SVG kann JavaScript, Ereignishandler und externe Verweise tragen, eine bösartige Datei von Ihrer Domain führt also Skript in der Sitzung Ihrer Nutzer aus. Entfernen Sie Skripting mit einem Sanitizer oder liefern Sie Nutzerinhalte von einem separaten Origin aus.
- Wie mache ich eine SVG-Datei kleiner?
- Schicken Sie sie durch einen Optimierer wie SVGO: Editoren hinterlassen versteckte Ebenen, eigene Metadaten, absurde Koordinatengenauigkeit und ungenutzte Definitionen. Koordinaten auf ein bis zwei Nachkommastellen zu runden und Pfade zusammenzuführen halbiert die Datei oft ohne sichtbare Änderung, gzip auf dem Server erledigt den Rest.
- Symbole als SVG oder PNG?
- Fast immer als SVG. Eine Datei deckt jede Bildschirmdichte ab, ohne separate @2x- und @3x-Exporte, Farben lassen sich per CSS ändern, und sie ist meist kleiner. PNG nur dort, wo SVG nicht dargestellt wird, etwa in E-Mail-Clients und einigen Altanwendungen.