ngInclude and SVGs =

Of late I have been deep in Angular land and I just thought I’d share a little discovery that I was shown by a fellow work college (@dylanFM) the other day.

It’s nothing mind boggling but if you prefer to work with your SVGs inline and are a little OCD in the way your code looks you might enjoy this tip.

So Angular has a handy built-in directive called “ngInclude” and funnily enough, it can include stuff.

Fetches, compiles and includes an external HTML fragment.

Utilising ngInclude means that we can do away with having the full SVG source polluting our template files and just reference them like so:

<div ng-include="'assets/your.svg'"></div>

Note – Be sure to wrap your image path in single quotes, e.g. src=”‘assets/your.svg'”.

And Angular will do its magic and output the SVG inline like so:

<div ng-include="'assets/your.svg'" class="ng-scope">

High five to clean templates files!

6 thoughts on “ngInclude and SVGs =”

  1. That’s that ultimate goal in web design, but i thought data-sets in html are supposed to be used in conjunction with a js file to read those attributes?

  2. Hey guys!

    Like this technique. As you all know, one of the great things about svg graphics is that you can re-size them. Is it possible to add a size variable to ng-include?

Comments are closed.