Inline SVG's

Presented by Tom Friedhof

Tom Friedhof

Senior Solutions Architect at ActiveLAMP
@tomfriedhof
@activelamp

When should you use SVG?

Logos
Icons
Animations

Basically any graphics that you can create in Illustrator.

Why should you use SVG?

Scales to any size (vector graphic)
High density displays are becoming the norm
Manipulate images with css

Basically any graphics that you can create in Illustrator.

The ActiveLAMP Logo

SVG is written right into the page

That's a lot of markup to look at in the HTML

Use the <img> tag

But now you can't manipulate the SVG with CSS

There are other ways to embed SVG too!

I won't be covering that today

I want clean HTML markup

and I want to be able to manipulate the SVG with CSS

Can I replace the <img> tag with SVG code?

Inline SVG

https://github.com/jonnyhaynes/inline-svg

Questions?

Send me an email:

tom@activelamp.com

or in IRC #drupal-la