Punkt, Punkt, Komma, Strich - fertig ist das Mondgesicht!

  Ralf Hersel   Lesezeit: 3 Minuten  🗪 2 Kommentare

Das Format Tiny Vector Graphics ist einfacher und kleiner als entsprechende SVG-Dateien.

punkt, punkt, komma, strich - fertig ist das mondgesicht!

SVG, also Scalable Vector Graphics, ist ein Format zur Darstellung von Grafiken mithilfe von Vektoren. Im Gegensatz zu Pixel-Formaten (PNG, JPG, TIFF, usw.) gibt es keine einzelnen Punkte mit Farbinformationen, sondern Grafikelemente (Strich, Kreis, Rechteck, usw.) mit Eigenschaften (Farbe, Füllung, Dicke, usw.). SVG-Dateien lassen sich in Pixel-Formate konvertieren und umgekehrt. Dabei wird ein Foto im SVG-Format wesentlich grösser sein als im Pixel-Format. Konvertiert man eine SVG-Grafik in ein Pixel-Format, sieht man den gegenteiligen Effekt: die Pixel-Datei wird wesentlich grösser sein als die SVG-Datei. Daran sieht man, dass SVG für Grafiken und Pixel-Formate für Bilder und Fotos geeignet sind.

So weit, so bekannt. Kaum bekannt ist, dass die Spezifikation des SVG-Formats alles andere als einfach ist, weil darin viele Sonderfälle abgedeckt sind. An dieser Stelle kommt das TVG (Tiny Vector Graphics) ins Spiel. Das Projekt beschreibt es so:

SVG ist ein furchtbar komplexes Format und ein Overkill für die meisten Projekte. Die Spezifikation enthält viel zu viele Randfälle, so dass die Implementierung eines neuen SVG-Renderers immer mit Nachteilen oder fehlenden Teilen verbunden sein wird. TinyVG versucht, einfacher zu sein. Weniger Funktionen, aber leistungsfähig genug, um 90% der Anwendungsfälle abzudecken.

Folgende Funktionen, bzw. Vorteile bietet TVG im Vergleich zu SVG:

  • Kompakte Binärkodierung (im Durchschnitt 39 % der Grösse einer vergleichbaren SVG-Datei)
  • deckt 90 % der typischerweise verwendeten SVG-Features ab und hat dabei nur einen winzigen Bruchteil der Komplexität
  • Gemeinsame 2D-Primitive werden unterstützt (Pfade, Linien, Rechtecke, Polygone)
  • Unterstützung für lineare und radiale Zwei-Punkt-Gradienten
  • Konfigurierbare Genauigkeit für kleinere Dateien
  • Nachvollziehbare Spezifikation (lediglich 17 Seiten lang)

Der Tiger im Titelbild hat als SVG-Datei eine Grösse von 96'719 Byte (optimiert sind es 85.806 Byte). Bei der Konvertierung in TinyVG schrumpft die Datei auf 27.522 Byte. Das bedeutet, dass wir nur 32 % der Grösse der optimierten Quelldaten haben. Zusammenfassend lässt sich sagen, dass TVG in der Regel zwischen 20 und 50 % der Grösse einer entsprechenden SVG-Datei hat und viel einfacher zu analysieren und zu rendern ist.

Das Projekt bietet Werkzeuge für das Rendering und Konvertieren für die gängigen Plattformen an. Eine Bibliothek für das Einbinden von TVG-Dateien in Webseiten steht ebenso zur Verfügung.

Quelle: https://tinyvg.tech/index.htm

Tags

Grafik, SVG, TVG, Format

kamome
Geschrieben von kamome am 21. März 2023 um 21:15

Cool, das klingt super – wenn es noch in den Webbrowsern ankommt …

Ich habe so einen Tiger im Original mit 65K gefunden, optimiert mit svgo -p 2 --multipass wurden es 58K, mit scour --set-precision=2 --strip-xml-prolog --remove-titles --remove-descriptions --remove-meta --remove-descriptive-elements wurden es 53K. Aber das ändert ja nichts daran, dass TVG vermutlich deutlich darunter läge und es vor allem deutlich einfacher zu implementieren ist.

kamome
Geschrieben von kamome am 23. März 2023 um 20:46

Wenn es aber nur um die Größe ginge, lägen meine tiger.svg.gz und tiger-scour-opt.svg.gz bei nur 20K bzw. 16K – tiger.tvg.gz dagegen hat 21K, kein Wunder, da ja schon ein Binärformat. Also finde ich für die Praxis doch (ein Subset von?) SVG besser (nicht nur Browser-Support, sondern auch direkte Editierbarkeit der Quellen im Texteditor).