Gründe

Im professionellen Umfeld spielt die Verbreitung des Internet Explorers eine wichtige Rolle. Da dieser erst ab Version 9 die Darstellung ohne Plugin erlauben und zudem nicht mehr auf Windows XP laufen, sind hier Workarounds nötig. Texte für Webseiten werden typischerweise mit einem Content Management System erstellt, die zudem auf einer Javascript Wysiwyg-Editor setzen. Wenn überhaupt, lässt sich ein SVG-Bild meist nur in der Quelltextansicht einfügen. Die besten Grafikdesigner wissen wenig über das Format und erstellen ihre Grafiken in Vektorgrafikprogramme. Im professionellen Umfeld wird dabei besonders auf Illustrator gesetzt, der in Adobes Creative Suite enthalten ist und Farbpaletten unterstützt. Da die meisten Aufträge anhaltend für den Druck entstehen, ist das besonders wichtig. Meist wird zusätzlich ein Grafiktablett verwendet. Im Ergebnis entstehen Vektorgrafiken, die 2 Mbyte groß sind – und sich so im Web nicht verwenden lassen.

Vorüberlegungen

Damit SVG verwendet werden können, darf die Dateigröße nicht über 100 KByte liegen. Ähnlich wie bei Texten, muss man sich auch bei Vektorgrafiken überlegen, diese direkt für das Web zu erstellen. Der Sprung ist ähnlich hoch, wie von der Langspielplatte zur Compact Disc und muss zunächst die Frage beantworten, welche Elemente weggelassen werden können.

Die Größe von SVG-Dateien wird überwiegend von der Anzahl der Objekte und deren Komplexität bestimmt. Durch mehrere Schichten (Layer), ähnlich der Lasurtechnik in der Ölmalerei entsteht ein realistisches Bild. Die Objekte selbst werden durch Punktkoordinaten (Knoten, Nodes) beschrieben. Diese kann erheblich sein. Die typische Arbeitsweise des Designers mit dem Kalligraphiewerkzeug und dem Grafiktablett produziert erhebliche Nodes und ist ein Grund für riesige Dateien. Einige Techniken sind somit bei der Produktion für das Web nicht verwendbar. Es macht Sinn sich zu Überlegen, welche Objekte, Farbdefinitionen, Filter usw. mehrfach verwendet werden können.

Selbstporträt - ein Beispiel

Wer nicht warten will, schaut sich gleich das Ergebnis an. Ausgangspunkt für das Porträt ist ein Foto, in dem ich zunächst Helligkeit und Kontrast in Gimp verstärkt habe. Dadurch fällt es mir leichter, mich auf die wesentlichen Bereiche zu konzentrieren und nicht jede Falte zu beachten.

Bei meiner Arbeit mit Inkscape öffne ich zunächst immer das Ebenenfenster. Das Foto wird dann in Inkscape in die angedeutete A4-Seite hineingezogen und wie gewünscht platziert. Die Ebene sollte einen aussagekräftigen Namen erhalten und direkt im Menü umbenannt werden. Danach wird mit einem Klick auf das Schloßsymbol die Ebene vor versehentlicher Arbeit verschlossen und es können weitere Ebenen darüber angelegt werden. Ebenen sind gruppierte Elemente, die ein spezielles Label erhalten. Die Zuordnung gelingt daher nur, wenn die SVG-Dateien im Format Inkscape-SVG abgespeichert werden, was für die erste Phase unbedingt empfohlen wird. Beim Mischmodus wird auf Filtereffekte gesetzt, hier sollte also Normal bevorzugt bleiben.

Ich habe zunächst ein Ebene head hinzugefügt und nutze überwiegend englischsprachige Bezeichner, um Umlautprobleme in der SVG zu umgehen. Als Basis für meinen Kopf dient zunächst eine Ellipse, die ich mit Pfad → Objekt in Pfad umwandeln und mit dem Knotenwerkzeug um weitere Knoten ergänzen kann und mit der Maus so zurecht ziehe, das sie der Kopfform entspricht. Mit der Pipette kann ich die Füllfarbe direkt aus dem Ursprungsbild übernehmen.

Den Gesichtsschatten habe ich mit dem Bezier-Werkzeug nachgemalt. Durch Farbverläufe und Transparenz kann mit diesen zwei Objekten schon ein erheblicher räumlicher Effekt erzeugt werden. Ich lasse den „Füllen und Kontur“-Dialog eingeblendet. Die Verwendung von Unschärfe sollte an dieser Stelle noch vermieden werden. Damit wird ein Filter angelegt. Unschärfe wird recht häufig benötigt und damit würde für jedes Element ein neuer Filter angelegt werden. Filter können die Rechenzeit signifikant beeinflussen und besser am Schluss hinzugefügt werden. Da Safari und der Internet Explorer filter ohnehin (noch) nicht verstehen, sollte die Grafik auch ohne Filter vorzeigbar sein.

