SVG zähmen leicht gemacht

Scalable Vector Graphics sind die Drachen des Internets: Als Vektorgrafiken sind sie beliebig skalierbar ohne an Qualität zu verlieren, als XML-basiertes Dateiformat sind sie leicht zu editieren – aber wehe, man lässt sie unbedarft an eine nichtsahnende HTML- oder XML-Seite heran. Dann sind Tod und Zerstörung des Layouts garantiert. 😉

SVG lassen sich mittlerweile mit fast jeder Software erzeugen – auch mit Onlinetools wie Canva. Das Problem dabei ist jedoch, dass diese Tools ein so genanntes viewBox-Element nutzen, indem sie um das Grafikobjekt einen Rahmen setzen. Die Höhe und Breite des Rahmens entsprechen jedoch nicht der Größe des Objekts (wie bei EPS), sondern der Größe des virtuellen „Zeichenblatts“, also beispielsweise DIN A4. Dadurch entsteht ein Weißraum um das Objekt. Dieser Weißraum ist aber meist unerwünscht, da zwischen dem darüber, darunter oder daneben stehenden Text dadurch ein großer leerer Abstand entsteht, der Löcher in das Seitenlayout reißt. Daher sollte man die Objekte entweder so skalieren, dass sie den Platz besser nutzen (mit dem Risiko, dass man damit auch Positionsnummern und Linien skaliert) oder aber man legt sich vor der Erzeugung der SVG eine entsprechend dimensionierte Zeichenfläche an.

Das garantiert, dass alle Bilder gleich groß sind und erst im Browser auf die vorgegebene Textrahmen- oder Seitenbreite skaliert werden. Dadurch bleiben auch die Linienstärken und Positionsnummern aller Bilder identisch.

Das ist allerdings nur die halbe Miete.

Die XML- oder HTML-Editoren verwenden zur Skalierung der SVG eine eigene Methode, indem sie Bildbreite der Grafik auch auf die Höhe anwenden und damit ein Quadrat erzeugen. Das führt dazu, dass über und unter der Abbildung mitunter sehr viel Weißraum entsteht und der begleitende Text keinen optischen Zusammenhang zur Grafik besitzt: es entstehen riesige „Leerzeilen“ im Textrahmen.

Im Hintergrund entsteht ein Stylesheet-Konflikt zwischen den Größenangaben in der SVG und den Größenvorgaben des Bild-Elements im Editor. Um diesen Konflikt zu vermeiden, muss man beim Export der Grafik als SVG die Option „responsiv“ ausschalten. Dadurch reagiert die SVG beim Öffnen im Browser zwar nicht mehr auf Veränderungen der Seitenbreite, im Editor jedoch gilt nur noch die Stylesheet-Vorgabe des Bild-Elements und der Weißraum verschwindet (auch in der PDF).

Jetzt passt die SVG auch wieder ganz handzahm in den Textrahmen…