SVG
SCALABLE VECTOR GRAPHICS
Why NOW?
RASTER IMAGES
SVG IS A set of instructions
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="360px" height="360px" viewBox="0 0 360 360" enable-background="new 0 0 360 360" xml:space="preserve">
<circle fill="#ED1C24" cx="126" cy="126" r="90"/>
<rect x="144" y="144" fill="#21409A" width="180" height="180"/>
</svg>svg for the web
General Guidelines
| "Good" | "Bad" |
| Flat | Textured |
| Simple | Incredibly detailed |
| Illustrated | Photorealistic |
SVGs are...
...resolution independent
...small (ideally)
INcluding svg
<img>
css background-image
<object>
inline svg
SVG HAS SUPERPOWERS
SVG SUPERPOWER:
scalable, searchable text
SVG SuperPOWER:
ELEMENT QUERIES
SVG Superpower:
ANIMATION & INTERACTIVITY
EXTRA RESOURCES
SVG
By welch canavan
