So funktioniert die JavaScript-Library

Leichteres Programmieren von SVGs mit Raphael
Kommentare

Um Bilder und Grafiken in Websites einzubinden, gibt es unterschiedliche Formate, die allesamt Vor- und Nachteile haben. Typischerweise werden Bitmaps dafür genutzt – und das ist für Fotos auch vollkommen in Ordnung. Bei Illustrationen und GUI-Komponenten ist es dagegen ratsam, auf andere Formate wie etwa SVGs auszuweichen.

So bieten Vektorgrafiken gegenüber Bitmaps viele Vorteile für die Nutzung im Web – etwa, dass sie problemlos animiert werden können oder leicht skalierbar und responsiv sind. Zudem müssen SVGs nicht als Objekt eingebettet werden, sondern können direkt im Dokument platziert werden. Der einzige Nachteil: die Lernkurve bei der Nutzung von SVGs. Tools wie die JavaScript-Library Raphael sollen Webdesignern die Arbeit mit dem Grafikformat vereinfachen. Emma Grant erklärt, wie das funktioniert.

Nutzung von Raphael

SVGs nativ zu programmieren, stellt viele Webdesigner vor eine große Herausforderung – was angesichts der zahlreichen Möglichkeiten zur Nutzung des Formats und unterschiedlichen Fallback-Lösungen wenig überraschend ist. Abhilfe soll dabei die JavaScript-Library Raphael bieten, die einige Vorteile bietet. So ist sie sowohl mit HTML4, als auch HTML5 und XHTML kompatibel und funktioniert in allen gängigen Browsern, die auch SVGs unterstützen. Zudem vereinfacht sie den Prozess des SVG-Codings enorm.

Um sich mit Raphael an die Arbeit machen zu können, wird die Library zunächst in das HTML-Dokument eingebunden. Dann kann das Drawing an der entsprechende Stell eingefügt und mit den notwendigen Objekten versehen werden. Dabei sind die vergebenen Parameter besonders wichtig, die sowohl angeben, welches div das Drawing-Objekt empfängt, als auch welche Höhe und Breite das Objekt in Pixel besitzt. Auch verschiedene Attribute lassen sich an dieser Stelle mit den entsprechenden Variablen hinzufügen.

Emma Grant zeigt anhand einer Real-Life-Implementierung einer in Raphael entwickelten Applikation und zahlreichen Code-Beispielen detaillierter, wie man mit der Library arbeiten kann. In jedem Fall sorgt sie für eine deutliche Vereinfachung der Arbeit mit SVGs und ist dabei auch noch leicht zu bedienen. Sie steht auf der Projekt-Website zur Verfügung; dort finden sich zudem noch viele weitere Beispiele für die praktische Nutzung.

Aufmacherbild: Man angel von Shutterstock / Urheberrecht: nutriaaa

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -