Was ist SVG?

Scalable Vector Graphics (SVG) ist ein XML-basiertes Format für zweidimensionale Vektorgrafiken, Text, Formatierung, Animation und Interaktivität. Seine geometrischen Elemente lassen sich ohne rasterbedingten Auflösungsverlust skalieren.

Ein SVG-Dokument ist ein XML-Baum aus Formen, Pfaden, Text, Darstellungsregeln, Transformationen und Referenzen, den ein Renderer zu einer zweidimensionalen Szene auflöst. Die Geometrie bleibt bearbeitbar und auflösungsunabhängig, obwohl eingebettete Rasterbilder und Filtereffekte weiterhin einen endlichen Abtastaufwand verursachen. SVG kann als Bildressource verwendet oder in ein Dokument integriert werden. Diese Modi unterscheiden sich beim Verhalten von Skripten, Formatierungen und Verknüpfungen. Das Format eignet sich für die Erstellung, Optimierung, Auslieferung und Erzeugung von Rasterversionen von Diagrammen, Icons und Illustrationen.

viewBox nimmt vier Zahlen entgegen (min-x, min-y, Breite, Höhe), die festlegen, welches Rechteck im eigenen Koordinatensystem der Zeichnung auf die Anzeigefläche abgebildet wird, unabhängig von den angezeigten Werten für width und height. Mit dem Standardwert xMidYMid meet für preserveAspectRatio wird dieses Rechteck gleichmäßig skaliert, vollständig sichtbar gehalten und zentriert. Ein Wert für viewBox, der nicht zu den Abmessungen der Grafik passt, lässt sie daher bei jeder gerenderten Größe versetzt, verkleinert oder von Leerraum umgeben erscheinen.
Wie ein SVG geladen wird, entscheidet darüber, was es tun darf. SVG 2 sieht für eine Datei, die anstelle eines Rasterbilds verwendet wird, etwa über ein HTML-Element img oder eine CSS-Bildeigenschaft, einen eingeschränkten Modus ohne Skriptausführung, externe Referenzen und Interaktivität vor. MDN führt entsprechende Beschränkungen auf, die Browser anwenden. Inline-SVG und SVG, das über iframe, object oder embed als Dokument eingebettet wird, unterliegen diesen Einschränkungen nicht. Sie können daher durch Skripte und Formatierungen der Seite beeinflusst werden.
Ein hochgeladenes SVG ist ein Dokument, das ausführbaren Skriptcode enthalten kann, nicht nur ein Bild. Die Einschränkungen des Bildkontexts gelten nicht, wenn die Datei direkt geöffnet wird. Ein von Nutzern bereitgestelltes SVG, das über Ihre eigene Domain ausgeliefert wird, kann seinen Skriptcode daher dort ausführen. Die Registrierung des SVG-Medientyps warnt außerdem davor, dass bösartig konstruierte XML-Entitäten den Speicher von XML-Prozessoren erschöpfen können. Bereinigen oder rastern Sie nicht vertrauenswürdige SVG-Dateien vor der Auslieferung und behandeln Sie die serverseitige Verarbeitung als Verarbeitung nicht vertrauenswürdiger Eingaben.
Text in SVG bleibt als Zeichen erhalten und kann daher durchsucht, ausgewählt und von assistiven Technologien gelesen werden. SVG 2 weist jedoch darauf hin, dass die korrekte Darstellung von der Verfügbarkeit der bei der Erstellung verwendeten Schrift abhängen kann. Eine Schrift, auf die die Datei per URL verweist, ist eine externe Ressource. Bildkontexte laden sie nur, wenn sie als URL mit dem Schema data: direkt eingebettet ist. Die Umwandlung von Text in Pfade legt das Erscheinungsbild fest und gibt diese Texteigenschaften auf.

Verwenden Sie SVG für auflösungsunabhängige Icons, Logos und Diagramme, wenn die Browser- oder Werkzeugunterstützung die benötigten Funktionen abdeckt. Bereinigen Sie nicht vertrauenswürdige Dateien, da SVG Skripte, Links und andere aktive Inhalte enthalten kann.

Transloadits Bildformatdaten für /image/resize, /image/enhance und /document/thumbs führen SVG und SVGZ auf beiden aufgeführten ImageMagick-Stacks als lesbar und schreibbar auf. Mit /image/resize wird das Format geschrieben, das im Parameter format angegeben ist. Dies ist der dokumentierte Weg, um aus einem SVG-Upload eine Rasterversion wie ein PNG zu erzeugen.

Wenn format nicht gesetzt ist, wird laut Dokumentation das Eingabeformat für die Ausgabe verwendet. Die Formatdaten geben nicht an, welche SVG-Funktionen der Renderer berücksichtigt, etwa externe Referenzen, Schriften oder Filter. Für diesen Eintrag wurde keine Assembly ausgeführt; testen Sie mit Ihren eigenen Dateien.

Entdecken Sie Transloadits Möglichkeiten für Dateiformate & Komprimierung

Was ist SVG?

So funktioniert SVG

Wichtige Fakten

Wann SVG wichtig ist

So hilft Transloadit bei SVG

Quellen

Machen Sie aus Medienwissen eine funktionierende Pipeline