SVG is a cool image format

Vector on the web!

...quick reminder of vector vs raster...

Vectors are made of paths, not pixels.

You're probably familiar with raster image files

... JPG ...

... PNG ...

... GIF ...

SVG is just as easy to use

But it's way cooler to use the native SVG object

it's really not that scary

How do you get svg images?

• Make 'em in Illustrator or Inkscape (ask me for help!)
• Find 'em on the Internet
• Places you already know (Font Awesome)

Basic SVG advantages: Resizing

Enlarge to any size with no loss in quality!

Seriously, any size

Basic SVG advantages:
Small File Size

This dolphin is 2kb!

Basic SVG advantages:
Small File Size

This dolphin is 4kb!

Moving on

You can change the color of the paths...

path.purple {
  fill: #6C5196;
}
					

Ok but check this out

Seriously whaaaaaa

Fills can be almost anything

Patterns!

Fills can be almost anything

Use an SVG as a mask for another image!

*svg options not supported in all browsers