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
– 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
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!
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
• 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
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
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
with HTML • Can manipulate with CSS/JS • Can cache one file Cons • More complex to set up than the other options <svg> <symbol> <!-- one sprite --> </symbol> <symbol> <!-- second sprite --> </symbol> <!-- etc... --> </svg>
caramiki
kakutani
cielo1985
soudai
10xinc
kotaminato
muit
kekekenta
hikarusato
ysasago
nihonbuson
kazumax55
yappli_developers
addyosmani
techseoconnect
jmmastey
katiecoart
axbom
lauravandoore
kneath
caitiem20
katarinadahlin
rasagy
mfonobong
chriscoyier
![The End :3 @caramiki github.com/caramiki caramiki.com [email protected]](https://files.speakerdeck.com/presentations/80f09977dd8a4fbfa60836f47115c478/slide_20.jpg){kind=link}