Bei der Entwicklung von mobilen Web-Anwendungen mit Responsive Design bieten SVG eine praktikable Lösung zur Realisierung flexibler Bilder (flexible images).
AngularJS ermöglicht seinerseits, komplexe UI-Logik in individuellen HTML-Direktiven zu kapseln, was eine saubere und wartbare Modularisierung ermöglicht.
Die Kombination dieser Technologien stellt eine gute Basis für interaktive Steuerungs- und Status-Elemente dar. Sie ist sowohl dazu geeignet, hochgradig komplexe Spezial-Bedienelemente zu erstellen, als auch einfachere Anwendungsfälle in generischer Weise zu behandeln.

Teil 1 dieses Artikels untersucht verschiedene Methoden, SVG als flexible Bilder in browser-übergreifender Weise zu verwenden.

Teil 2 beschreibt die Verwendung von AngularJS zur Steuerung von SVG-Bildern, um individuelle Kontroll- und Status-Elemente zu realisieren.
Weiterlesen →

Bei der Entwicklung von mobilen Web-Anwendungen mit Responsive Design stellen flexible Bilder (flexible images) ein besonderes Problem dar.
SVG bieten eine gangbare Lösung: Sie sind deutlich kompakter als Bitmaps vergleichbarer Größe, und können über ihre DOM-API gesteuert werden.
AngularJS ist wiederum gut dafür geeignet, die Logik komplexer UI-Elemente in individuellen HTML-Direktiven zu kapseln.
Die Kombination der beiden erscheint attraktiv, allerdings gilt es dabei diverse Stolpersteine zu vermeiden.

Teil 1 dieses Artikels untersucht verschiedene Methoden, SVG als flexible Bilder in browser-übergreifender Weise zu verwenden.

Teil 2 beschreibt die Verwendung von AngularJS zur Steuerung von SVG-Bildern, um individuelle Kontroll- und Status-Elemente zu realisieren.

Weiterlesen →