Intro to SVGs

Intro to SVGs a.k.a. This Presentation Is a Thing That
Is Happening, I Guess By Cara Michele Ryan

First of all, why the subtitle? I gave my first
tech talk in 2014 about SVGs…

So then this happened…

Thus I gave my first talk

Anyway…

What are SVGs? Scalable Vector Graphics • Allows for using
vector images on web pages • All the major browsers at least sorta kinda support them (IE 9+, Firefox, Safari, Opera, Chrome, etc.) • All the major browsers support them

What are vector graphics? Bitmap/Raster Graphics • Composed of pixels
– a grid of squares • Scaling it up results in lower quality; you can see the pixels • Common file types: jpg, jpeg, png, gif Vector Graphics • Composed of MATH – mathematically determined points, lines, curves, and shapes • You can scale it to any size because the image is made of math • Common file types: svg, ai (Adobe Illustrator) Raster VS Vector

Why use SVGs? • Scalability – You can make them
whatever size you want without losing quality. • Less HTTP requests – SVGs can be inserted directly into the markup, or you can create SVG sprites (more on that later) • Manipulatable with CSS/Javascript – Want to change the color of your graphic on the fly? You can!

Getting Familiar with SVGs HTML TAG DESCRIPTION <svg> The container
for the SVG <g> Container for subelements of the SVG (if you were using layers in your drawing program, it will probably put all the shapes in one layer into one g tag) <line> A line between two points <path> A line that can have curves and more than two points <circle> <ellipse> <rect> <polygon> Some basic, self-explanatory shapes

Getting Familiar with SVGs CSS PROPERT Y DESCRIPTION fill The
color of the SVG node stroke The border color of the SVG node stroke-width The border width of the SVG node

Getting Familiar with SVGs You can open an SVG file
in your browser and inspect it like you would inspect any HTML Demo Time!

NO Ways to Work with SVGs • Icon fonts

Why Not Icon Fonts? • Accessibility problems • Semantic problems
• FOUT (flash of unstyled text) problems • Difficult to edit once generated • Limited to one color icons • Icon fonts are so 2014 and you won’t be cool

Ways to Work with SVGs • Icon fonts • In
an <img> tag • As a background image • Inline • As SVG sprites

SVGs in <img> tags <img src="/images/butterfly.svg" alt="Butterfly> Pros • As
easy as using any other type of image Cons • Can't manipulate with CSS/JS • Multiple requests for multiple images • Not utilizing any of the advantages of SVGs besides scalability

SVGs as Background Images Pros • As easy as using
any other type of image .butterfly { background-image: url("images/butterfly.svg"); } Cons • Can't manipulate with CSS/JS • Multiple requests for multiple images • Not utilizing any of the advantages of SVGs besides scalability • Not semantic if it's not actually being used as a background image

SVGs Inline Pros • SVG code can live in harmony
with HTML • Can manipulate with CSS/JS Cons • Can't cache <html> <head>  </head> <body> <svg>  </svg> </body> </html>

SVG Sprites Pros • SVG code can live in harmony
with HTML • Can manipulate with CSS/JS • Can cache one file Cons • More complex to set up than the other options <svg> <symbol>  </symbol> <symbol>  </symbol>  </svg>

Example Projects Demo Time!

The End :3 @caramiki github.com/caramiki caramiki.com [email protected]

Intro to SVGs

Intro to SVGs

Cara Michele Ryan

More Decks by Cara Michele Ryan

Other Decks in Technology

Featured

Transcript

Intro to SVGs a.k.a. This Presentation Is a Thing That

First of all, why the subtitle? I gave my first

So then this happened…

Thus I gave my first talk

Anyway…

What are SVGs? Scalable Vector Graphics • Allows for using

What are vector graphics? Bitmap/Raster Graphics • Composed of pixels

Why use SVGs? • Scalability – You can make them

Getting Familiar with SVGs HTML TAG DESCRIPTION <svg> The container

Getting Familiar with SVGs CSS PROPERT Y DESCRIPTION fill The

Getting Familiar with SVGs You can open an SVG file

NO Ways to Work with SVGs • Icon fonts

Why Not Icon Fonts? • Accessibility problems • Semantic problems

Ways to Work with SVGs • Icon fonts • In

SVGs in <img> tags <img src="/images/butterfly.svg" alt="Butterfly> Pros • As

SVGs as Background Images Pros • As easy as using

SVGs Inline Pros • SVG code can live in harmony

SVG Sprites Pros • SVG code can live in harmony

Example Projects Demo Time!

Example Projects Demo Time!

The End :3 @caramiki github.com/caramiki caramiki.com [email protected]