Arbiträr-gestaltete UI-Komponenten mit SVG und CSS

Formen mit SVG und CSS – Welches Format eignet sich besser?
Keine Kommentare

Dank Scalable Vector Graphics (SVG) und Cascading Style Sheets (CSS) lassen sich unzählige grafische Effekte im Web umsetzen. Auch bei dem etwas komplexeren Erstellen von nicht-rechteckigen User-Interface-Komponenten können die beiden Grafikformate hilfreich sein. Doch wer hat bei der Gestaltung die Nase vorne – SVG oder CSS?

Bereits in den Artikeln „CSS vs SVG: Wer hat bei grafischen Texteffekten die Nase vorn?“ und „SVG versus CSS – Styling-Check“ ging es darum, welche Webtechnologie beim Erstellen von verschiedenen grafischen Effekten vorne liegt – SVG oder CSS? Momentan steht es 2:1 für SVG – schauen wir also, was der dritte Teil der Serie bringt:

In diesem Teil ist Sara Soueidan der Frage nachgegangen, ob sich nicht-rechteckige UI-Elemente besser mit CSS oder SVG darstellen lassen. Im Besonderen geht es hierbei um kreisförmige Menüs. Anhand praktischer Beispiele stellt die Entwicklerin dar, ob sich CSS oder SVG besser zur Umsetzung eignen.


Formen mit CSS

Das Problem mit CSS ist, dass alles rechteckig ist: Bilder und Text werden rechteckig angeordnet. Mit der Spezifikation CSS Shapes ist es allerdings möglich, nicht-rechteckige Formen anzulegen, die von Text umflossen werden. Jedoch ermöglicht das nicht die Schaffung von Elementen, die wie arbiträre Formen aussehen und gerendert werden.

Geometrische Formen

Indem Properties wie box-shadow, border-radius etc. mit HTML-Elementen oder Pseudo-Elementen genutzt werden, lassen sich verschiedene geometrische Formen darstellen. Allerdings bleiben die Formen ein „Fake“, da sie nur so aussehen wie die gewollten Formen. So lässt sich zum Beispiel ein Dreieck gestalten, indem ein Rahmen zu einem Element hinzugefügt, die Größe und Breite des Elements angepasst und schließlich die Teile des Dreiecks, die nicht zu sehen sein sollen, mit einer transparenten Farbe verdeckt werden.

css-triangle-how-to

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

Auf diese Weise lassen sich die unterschiedlichsten Formen erstellen. Jedoch ist der Vorgang weder praktisch noch zuverlässig oder flexibel, da es sich nicht um echte Formen handelt und die Semantik nicht vorhanden ist. Mit den angewandten Tricks werden Formen nicht definiert, sondern nur visualisiert.

Kreisförmige Menüs mit CSS: clip-path

In CSS können Elemente ausgeschnitten oder in unterschiedliche Formen geschnitten werden, indem das CSS clip-path-Property genutzt wird. Das ausgeschnittene Element kann dabei jedes Container- oder Grafikelement sein.

clipping-illustration-700x222

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

Mithilfe des clip-path-Properties können Elemente an nicht-rechteckigen Formen angebracht werden. Dazu stehen vier Basisfunktionen zur Verfügung: circle(), ellipse(), inset() und polygon(). Die polygon-Funktion verfügt dabei über die meisten Möglichkeiten zur Gestaltung. Auch eine Referenz zu SVG-Elementen ist möglich, um die gewünschte Form zu definieren. Das ist hilfreich, da die CSS-Basisfunktionen beispielsweise nicht über Bögen verfügen.

