Was ist eine SVG-Datei? Alles Wissenswerte über das SVG-Format

Eine SVG-Datei beschreibt zweidimensionale Grafiken mit XML-basiertem Markup. Im Gegensatz zu JPEG oder PNG ist SVG ein Vektorformat: Es speichert Formen, Pfade, Text, Verläufe und Transformationen anstelle eines festen Pixelrasters. Ein wohlgeformtes SVG lässt sich von der Größe eines Symbols bis zu der einer Plakatwand skalieren, ohne unscharf zu werden.

Wie funktioniert SVG?

Ein SVG-Dokument enthält Elemente wie <path>, <circle>, <text> und <image>. Ein Browser oder Renderer interpretiert diese Anweisungen in der gewünschten Darstellungsgröße. Elemente lassen sich mit CSS gestalten, außerdem kann SVG Links, Filter, Animationen, Skripte oder externe Ressourcen enthalten.

Diese Flexibilität bietet viele Möglichkeiten, bedeutet aber auch, dass nicht vertrauenswürdige SVG-Uploads als aktive Inhalte und nicht als harmlose Pixel behandelt werden sollten.

Vorteile von SVG

Auflösungsunabhängigkeit: bleibt bei jeder Größe und Pixeldichte scharf.
Kleine geometrische Elemente: Logos und Symbole können kleiner sein als entsprechende Rastergrafiken.
Editierbare Struktur: Farben, Text und Formen lassen sich ändern, ohne Pixel neu zu zeichnen.
Barrierefreie Inhalte: Aussagekräftige Titel und Texte können im Dokument dargestellt werden.
Animation und Gestaltung: lässt sich in Weblayouts und CSS integrieren.

Einschränkungen und Sicherheitsaspekte

SVG ist für detailreiche Fotos ineffizient. Auch das Rendern komplexer Pfade und Effekte kann aufwendig sein. Da SVG Skripte, Ereignisbehandler, Links und externe Referenzen enthalten kann, dürfen Sie einen nicht vertrauenswürdigen Upload nicht direkt in ein HTML-Dokument einfügen, ohne ihn zu bereinigen oder zu rastern.

Verwenden Sie PNG, WebP oder AVIF, wenn Sie ein vorhersehbares Pixelbild oder eine sichere Ausgabevariante für die Bereitstellung benötigen.

SVG im Vergleich zu PNG

Format	Am besten geeignet für	Skalierung	Inhaltsmodell
SVG	Logos, Symbole, Diagramme, Illustrationen	Verlustfrei bei jeder Größe	XML-Vektoranweisungen
PNG	Screenshots und Pixelgrafiken	Neuberechnung der Pixel erforderlich	Festes Raster aus Pixeln

So rastern Sie SVG-Dateien mit Transloadit

🤖/image/resize kann ein hochgeladenes SVG in den für Ihr Produkt benötigten Abmessungen als zuverlässig darstellbares PNG rendern:

{
  "steps": {
    ":original": { "robot": "/upload/handle" },
    "png": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "width": 1200,
      "height": 1200,
      "resize_strategy": "fit"
    }
  }
}

Häufig gestellte Fragen zu SVG

Ist SVG ein Bildformat oder ein Dokumentformat?

Es ist ein Bildformat, das als XML-Dokument dargestellt wird. Aufgrund dieser Dokumentstruktur kann SVG mehr Funktionalität bieten als ein Rasterbild.

Kann SVG JavaScript enthalten?

Ja. SVG kann aktive Inhalte enthalten. Bereinigen oder rastern Sie Uploads daher, bevor Sie nicht vertrauenswürdiges SVG in eine Seite einbetten.

Sollten Sie Fotos in SVG konvertieren?

Nein. SVG eignet sich für Formen und Illustrationen. Verwenden Sie JPEG, WebP oder AVIF für fotografische Inhalte.