Primer

---

Scalable Vector Graphic (SVG)

• Can be styled with CSS and controlled with JavaScript

  • Vue Controlled Wall-E

• Will not lose quality on resize up or down

  • SVG Quality Scales

• Packaged into large icon sets. One-file, many options.

  • Font Awesome

• An markup language itself

  • SVG on MDN

• Essential for Responsive Web Design

  • Responsive SVG. Note, WebKit only.

Get SVG

Too many free and paid resources to list adequately.

• Lottie

• Icon Monster

• Figma Assets

• Adobe Vectors

• CodePen

• Undraw

• …search for it.

SVG Tools

Illustrator, Figma, Sketch, Affinity Designer, or equivalent vector design tool. We will be using the free Figma plan.

Reference

• *SVG: Core Principles* from Learning SVG from LinkedIn Learning