# 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 ``, ``, `` und ``. 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](/de/docs/robots/image-resize.md) kann ein hochgeladenes SVG in den für Ihr Produkt benötigten Abmessungen als zuverlässig darstellbares PNG rendern: ```json { "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. ## Verwandte Demos * [SVG in JPEG konvertieren EN (English)](/demos/image-processing/convert-an-image-from-svg-to-jpg.md) * [Ein Bild auf die Maße eines Twitter-Titelbilds skalieren EN (English)](/demos/image-processing/resize-to-twitter-cover-dimensions.md) * [Ein Bild mit einem Wasserzeichen versehen EN (English)](/demos/image-processing/image-watermarking.md)