While Una’s presentation was on optimizing raster images, Chris’s presentation is on the things that can be accomplished when we use SVG files – a specific form of vector images. (Neither speaker did a significant amount to explain the difference, and it’s a core concept in design, so if you’re new to the field or you need a refresher read up on the difference.)
An Event Apart Seattle 2017 10 Things You Can and Should Do with SVG by Chris Coyier (pdf)
Chris Coyer has 10 things you can and should do with SVGs #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
SVG is an image format, and you can use it in the same way you use all the others #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
You don’t have to know a heck of a lot about it to use SVG…. but it’s different from the raster images #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
It’s a vector image, it’s not made of pixels. Vectors are drawn with lines and fills and geometry #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
An SVG is a syntax that looks like HTML
You can open an SVG in a text editor and look at it
It’s resolution-independent#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
SVG is animatable and scriptable.
SVG can be quite accessible.
It’s an open standardized format.
It has good browser support.#AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
Lots of software for working with it
Many nice Javascript libraries #AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
SVGs are totally underused #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
I will reach for SVG @chriscoyier I will #aeasea pic.twitter.com/5rJkPL3woe
— Jacob Wayne Smith (@j8ke) April 4, 2017
Reach for SVGs – make it part of your “muscle memory” for development #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Inline SVG is a very good way to use it, and most of the demos in today presentation uses inline SVG#AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
1. Make the logo bigger.
Really easy to make it bigger because it’s resizable #AEASEA— Anne Gibson (@perpendicularme) April 4, 2017
OK not really. Or maybe really.
Raster images are jaggy and ugly when blown up, but SVGs look great at any size #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
this is true of any other image #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
The whole entire last talk was worrying about pixels. Not an issue here #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
We have a unique disorder to deal with. @chriscoyier #aeasea pic.twitter.com/kyzsesF2Ij
— jared bishop (@bishopart) April 4, 2017
SVG images are also just fine on retina because they’re vector, no 2x density images needed #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
We didn’t have SVG when retina came out because IE didn’t support it thoroughly enough #AEASEA
— Anne Gibson (@perpendicularme) April 4, 2017
Today all browsers support SVGs #AEASEA “Even Opera Mini, which is always red!”
— Anne Gibson (@perpendicularme) April 4, 2017
OK, let’s start numbering for real this time.
1. Charts and Graphs
Just makes sense – they’re lines and shapes anyway #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
Pie charts are a trivial thing in SVG.
Line charts are easy to draw, text can be set, etc. #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
Line charts can be animated in SVG.
Curves can be done in SVG.
The lines have a lot more design control in strokes. #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
Lines can be animated themselves, can have glows.
Line charts can have fill underneath, and interactive data.
Mouse enter events #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
What’s in John’s lunch? #savejohnslunch @chriscoyier #aeasea pic.twitter.com/Sk4i2QJjNK
— jared bishop (@bishopart) April 5, 2017
2. Shape morphing
SVGs can bounce or change shape. Smile is the native technology to animate properties #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
You can do opacity and position and scale and color and shapes in SVG #aeasea
— Anne Gibson (@perpendicularme) April 5, 2017
Greensock is working on SVG shapes realtime animation through a plugin #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
SMIL morphing still have some bummers. Don't invest a lot of time. #aeasea pic.twitter.com/sXpx3vBqPf
— Anne Gibson (@perpendicularme) April 5, 2017
there are other competing tools than greensock that also do some of this work #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
CSS can do shape animation of SVGs in Chrome #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
The path element can draw anything (literally) using points and lines and curves #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
If you came from video and are used to AfterEffects, there’s a too to convert AfterEffects to SVG #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
3. Line drawing.
Example of the PlayStation drawing itself in an article #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
You can fade things in, move things, draw things, use different animation techniques #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
☞ How SVG Line Animation Works @chriscoyier #aeasea https://t.co/OsD01PkJ7e
— zeldman (@zeldman) April 5, 2017
How line animation works:
-Dash the stroke
-Gap the dashes as long as the whole shape is
-Then animate the offset changes#aeasea— Anne Gibson (@perpendicularme) April 5, 2017
Fitbit is a brand that is all about movement and data, and their logo can be animated in SVG to move #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
4. Animate your interface.
Transitional interfaces – animate something sliding in or growing in to a list for example #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
You can be whimsical in sliders or radio buttons that use SVGs #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Submit buttons that are also progress bars. SVG clipping masks on images to animate change of images #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Loaders are an obvious thing to animate #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Lots of loaders and spinners in SVG in Codepen #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
SVG is able to be animated along a path, so that can be tied to a scroll bar for example #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
With lines being so small in file size, you can provide little hints and guidance to things #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
5. The very best icon system ever
There is a <symbol> element whose point is icons #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
Symbols in an SVG can have different view boxes, accessibility info, etc. #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
You put a folder of SVGs through Gulp to produce the SVG full of symbols #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Then you just need to say
<SVG>
<use clink:href=”#mag“>
</SVG>To call it #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
All the reasons svgs are better than icon fonts #aeasea pic.twitter.com/dZyGGROEye
— Anne Gibson (@perpendicularme) April 5, 2017
CSS-tricks uses SVG icons and symbols to build their iconography. #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
6. Do art
Great animation of BB8 all done in SVG,
Animate fire
Make Mr. Potato Head #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
There are a ton of Codepen demos in @chriscoyier’s slides you should check out #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Reaching for SVG when creating illustration assets can assist designers in solving a multitude of image and optimization issues. #aeasea pic.twitter.com/61VUxEqdkI
— christopher hincks (@chincks) April 5, 2017
Combine tons of different techniques for neat effects #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
7. Diagrams – you can make lots of data and then make it interactive #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Take a piece of code, wrap it in an SVG, add comments and text and custom fonts, then add arrows to explain the code #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
The anatomy of responsive images @jaffathecake @chriscoyier #aeasea https://t.co/CmLxPJwNnq
— zeldman (@zeldman) April 5, 2017
Explanations of code, content, etc, can be enhanced with SVG #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Easier to set type and have it display exactly the way you want it to if you do it in an SVG #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
8. Headline Lock-up
You can set text in whole new ways for headlines. Things we can’t do easily w/o png files #AEASEA— Anne Gibson (@perpendicularme) April 5, 2017
SVGs allow you to still use media queries to shift elements around if you want to #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Inscape for open-source vector editing software #aeasea
— Anne Gibson (@perpendicularme) April 5, 2017
“One student made a unicorn on another unicorn. The world is going to be fine.” #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Boxcar Press lets you make a polymer plate from an SVG to letterpress designs into paper #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
10. Explain your product. Animation of how your product works or instructions #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Explain how gear differentials work, give tutorials, etc. #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
View box – you can move the location of the view across the SVG drawing area and then animate moving the camera #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017
Polygons + view box animation + shape morphs = interesting animations #AEASEA
— Anne Gibson (@perpendicularme) April 5, 2017