Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Angular and SVG


This sample has originally been developed for Magdeburger Dev Days 2018. I refreshed and extended the material for Techorama Netherlands 2018. The goal is to show how to use SVG + WebSockets in Angular projects.

Demo Checklist

SVG Recap

The goal of this project is not to do a general SVG introduction. However, some people might not be that familiar with SVG. Therefore, use whats-svg.component.html to recap the SVG concepts that one needs to understand to be able to follow the Angular-related part of that talk.

  • External vs. internal SVG sources - internal sources are important for Angular
  • Style SVG with CSS
  • How to work with transforms
  • Animate SVG with CSS, discuss other options for animations
  • Dashed lines in SVG
  • Paths and arcs


Use attr-binding.component.html to discuss binding topics.

  • Attribute binding instead of property binding
  • Show that event binding just works
  • Demonstrate the combination of CSS styling of SVG, class binding, and Angular to build a simple SVG-based control with clear view/logic separation

Building SVG-based Components

The component in budget-chart.component.ts shows how to build an SVG-based Angular directive.

  • Use of attribute selector in component
  • svg: namespace for identifying SVG elements in Angular templates
  • @Input decorator for inpupt parameters
  • :host ::ng-deep in CSS (see project-list.component.css)
  • Use component in parent SVG (see project-list.component.html) including data binding in a structural directive


The next sample brings everything together. It implements a silo element in a ficticious IoT visualization library. The element silo is a reusable component, uses Angular animations and supports context menus.


The last sample demonstrates the integration of SVG+Angular+Websockets. A demo server is regularly sending the fill state of a silo using WebSockets.

You can’t perform that action at this time.