Interactive SVG with AngularJS – Part 1

When developing mobile web applications with responsive design, flexible images for interactive control and status elements pose a particular problem. SVG offer a viable solution: They are much smaller than bitmaps of comparable size, and can be manipulated through their DOM API. AngularJS in turn is well suited to wrap complex UI element logic in custom HTML directives, resulting in clean and maintainable modules. Combining the two sounds attractive, but involves a couple of stumbling blocks to avoid. Part 1 of this article explores several methods of employing SVG as flexible images in a cross-browser compatible manner. Part 2 describes the use of AngularJS to construct custom control and status elements by manipulating SVG images.Image may be NSFW.
Clik here to view.