Over a million developers have joined DZone.

Angular Inside SVG Inside HTML

DZone 's Guide to

Angular Inside SVG Inside HTML

· Java Zone ·
Free Resource

SVG embedded inside HTML, appears to simply extend the grammar of HTML, and perfectly co-exists in the DOM. Angular can latch on to that and work with it.

I tool a SVG map of the states of the USA from Wikipedia and embedded it in a HTML page. I added Angular and bound incarceration data from another wikipedia page and made that a JSON model for Angular to consume.

Click here to see the result as stand alone.

Yes you can interact with it. One view shows a blue with increasing darkness for incarceration rates. The other one has green to show below US average incarceration rates, and red to show above average rates. I’m not a statistician though, and the luminosity calculations could be off.

Pictures, for those that can’t view the link:

Compare to the Wikipedia picture – the hues/luminosity for which appear off. Louisiana vs Oklahoma is an example:


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}