Web

Wer hat im Rennen bei der Erstellung von Texteffekten im Web die Nase vorn - CSS oder SVG?

CSS vs. SVG – Die finale Runde
Keine Kommentare

Scalable Vector Graphics (SVG) und Cascading Style Sheets (CSS) haben beide ihre Vor- und Nachteile, was die Erstellung von Texteffekten im Web betrifft. Von Frontend-Entwicklern werden beide Formate eingesetzt, um – neben vielen weiteren Einsatzmöglichkeiten – grafische Effekte im Web umzusetzen. Doch welche Webtechnologie eignet sich am besten, um die gewünschten Ergebnisse umzusetzen?

Bereits in den Artikeln „CSS vs SVG: Wer hat bei grafischen Texteffekten die Nase vorn?”, „SVG versus CSS – Styling-Check” und „Formen mit SVG und CSS – Welches Format eignet sich besser?“ hat sich die Frontend-Entwicklerin Sara Soueidan damit auseinandergesetzt, ob sich mit CSS oder mit SVG einfacher grafische Effekte ausführen lassen. Der momentane Zwischenstand lautet 3:1 für SVG. Der letzte Teil der Artikelserie zum Thema „CSS vs. SVG“ soll als finale Zusammenfassung der bisher gesammelten Erkenntnisse dienen und zugleich eine Entscheidung bringen, welches Grafikformat sich denn nun besser eignet, um grafische Effekte im Web umzusetzen.

Icon Fonts vs. SVG-Icons

Eingangs beschäftigt sich Sara Soueidan mit einem der kontroversesten Themen der letzten Jahre: Icon-Systeme.

Bei der Verwendung von Icon Fonts treten oftmals Probleme auf: Denn Icons, die eingebettete Icon Fonts nutzen, sind nicht semantisch. Ein Icon ist ein Bild, das durch leere <div>s oder <span>s ausgezeichnet wird und dessen Inhalt als „Pseudo-Content“ im Style-Sheet kreiert wird. Zudem sind Icon Fonts monochrom und können nicht vielfarbig angelegt werden – es sei denn, man investiert ein Übermaß an Zeit und Arbeit und koloriert jedes einzelne Formteil eines Icons, um die Einzelteile dann wieder zusammenzubauen. Wer sich wirklich dafür interessiert, dem sei das Tutorial von Parker Bennett ans Herz gelegt. Des Weiteren sind Icon Fonts nicht mit allen Browsern kompatibel, und da sie oft nicht als Text erkannt werden, kommt es zu Problemen mit Anti-Aliasing. Auch kann es schwierig sein, sie korrekt zu positionieren.

SVG-Icons hingegen weisen bestechende Vorteile auf: So sind SVGs semantischer als Icon Fonts, können animiert werden und sind zudem interaktiv. Außerdem werden SVGs auf allen Bildschirmauflösungen gleich gut dargestellt und sind mit allen Browsern kompatibel. Falls doch einmal eine Inkompatibilität auftritt, lassen sich SVGs ganz leicht in PNGs wandeln. SVGs sind auch einfacher zu erstellen, einzubetten und zu handhaben; zudem sind sie barrierefrei. Ebenfalls bieten SVG-Icons eine breitere Kontrolle über SVG Icon Styles, beispielsweise in der Wahl von mehrfarbigen Icons.

UI-Element #1: Diagramme


CSS-Charts

Mit CSS lassen sich einfache Diagramme erstellen, die auf regelmäßige Formen wie Rechtecke und Kreise setzen. Aus diesem Grund sind vertikale oder horizontale Säulendiagramme besonders geeignet, um sie allein mit CSS zu implementieren. Mit CSS lassen sich Elemente eines HTML-<table>s stylen und positionieren; <table> kennzeichnet dabei die Daten eines Graphen. Die Daten folgen einem semantischen Mark up, sodass sie über eine serverseitige Sprache wie PHP manipuliert werden können. Hält man sich an ein solches Modell, wie es etwa Eric Meyer oder Robin Rendle vorstellen, erhält man einen ähnlichen Graphen wie in folgender Abbildung:

bar-graph-css-tricks

Screenshot: http://adobe.ly/1NR6nQV

Natürlich lassen sich auch Kreise mit CSS realisieren – am besten eignen sich dafür Tortendiagramme. Mithilfe von Pseudo-Elementen und CSS-Transforms können zweifarbige Tortendiagramme erstellt werden.

pie-chart

Screenshot: http://adobe.ly/1NR6nQV

Das gepunktete Rechteck stellt das Pseudo-Element dar, das auf dem runden Elternteil gedreht wird.

SVG-Charts