.element {
/* … */
clip-path: url(#svgClipPathID);
}

Ändert man die Form eines Elements mittels clip-path, ändert man die Form des Darstellungsfelds. Das Element selbst bleibt rechteckig, nur der sichtbare Teil auf der Website hat sich verändert. So lassen sich ganz einfach kreisförmige Menüs erstellen: Zuerst werden alle rechteckigen Rasterpunkte übereinander positioniert, dann werden die Items an eine Form angepasst. Schließlich werden die Items noch so weit wie nötig rotiert, sodass die einzelnen Regionen zusammen eine runde Form ergeben:

circ-demo-700x562

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

Die Technik ist aber nicht sicher, da es einige Bugs in Webkit und anderen Browsern gibt, die ein solches Menü quasi unbrauchbar machen.

Auch mit CSS Transforms lassen sich kreisförmige Menüs darstellen, allerdings ist dafür viel Code-Hacking nötig. Sara Soueidan selbst rät von dieser Technik ab – wer sich dennoch dafür interessiert, kann das in ihrem Blogpost nachlesen.


Formen mit SVG

SVG ist XML – das heißt, dass Elemente in SVG vergleichbar mit HTML-Elementen sind. Gleichzeitig sind sie aber wesentlich flexibler und mächtiger, um Formen zu gestalten.

Geometrische Formen

In SVG existieren sechs Basisfunktionen: <line>, <polyline>, <rect>, <circle>, <ellipse> und <polygon>. Einige dieser Formen sind durch verschiedene Variablen definiert, beispielsweise durch Breite, Höhe und Lagewerte. Mithilfe des <path>-Elements können beliebige Path-Shapes gezeichnet werden, die mehr Flexibilität als CSS bieten: Denn tatsächlich lassen sich Formen in Grafikprogrammen zeichnen und der zugehörige Code dann als SVG exportieren.

geometrical forms svg

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

Die Vorteile von SVG liegen für Sara Soueidan klar auf der Hand:

  • SVG shapes are real content (actual elements drawn on screen, instead of empty divs with no content, which leads to.)
  • SVG shapes are accessible (by screen readers).
  • SVG shapes are semantic (element names and attributes).
  • SVG shapes can be edited using graphics editors, while CSS shapes can’t.
  • SVG shapes have powerful attributes that give you finer control over the end result (stroke, fill, stroke-width, etc.).

Kreisförmige Menüs mit SVG

Um in SVG kreisförmige Menüs zu gestalten, müssen die Bereichsformen mithilfe eines SVG <path>-Elements gezeichnet werden. Das geht entweder in einem Grafikeditor und mit dem anschließenden Export des Menüs als SVG oder durch direktes manuelles Coding. Beim Zeichnen müssen drei Punkte festgelegt werden: die Mitte des Menüs, der Rand des Menüs und der entsprechende Winkel des Menüs. Um diese Punkte genau zu bestimmen, benötigt es etwas Rechnerei. Wie das genau funktioniert, erklärt Soueidan im Artikel „Building a Circular Navigation with SVG“.


Fazit

Bis das clip-path-Property in CSS verfügbar wurde, war es fast unmöglich, nicht-rechteckige UI-Komponenten zu gestalten. Von der kurz angesprochenen CSS Transforms-Technik rät Sara Soueidan dringend ab; die clip-path-Technik hingegen eignet sich sowohl für CSS als auch SVG. SVG allerdings ist darauf ausgelegt, nicht-rechteckige Formen zu kreieren – aus diesem Grund lassen sich die entsprechenden Formen einfach ins gewählte Design integrieren. Aus diesem Grund ist für Soueidan SVG ganz klar die bessere Wahl für arbiträr-gestaltete UI-Komponenten.

Noch mehr zum Thema CSS vs. SVG findet sich hier:

Teil 1: CSS vs. SVG: wer hat bei grafischen Texteffekten die Nase vorn?

Teil 2: SVG vs. CSS – Styling Check

Teil 3: Formen mit SVG und CSS – welches Format eignet sich besser?

Teil 4: CSS vs. SVG – Die finale Runde

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: Vector geometric background. Triangles theme von Shutterstock / Urheberrecht: codesyn

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 -