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

var shape = document.getElementById(‘sag’)

// media query event handler

if (matchMedia) {
  var mq = window.matchMedia(‘(min-width: 500px)’);
  mq.addListener(WidthChange);
  WidthChange(mq);
}
// media query change
function WidthChange(mq) {
  if (mq.matches) {
    shape.setAttribyte(‘viewBox’, ‘0 0 490 474’);
  } else {
    shape.setAttribyte(‘viewBox’, ‘0 0 500 500’);
  }
}

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

results matching ""

    No results matching ""