Bei der Erstellung von Charts und der bildlichen Darstellung von Daten übertrifft SVG nach Meinung von Sara Soueidan alle anderen Techniken, auch CSS. Denn die Charts und Datendarstellungen sind leicht zugänglich und komplett interaktiv sowie semantisch. Zudem lassen sich auch einfach Visualisierungen mit unregelmäßigen Formen erstellen, etwa Karten.
Säulendiagramme können mit einfachen SVG-Shapes wie <rect> und <line> kreiert werden. Die Zahlen, die die Daten repräsentieren, sind auch zugänglich, da sie <text> und kein Abbild von Text sind. Will man ein einfaches Tortendiagramm erstellen, lohnt sich die Nutzung von SVG-Strokes und Stroke Dashes, denn so lassen sich die einzelnen Kuchenstücke des Diagramms faken. Verwendet man dicke Striche für einen SVG-Kreis, wird der ursprüngliche Kreis in Dashes mittels stroke– und stroke-dasharray-Properties aufgeteilt.

svg-pie-chart

Screenshot: http://adobe.ly/1NR6nQV

Möchte man Charts nicht per Hand anlegen, empfehlen sich Frameworks wie d3.js. D3 – kurz für Data-Driven Documents – ist eine der bekanntesten Data-Visualisation-Libraries, die sich vor allem für die Erstellung von komplexen Charts eignet.

Mit SVG-Shapes lassen sich relativ unkompliziert unregelmäßige Formen erstellen, die Daten, Karten etc. abbilden. Da SVG zugleich Bild- und Textformat ist, ist es ein sehr gut geeigneter Kandidat für datengestützte Visualisierungen.

Elastische UI-Interaktionen

Geht es um die Erstellung und Animation von unregelmäßigen UI-Shapes, hat SVG ganz klar die Nase vorne. Vermutlich ist das zugleich das mächtigste Feature von SVG, so Soueidan. Gerade für Slideshows bietet sich SVG an. Im Codrops Tutorial wird gezeigt, wie eine Slideshow durch SVG path von einer Form zur anderen animiert wird. Die verwendeten Path Shapes sind die folgenden:

paths

Screenshot: http://adobe.ly/1NR6nQV

Mithilfe von JavaScript lassen sich die Path Shapes definieren:

// …
// path definitions
paths : {
rect : ‘M33,0h41c0,0,0,9.871,0,29.871C74,49.871,74,60,74,60H32.666h-0.125H6c0,0,0-10,0-30S6,0,6,0H33’,
curve : {
right : ‘M33,0h41c0,0,5,9.871,5,29.871C79,49.871,74,60,74,60H32.666h-0.125H6c0,0,5-10,5-30S6,0,6,0H33’,
left : ‘M33,0h41c0,0-5,9.871-5,29.871C69,49.871,74,60,74,60H32.666h-0.125H6c0,0-5-10-5-30S6,0,6,0H33’
}
}
//…

Daran anschließend kann man sie über eine Animation Library wie Snap.svg animieren – dabei muss ausgewählt werden, welche Form in welche Richtung bewegt werden soll. Der ausführliche Code findet sich im Codrops Tutorial.

Mit CSS allein sind solche Effekte nicht möglich – selbst, wenn man das CSS clip-path-Property verwendet, denn dieses basiert auf SVG.

Round-up

Auch wenn CSS ein Set an Filtern besitzt, mit denen bestimmte Effekte kreiert werden können, sind die SVG-eigenen Filter doch vielseitiger und ermöglichen komplexere Effekte wie etwa den Motion-Blur-Effekt oder den Gooey-Effekt:

blur_modal

© http://tympanus.net/codrops/2015/04/08/motion-blur-effect-svg/

In der Artikelserie konnten natürlich nicht alle Anwendungsfälle für SVG und CSS besprochen werden. Trotzdem zeigt sich, dass mit SVG viele Szenarien einfacher und besser gelöst werden können als mit CSS. Fasst man alle vorgestellten Anwendungsmöglichkeiten zusammen, steht es 4:2 nach Punkten für SVG. SVG soll jedoch keinesfalls als Ersatz für CSS dienen: SVG und CSS ergeben zusammen eine starke Kombination, die Webdesignern und Entwicklern dabei helfen kann, aus den vorgegebenen, starren Mustern der User Interfaces auszubrechen.

ML Conference 2019

Workshop: Machine Learning 101++ using Python

mit Dr. Pieter Buteneers (Chatlayer.ai)

Honey Bee Conservation using Deep Learning

mit Thiago da Silva Alves, Jean Metz (JArchitects)

Python Summit 2019

Daten analysieren und transformieren mit Python

mit Doniyor Jurabayev (Freelancer)

Advanced Flow Control

mit Oz Tiram (noris network AG)

Aufmacherbild: May the best man win von Shutterstock / Urheberrecht: Everett Collection

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -