SVG

Scalar Vector Graphics

libraries

Code

  • preserveAspectRatio to slice or adjust the svg inside the viewport.
  • animation hooks

Using media queries

hiding parts of the svg sprite with media queries

  1. var shape = document.getElementById(‘sag’)
  3. // media query event handler
  5. if (matchMedia) {
  6.   var mq = window.matchMedia(‘(min-width: 500px)’);
  7.   mq.addListener(WidthChange);
  8.   WidthChange(mq);
  9. }
  10. // media query change
  11. function WidthChange(mq) {
  12.   if (mq.matches) {
  13.     shape.setAttribyte(‘viewBox’, ‘0 0 490 474’);
  14.   } else {
  15.     shape.setAttribyte(‘viewBox’, ‘0 0 500 500’);
  16.   }
  17. }

Books

SVG Essentials, 2nd Edition

Producing Scalable Vector Graphics with XML
By J. Eisenberg, Amelia Bellamy-Royds

Reference

Tools

  • Milanote - Mood board
  • SVGO- Nodejs-based tool for optimizing SVG vector graphics files
  • svgomg - SVG optimizer by Jake Archibald
  • svgr - from svg to react

Best practices

  • set svg width and height in CSS instead of inline because otherwise its difficult to override

Courses

Examples & Inspiration