Disclaimer: Derzeit bin ich mit ein paar Projekten beschäftigt, daher gabs die letzte Zeit nichts Neues im Blog – vergessen ist er aber nicht…

Wenn es um Zeichnungen am PC geht wird man früher oder später bei Vektorgrafiken laden. Im Gegensatz zu den bekannten Rastergrafiken (jpeg, png, …) speichern diese keine Bildpunkte, sondern beschreiben geometrische Formen und deren Eigenschaften. Das ganze hat einen Vorteil: Wenn ich weiß, wie eine Form aufgebaut ist, kann ich ohne Qualitätsverlust zoomen ohne den von Fotos bekannten „Pixelbrei“ zu erhalten. Als Editor ist z.B. Inkscape zu nennen, welcher unter einer freien Lizenz zu haben ist.

Eben diesen verwende ich gerne um Logos oder andere Zeichnungen für meine Webseiten anzufertigen – dabei nutze ich meist am Ende die Exportfunktion um aus der Vektorgrafik eine PNG in der richtigen Größe zu generieren, was auch zuverlässig funktioniert.

Momentan arbeite ich an einer Webseite, welche eine breite Zielgruppe ansprechen soll, darunter auch viele Senioren. Aus Erfahrung weiß ich inzwischen, dass einige der späteren Nutzer gerne und ausgiebig mit den Zoomfunktionen die Webseiten in die passende Größe bringen – also sollte es ein recht dynamischer Aufbau werden. Keine Pixelangaben, alles relativ zur Schriftgröße – aber halt: Das als PNG gespeicherte Logo verwandelt sich nach starkem Zoom in eine unansehnliche Pixelsuppe, eine andere Lösung muss her. Wäre es nicht schön, wenn man SVG direkt im Browser nutzen könnte? Angedacht ist das schon seit Jahren, nach einer kurzen Googelei und einigen Tests ging die Idee aber sofort wieder in die Tonne: Als „object“ waren in Firefox waren nur Teile der Grafik zu sehen, Chrome hingegen versteht keine Transparenz – als „img“ funktioniert Chrome wie gewünscht, Firefox verweigert dafür komplett die Anzeige (mit 4.0 soll es funktionieren). Also entnervt aufgegeben, natürlich mit entsprechender Info auf Twitter. SVG-Kenner @pawelf hatte jedoch gegen mein „geht nicht“ etwas einzuwenden – mit einigen Beispielen und Links brachte er mich auf den richtigen Weg bezüglich Skalierung:

• Als erstes muss man natürlich ein Bild in Inkscape zeichnen – wie das geht sollte schnell klar sein, Linien, Kreise & co dürften Jedem ein Begriff sein
• Beim Speichern geht es jedoch schon los: Normalerweise speichert Inkscape ein SVG mit Größenangabe – Browser halten sich jedoch an diese und blenden ggf. Scrollbalken ein statt die Zeichnung zu verkleinern. Abhilfe schafft mal, in dem man als Dateiformat bei „Speichern unter“ auf „Optimiertes Inkscape-SVG“ umschaltet. Versucht man nun zu speichern erhält man weitere Optionen – hier ist ein wichtiger Haken zu setzen: „Vorschau einschalten“. Wie man diese Übersetzung des Englischen „Enable ViewBoxing“ verstehen soll ist mir nicht ganz klar, aber es sorgt dafür, dass die SVG statt einer fixen Größenangabe eine ViewBox nutzt und damit in Browsern passend skaliert werden kann.

Das Transparenzproblem ließe sich über eine Javascript-Browserweiche lösen, ich versuch mich aber lieber an einem CSS-basierten PNG-Fallback :/