SVG in AngularJS

Scaleable Vector Graphics (SVG) are an XML based drawing pattern that allows for infinitely scaleable images for display purposes. They lend themselves to info graphics, charts and iconography, they are lightweight and can be controlled using CSS and libraries like jQuery.

Historically, SVG has required a whole bunch of markup to insert it into the body of an html page just so the javascript libraries can access the XML DOM. Enter AngularJS and simply add this line to include the SVG file: <div ng-include="my_svg_file.svg"></div>. All of the bindings are there and all you need to do is include in the SVG file where there are textual elements reliant on AJAXy stuff, that they are ALL surrounded in {{double_curly_braces}}, not just variables, but ng-class, ng-hide/show by using the slightly adapted version of ng-attr-class and so on. Also, any stylesheets using this method should be included within the body of the xml file within <style /> tags using SVG specific commands and properties.

I will cover SVG in a lot more detail, but using AngularJS, it got a whole lot easier to implement.