Styling SVGs

Housekeeping

• The Obi-Wan trailer looks promising.
• Submit a response to Ash's Slack Poll if you haven't already.

---

1. SVG Basics

Materials

• What Is an SVG File? SVG Image and Tags Explained
• Gist: Getting Started

Slides: Scalable Vector Graphics

2. Demo: Exporting SVGs

Materials

• Optimization Tool: SVG OMG
• SVGs
  • Browser Therapy Logo
  • No Bugs icon
  • Skully Pinball Mascot (not optimized)

Activity: Optimize Skully

The third "Skully" logo ws exported from Illustrator and is not optimized for web. Use SVG OMG to fix this.

3. Inline SVGs in HTML

Activity: Styling SVGs

• Add a colour scheme to a pinball diagram (Codepen)

---

Lab Time

• Assignments
• Using CSS, create a dark mode version of an inline SVG.
  • Sample SVG: Browser Therapy Logo
• Animate an SVG with vanilla CSS
  • Example Codepen
• Install an SVG animation library
  • Greensock
  • Animejs

Prep

SVGs from a Code Perspective

• MDN article on SVGs

• SVG Basics from a Code Perspective

• SVG's can do that? (Video 38min)

  Sarah Drasner demonstrates some cool things that you can do with SVGs in web development at a conference.

SVG viewport and the viewBox

• What are SVG viewport and viewBox?

• Scaling SVG Elements

SVG Gists

• Getting Started

• Three ways to insert an SVG

• Clipping problems with viewBox