Start bis 6.6.2017

Ein gutes Design verpackt Funktionalität hübsch und intuitiv. Viele gute Ideen von Mediengestaltern wandern in den Papierkorb, weil Designer die Freiheiten und Möglichkeiten der Technik nicht richtig verstanden haben.  Viele weitere gute Ideen wandern in den Papierkorb, weil die Webentwickler aus Ignoranz oder Faulheit Freiheiten unnötig stark einschränken oder als nicht machbar abtun.. Und viele weitere Ideen entstehen gar nicht erst, weil das Wording die Ideenbildung behindert. Ideen der letzten Kategorie könnte man viele im Bereich der SVGs finden, sobald man sich vom Wortgeist löst.

Was bewirkt falscher Wortgeist?

Der Graphiker weiß, dass SVG die Abkürzung für Scalable Vector Graphik ist und logisch: er denkt bei SVG nur an Bilder. Die Idee, dass das SVG dynamisch Text und Bild verknüpft, ist nicht mehr naheliegend, sondern schon ein Sonderfall. SVG-Graphiken, die gar über geschickt gewählte CSS-Klassen responsive reagieren, sind mir bisher noch nicht untergekommen. Gerade bei fraktalen Graphiken oder für Text-Icon-Wechsel könnte dies effektiv sein.

Der Webentwickler dagegen ahnt, dass "böse oder staatliche Hacker" über JavaScript renitentes Cross-Site-Scripting betreiben könnten. (https://events.ccc.de/congress/2011/Fahrplan/attachments/2009_aaj-28c3.pdf) Vielleicht wird deshalb im neuen TYPO3 8.7  ein SVG im Viewhelper <f:uri.image> in Pixelbild umwandelt, per <image>-Tag in SVG reintegriert und als steriles SVG im Cache gespeichert.. Wie andere Content-Management-Systeme mit dem Thema umgehen, weiß ich nicht, aber solche Rigidität ist contrakreativ. 

Selbst auf Arbeitsmittel wie dem "Illustrator" hat das SVG-Wording Auswirkungen. Dessen SVG-Code ist zum Beispiel bei <textpath>-Funktionen von ähnlicher Qualität wie der HTML-Code, den Microsoft-Word beim Speichern von Dokumente im HTML-Format produziert. 

Der Titel deutet meine andere Sichtweise schon an. Für mich als Webentwickler ist SVG-Code keine Graphik sondern eine Alternative zum HTML-Code. Diese Sichtweise produziert gleich neue Denkmuster bei mir. Während beim HTML der Browser die Elemente wie ein einfacher Drucker Zeile für Zeile bzw. DOM-Element für DOM-Element auf die Seite bringt, arbeitet der Browser beim SVG-Code eher wie ein Plotter, der Objekt für Objekt an ausgewählte Positionen zeichnet. Aus dieser Sicht heraus ergänzen sich beide Code-Formen hervorragend. HTML hat gegenüber dem SVG den Vorteil, dass sich die Größe der Elemente leicht an die Textmenge anpasst. Das SVG hat gegenüber dem HTML den Vorteil, dass damit „intuitiv“ Positionen, Gruppierungen und Überlagerungen definierbar sind.

SVG statt HTML - Einsatzgebiete

In Bereichen, wo man mit "definiert-begrenzten Textmengen" arbeitet, ist SVG eine echte Alternative zum HTML. Ein Beispiel sind Menüs. Mit SVG ließe sich als Hamburger-Alternative effizient ein kompaktes Menü mit Slide- und Hover-Effekten bauen. Das Menü ließe sich einfach per Content-Management-System füllen. Im Slide-Hover-Menü könnte, definiert über CSS-Klassen, ein Menü-Punkt hervorgehoben sein, während man andere, also oberhalb und unterhalb des Fokusses, per CSS-Klasse auf einen Strich reduziert. Damit weiß der User, wo er sich befindet, ohne alles lesen zu müssen. Bei Touch/Click oben oder unten könnte sich per Javascript der Fokus verschieben lassen, während beim Touch/Click auf die Mitte automatisch eine Liste mit Unter-Menü-Punkte aufgehen könnte. Da SVG über <foreignobject> auch HTML einbinden darf, wäre das Untermenü vermutlich nur einfache HTML mit einem <ul>-Objekt. Ein solches Slide-Hover-Menü könnte intuitiver als ein Hamburger-Menu sein und gleichzeitig per CSS sogar responsive definiert werden. Vielleicht werden dann im größeren Desktop-Menü drei Menüpunkte statt nur einem Menüpunkt angezeigt. (2017-04-15 Bislang ist dies nur ein Idee)
Weitere Einsatzgebiete sind denkbar. Zum Beispiel könnte man die Produktlisten in Internet-Shops aufhübschen. Man könnte sich vom langweiligen twittrigen Bootstrap-Design lösen und die Vielfalt der SVG-Befehle für eine individuelle Shopdarstellung nutzen. Mit SVG-HTML-Templates ließe sich auf ein Produktbild leicht ein Preis-Stern kleben, oder man könnte Touchpunkte einführen, um auf dem Bild die Produkteigenschaften zu bewerben.  Weiter wären dynamische generierte Collagen oder einfache CSS-gesteuerte Animationen oder auch Texte auf nicht gradlinigen Textpfaden oder aber auch Texte mit Farbverläufen in den Buchstaben und vielleicht .... denkbar.

Resümee:

Als Naturwissenschaftler weiß ich, dass auch mir vielen Forschungsgeldern falsche Fragen immer sicher zu falsche Antworten führen – siehe menschengemachter Klimawandel! Aber auch der Wortgeist kann leicht die Kreativität manipulieren, also behindern oder beflügeln. Dies hat der Artikel für den Spezialfall SVG vielleicht verdeutlicht. Wenn Sie kreativ werden wollen, ist ein Weg dazu, Ihr Ziel mit anderen, also mit Ihren, Worten zu beschreiben, um so neue Ideen in Ihrem Kopf zu finden. 

Ihr Dr. Dieter Porth

P.S. Ich bin über das Thema nur zufällig gestolpert, weil nach dem Update auf TYPO3 8.6 meine Comic-Extension Positioner nicht mehr lief. Ich brauche die SVG-Dateien als frei colorierbares Hintergrund-Bild für die Sprechblasen und muss jetzt einen eigenen Viewhelper schreiben, um dem Redakteur ohne Rumfrickeln im Template den Wechsel von SVG-Dateien zu ermöglichen. Un wenn man sich schon mit dem Thema Sicherheit beschäftigt, denkt man natürlich gleich einwenig weiter.