2019-10_SVG-0-35_Net.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
  • Raising hands
    • Heard of SVG
    • Used svg assets in a site
    • Exported svgs using software
    • Created svgs using software
    • Edited svg code in file / inline
    • Inline svgs
    • Animated svgs
• Not covering
  • Svg files
  • Browser differences
  • Vector graphic softwares (Illustrator, Inkscape etc)
• MDN Resources
  • MDN: SVG
  • MDN: SVG Tutorial
  • MDN: SVG Elements
• Ask questions along the way! Let me know if I'm going to fast!

1. Preserve Aspect Ratio

Cool hack

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)

Quick words on...

Saving files + optimizing

• Reduce digits
  • Select good viewboxes

  viewBox="0 0 10 10"
  viewBox="0 0 28000 28000"
  viewBox="0 0 10.0625 10.0625"
  

  • Reduce decimal points (smartly)
• Remove not needed code
• SVGOMG
• SVGO

Performance

• Smaller file size the better 😀👍
• Svg elements add dom nodes