Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG Reality

SVG Reality

Talk at CSSConf.asia 2014
http://2014.cssconf.asia/

Sebastiaan Deckers

November 19, 2014
Tweet

More Decks by Sebastiaan Deckers

Other Decks in Programming

Transcript

  1. SEBASTIAAN DECKERS SEBASTIAAN DECKERS SEBASTIAAN DECKERS FRONT END DEVELOPER AT

    COFOUNDERS.SG FRONT END DEVELOPER AT COFOUNDERS.SG FRONT END DEVELOPER AT COFOUNDERS.SG
  2. SVG vs CSS SVG vs CSS SVG vs CSS HiDPI

    Animations Hardware Acceleration Blending Modes Responsive Media Queries Debugging Inspector Filters DOM API Scripting Colour Profiles
  3. Paths <path> Text based drawing instructions for line, arc, bezier

    curve, quadratic curve, etc. Use an editor! Inkscape, Sketch, Illustrator
  4. WEB COMPONENTS WEB COMPONENTS WEB COMPONENTS document.registerElement('my-shape', { extends: 'circle',

    prototype: Object.create( SVGCircleElement.prototype, {/*...*/} ) })
  5. INLINE IN SVG CASCADING IN SVG CASCADING IN HTML EXTERNAL

    FROM SVG INLINE IN SVG CASCADING IN SVG CASCADING IN HTML EXTERNAL FROM SVG
  6. preserveAspectRatio preserveAspectRatio POOR MAN’S BG-SIZE preserveAspectRatio X/Y min/mid/max, slice/keep X/Y

    min/mid/max, slice/keep X/Y min/mid/max, slice/keep POOR MAN’S BG-SIZE POOR MAN’S BG-SIZE