Danach wird auch diese Ebene gesperrt und unsichtbar geschaltet. Ich habe mich dann den Augen gewidmet. Die Augen bestehen aus der Augenhöhle, dem Hintergrund, der Iris und der Pupille – insgesamt 6 – 10 Objekte, wenn diverse Leuchtflecken mitgezählt werden. Ich habe später Elemente gelöscht, um die Komplexität zu reduzieren, da die Augen ohnehin hinter den Brillengläsern liegen. Basis für alle Objekte sind auch wieder Kreise/ Ellipsen. Die Elementen, welche ein Auge repräsentieren, sollten gruppiert und damit logisch strukturiert werden. Besonders hier bietet es sich an, die Objekte aussagekräftig zu benennen. Inkscape bietet dazu einen Dialog, der mit der rechten Maustaste erreicht wird. Der Dialog zeigt deutlich, das jedes Element in Inkscape einen Titel und eine Beschreibung haben kann, welche man auch nutzen sollte, um auch sehbehinderten Nutzern eine Beschreibung zu liefern.

So entstehen alle Bereiche des Porträts. Die Haare habe ich mit einem Grafiktablett und dem Kalligraphie-Werkzeug („Klecksig“) gezeichnet. Danach habe ich alle Elemente markiert und mit "Pfad → Vereinigung" zu einem Pfad zusammengefasst, das Objekt dann eindeutig benannt. Mit "Strg + L" ist zunächst die Anzahl der Knoten reduziert worden. Die Haare wurden zunächst dupliziert und mit verschiedenen Farben und Transparenzen etwas verschoben und geschichtet. Diese werden später durch mehrere Instanzen von use ausgetauscht. Zwar bietet auch Inkscape das „Klonen“ an, lässt es aber nicht zu ein Objekt ohne Füllung und ohne Rand zu erzeugen. Das ist aber die Voraussetzung, um allen geklonten Objekten (use) unterschiedliche Farben zu geben. Nachdem alle Bestandteile des Porträts entstanden sind, kann das Bild mit der untersten Ebene entfernt werden.

Nun kann der Einsatz von Filtern erfolgen. Alle verwendeten Filter sieht man, wenn das Menü Filter bearbeiten geöffnet ist. Diese Filter können den gewünschten Objekten zugeordnet werden. Meiner Meinung nach, reichen 4-5 Unschärfefilter aus. Der Filter für die Haare ist etwas komplexer, lässt sich mit dem mächtigen Werkzeug aber wie gewünscht zusammenstellen. Inkscape bringt bereits einige Filter mit, die sich als Basis für eigene Experimente verwenden lassen.

Die Nachproduktion beginnt mit dem Abspeichern als optimiertes SVG. Hier werden ungenutzte Farbverläufe u.a. bereits aus dem Dokument entfernt. Der SVG-Cleaner, den es bislang nur für Ubuntu gibt, verkleinert die Datei noch weiter. Ich konnte allein mit diesen Tools meiner Datei, die ursprünglich ca. 400 KByte groß war um etwa die Hälfte verkleinern. Der Rest lässt sich dann leider bislang nur in einem Editor und per Hand machen. Hier hilft ein eindeutiger Name und das Ausprobieren.

Ein bereinigter Code ist dann auch eine gute Ausgangsbasis, um eine gewisse Interaktivität hinzuzufügen.

Selbstporträt mit Interaktion

Im Beispiel können die einzelnen Elemente ein- und ausgeblendet werden, so dass man sich einen Überblick verschaffen kann, wie diese gestaltet ist.

Seit Mai 2010 steht auch eine API zur Verfügung, die aber Wünsche offen lässt. Es gibt nur eine Handvoll Methoden. Irritierend ist dabei auch die Begrifflichkeit. Natürlich ist der Zugriff nicht nur vom Smartphone möglich.

Die für mich naheliegende Anwendung per PHP Daten aus der DropBox in das CMS seiner Wahl zu kopieren, scheint niemand bisher realisiert zu haben. PHP scheint von den Entwicklern ohnehin nicht Sprache der Wahl zu sein, obwohl es eine Klasse bei Google Code gibt, die aber sehr viele Abhängigkeiten mitbringt.

Glücklicherweise hat sich Tijs Verkoyen dieses Problem angenommen und eine kompakte Klasse entwickelt, die sich auch der OAuth-Problematik annimmt. Damit lassen sich alle Methoden der API aufrufen. Tijs hat eine Dokumentation zur Verfügung gestellt.

Zur Nutzung benötigt man neben der E-Mailadresse und seinem Passwort die zwei Keys, die man bei der Registrierung einer APP in der DropBox erhält.Die API erhält keine Methode, um Dateien auf den eigenen Webspace zu verschieben. Deshalb muss dort die Datei neu anlegt werden und den Inhalt des Response hinein schreiben.

