Overview

Why?

• Code for comples SVG, CSS gradients, CSS shapes/lines, etc. can get verbose

• Saves time, but still provide customizable flexible code

• Understanding of SVG and CSS provides infinite options

How?

Use one of the many SVG Generators that exist. Here is one recommended resource.

Free SVG generators, color tools & web design toolsfffuel.co

What?

• Can I do with this?

  • Add visual appeal to your websites with small code files versus loading large (raster) images

• What does this do for me?

  • Speed decision making and reduces decision fatigue.

• What if I still need a raster image?

  • Generators reduce the file size as much as possible versus using Photoshop, Figma, etc.

• What do I need to know?

  • HTML, CSS, and SVG. :-)

• What are doing again?

  • First use existing generators, then we'll make our own.

  • Learn coding by making design tools. Get meta.