SVG and Canvas Graphics in Angular 2

Posted on by Tero Parviainen

Most Angular applications are built using good old HTML and CSS. But it just so happens that HTML is only one of the four main rendering pipelines made available on the web platform, the three other ones being SVG, the 2D Canvas, and the 3D WebGL Canvas.

These alternative rendering technologies can be very useful when you are building something highly visual. Icons, charts and other data visualizations, mapping apps, and games are all examples of things that can be difficult to build using just HTML, but relatively easy to accomplish with SVG or Canvas.

In this guide I will describe how you can incorporate SVG and 2D Canvas graphics into Angular applications, and how you can avoid potential problems along the way. I will also describe how to add motion to SVG and Canvas graphics by animating them. We will look at the various options available and learn about their strengths and weaknesses.

Read more →