Zum Experten-Blog

Was man nicht alles mit SVGs machen kann

Dieser Artikel behandelt die Präsentation von Sarah Drasner am 31. August 2017; Originaltitel «SVG Can Do That?!».

Ich bezeichne mich selbst gerne als verhältnismässig kreativen Entwickler und lebe am liebsten irgendwo zwischen Frontend und UI Design. Ich mag Typografie, stehe absolut auf Minimalismus, bin generell begeistert von schönen Dingen, will schöne Dinge kreieren, fahre ab auf Animationen. Als ich den Talk «SVG Can Do That?!» im Programm der diesjährigen Frontend Conference gesehen habe, war für mich klar, worüber ich schreiben werde.

Sarah ist, wenn ich so frei sein darf und sie hier einfach mal duze, Senior Developer bei Microsoft und schreibt für CSS-Tricks. Gleich zu Beginn der Vorstellung hat man gemerkt, dass hier wirklich jemand mit Wissen und Passion auf der Bühne steht. Sie wirkte zudem äusserst sympathisch und hat schon früh immer wieder humorvolle Anekdoten aus ihrem Leben preisgegeben.

Ihre Präsentation war gespickt mit Demos und «Pens» – kleinen Code-Beispielen mit Vorschau. «Herrlich, genau wie ich's mag!», dachte ich mir. Vieles, wovon sie anfangs erzählt hat, wusste ich aber schon. SVGs kann man optimieren, SVGs haben einen navigierbaren DOM, sie sind auf jedem Bildschirm und jeder Zoomstufe scharf, sie sind prädestiniert zum Animieren.

Im nächsten Segment jedoch, als sie ihre Fähigkeiten zur Schau stellte, wurde ich rasch meinem juvenilen Hochmut beraubt. Sie zeigte einen Pool, den sie animiert hatte und löste mit ihrer interaktiven Pandabären-Fabrik im ganzen Publikum ungläubig-bestaunendes Kopfschütteln aus. Als sie dann auch noch Vue.js bzw. React ins «Spiel» brachte (Hah, Spiel! Weil sie hat effektiv ein Spiel mit diesen beiden Technologien gebaut!), war ich endgültig gefesselt. Was man nicht alles mit SVGs machen kann!

In Verbindung mit einem anderen Talk, den ich heute gesehen habe, in dem es um Datenvisualisierung ging, wurde mir erst jetzt richtig bewusst, wie flexibel dieses Bildformat überhaupt ist. SVGs zu lernen, es steckt eine ganze XML-basierte Sprache dahinter, das steht schon eine ganze Weile auf meiner «Nices Zeug, das ich können will»-Liste. Sarah's Vorstellung hat hier definitiv nochmals Öl ins Feuer gegossen.

Um den Artikel nicht zu einer Lobeshymne degenerieren zu lassen, hier ein subjektiver Mangel: Die Geschwindigkeit war hoch. Sehr hoch. Wetter-Animation da, sich länger ziehende Sinuskurven dort, ein paar Zeilen Code hier. Folglich wurde man nach der 20-Minuten-Marke graduell ausgelaugter. Ausnahmslos alles, was gezeigt wurde, fand ich interessant. Aber über ausnahmslos alles, was gezeigt wurde, hätte ich auch gerne mehr gehört. Weniger Beispiele, hingegen intensiver behandelt, hätten besser gefallen.

Wie genau Vue eingesetzt wurde, beispielsweise, hätte mich brennend interessiert. Denn Vue ist performant, einfach zu lernen und gewinnt immer mehr an Popularität. Ich selbst bin ein grosser Fan davon. Zu sehen, wie diese beiden Technologien Hand in Hand miteinander agieren, wäre absolut fabelhaft gewesen.

Um auf den Punkt zu kommen: Man kann diese leichten Vektoren also als Icons einsetzen; mit ihnen langweilige Informationen aufpeppen; sie als Stilelement auf einer Website verwenden; sie nach Belieben zur Laufzeit auf alle vorstellbare Arten manipulieren; und, und, und. Abschliessend gibt es nur zu sagen, dass SVGs super cool sind. Genauso wie der Vortrag, den ich gesehen habe.

Von Multichannel zu Noline – der Trend in Marketing und Vertrieb

Multichannel ist für die Avantgardisten der Marketing- und Vertriebsdomäne bereits Schnee von gestern: Heute sprechen und schreiben wir von Multicrosschannel, Ubiquitous oder Noline. Welche Veränderungen im Marktumfeld liegen dieser rasanten Entwicklung zugrunde? Und nicht zuletzt: Wo bleiben meine Kunden in diesem Kontext?