2019-08_SVG-0-35_JSMN.md

Hi! I'm Shalanah!

• Full: Shalanah Faith Dawson
• Lead Front End Developer at WHCC in Eagan
• Live in St. Paul originally from just outside of Chicago
• Play broomball year-round
• Github: @shalanah
• Twitter: @shalanahfaith

SVG 0-35: A code-along

Intro

• Usually do "pretty" slides (not this time!)
• Start slow... going to build :)
• Covering
  • Hand coding inline SVGs + rad things with them
• Not covering
  • Saving files + optimizing
  • Browser differences
  • Vector graphic softwares (Illustrator, Inkscape etc)
  • Performance
• MDN Resources
  • MDN: SVG
  • MDN: SVG Tutorial
  • MDN: SVG Elements

1. Preserve Aspect Ratio

Code along

2. Coordinates + Shapes

Code along

Additional Links

• MDN: SVG Paths
• CSS Tricks: Svg path syntax an illustrated guide

3. Clips + Masks

Code along

Additional Links

• Codepen: CSS and SVG Masks

4. Color Matrix + Filters

Code along

Additional Links

• MDN: feColorMatrix
• A List Apart: Finessing feColorMatrix
• Codepen Dual tone
• Codepen Gooey

In production

• WHCC: Card Editor (went live about 3 years ago)