$dest = 'test';//folder on your pc
if (isset($_GET['file'])) {
//kleine Pfadverschleierung
$dbfile = x0rdecrypt($_GET['file'], $secretxorkey) ;
$response = $dropbox->filesGet($dbfile);
//sichere Dateinamen
$filename = array_pop(explode('/', $dbfile));
$file = base64_decode($response['data']);
//Datei neu im Zielverzeichnis anlegen
$file_copy = fopen( './'.$dest.'/'.$filename,"wb");
//schreiben und schließen
fwrite($file_copy, $file);
fclose($file_copy);
}

Da der Beispielcode diesmal deutlich umfangreicher geworden ist, habe ich bei Github einen Fork der Klasse angelegt und die Beispieldateien ergänzt. Das Ergebnis ist eine übersichtliche Oberfläche, die es ermöglicht Dateien anzuschauen oder zu verschieben.

Hier zeigt sich ein weiterer Vorteil des Formates - @media-Regeln werden interpretiert.

Ebenso, wie bei HTML ist es dazu nötig, innerhalb des CSS z.B @media print zu formulieren. Verwirrend ist es vielleicht, das CSS in SVG nicht ganz so mächtig ist. Viele Stile lassen sich auch als Atrribute formulieren, was typischerweise die älteren Programme zur Erstellung von SVG-Grafiken nutzen. Ein fill="red" ähnelt style="fill:red". Stile überschreiben die Attribute, wie

dieses Beispiel

illustriert. Filter, Farben usw. lassen sich bequem über Styles zuweisen und damit zwischen Druckansicht und Bildschirmansicht differenzieren.

Diese Geschenkebox

zeigt, wie so etwas aussehen könnte. In Verbindung mit media-queries sind hier auch unterschiedliche Größen der Grafik in Abhängigkeit vom Endgerät vorstellbar.

Für die Grafik bei openclipart.org ist das ohne Belang, da Inkscape und andere Programme selbstverständlich diese Fähigkeiten haben und langfristig (bis Ende 2011) Safari und der Internet Explorer darum nicht herum kommen. Will man die Grafik heute im Web einsetzen, kann man natürlich diese Pfade weglassen, was ich auch getan habe. Eine andere Möglichkeit ist eine Browserweiche, welcher die Pfade nur dann ausblendet, wenn die Eigenschaft vom Browser nicht unterstützt wird. (feature detection)

Es soll nicht darum gehen, bestimmte Browser über ihren UA-String zu erkennen, sondern zu testen, ob sie die gewünschten Fähigkeiten haben. Dafür scheint ein in das Dokument integriertes Script, welches .hasFeature() nutzt, wie geschaffen. Das klappt auch recht gut, um Animationen zu erkennen, wie das c't-Beispiel zeigt.

Leider funktioniert das bei der Erkennung von SVG-Filtern, bisher nur in Opera. Folgende Lösung ist durch Anregung der SVG-Developer-Liste und von Thomas Meinike entstanden:

function noFilter() {
  document.getElementById("highlight").setAttribute("opacity",0);
  document.getElementById("highlightwing").setAttribute("opacity",0)
}
function init() {
var fsupport = ((document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Filter", "1.1")) || (!!document.createElementNS && /SVGFE/.test(toString.call(document.createElementNS('http://www.w3.org/2000/svg','feGaussianBlur')))))? true : false; 
if (!fsupport) noFilter();
}
document.addEventListener("DOMContentLoaded", init, false);

Das Script wird beim Laden der Seite aufgerufen und setzt die Sichtbarkeit der "verwischten" Bereiche auf 0. Den kryptische Teil der init-Funktion, der von Erik Dahlström stammt, will ich kurz erklären:

(toString.call(document.createElementNS('http://www.w3.org/2000/svg','feGaussianBlur')))

Call ruft eine Funktion auf, die ein Objekt erstellt, die den Verwischen-Filter enthält. Das gelingt natürlich nur, wenn der Browser das auch unterstützt. Deshalb kann mit dem regulären Ausdruck

/SVGFE/

überprüft werden, ob dieser enthalten ist. Dies erledigt .test. Wenn es keine Übereinstimmung gibt, wird die Funktion noFilter() aufgerufen.

Demo des Twittervogels mit Featureerkennung

Da sich Otto Normalnutzer eine Seite nicht mit unterschiedlichen Browsern ansieht, wird die feature detection nur auf den Verwischen-Filter angewandt, um eine Störung des grafischen Effekts zu verhindern. Natürlich wird der Effekt, der die Federn simulieren soll, auch nicht angewandt.

Ergänzung (01.12.2010:)

Die Anregung von @molily habe ich aufgegriffen:

function init() {
var fsupport = ((document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Filter", "1.1")) || (typeof document.createElementNS('http://www.w3.org/2000/svg','feGaussianBlur').setStdDeviation == 'function'))? true : false; 
if (!fsupport) noFilter();

Hier liegt der Clou darin, dass das erzeugte Obkekt daraufhin überprüft wird, ob eine bestimmte Funktion existiert. Für den blur-Filter muss es eine Standardabweichung geben.

verbesserte Demo des Twittervogels