SVG canvas

• the space where the SVG content is drawn
• infinite, rendered on finite viewport though
• SVG lying beyond the viewport boundaries is clipped off

SVG viewport

• viewing area where the SVG will be visible
• kind of a window
• similar to a browser viewport

<!-- viewport will be 800 px wide and 600 px high -->
<svg width="800" height="600">

</svg>

• viewport coordinate system
  • origin at the top left corner [0,0] - similar to CSS box model
• user coordinate system
  • established on the SVG canvas, identical to viewport CRS
  • can be modified using viewBox attribute

https://embed.plnkr.co/zW8DQvpfn1CHnHNi5QLy/

SVG viewBox

• attribute

• viewBox = <min-x> <min-y> <width> <height>

  • <min-x>, <min-y> = the upper left corner of the viewbox

  • <width>, <height> = width and height of the viewbox 

• it can translate, transform, crop SVG
• https://embed.plnkr.co/zcCe8jGPQrx7hOOfFQFe/
• http://embed.plnkr.co/zuYDA0awu9EJgSBaAu2M/
• http://embed.plnkr.co/jTMrRsX2x721OVo0FEiV/

SVG animations

• they're real fun
• SMIL
• CSS
• JavaScript

SVG SMIL animations

• synchronized multimedia integration language
• never supported in IE/Edge
• deprecated in Chrome since v 45
• animates the numeric attributes (you tell me)
• animates transform attributes
• animates color attributes
• follows a motion path
• http://embed.plnkr.co/EPqAPZRTkshodLuzTuRa/

SVG CSS animations

• Only presentation attributes available as CSS properties can be set and animated in CSS
• http://embed.plnkr.co/gEZZa5et03mdJfsGnr85/
• see https://css-tricks.com/

SVG JavaScript animations

• most powerful
• DOM usage

Let's produce simple SVG with QGIS x Kartograph

Let's do some basic animations on top of that SVG