Thanks, Eric.
Yeah.
It was another An Event Apart, and my wife called me.
And she's like, you should maybe come home
because I'm literally in the hospital having a baby.
[LAUGHTER]
Cool.
She was early.
It was hectic.
Ruby, though, is her name.
Hi, Denver.
We're going to look at a bunch of SVG stuff.
It is my privilege and honor to talk about SVG.
I absolutely love it-- one of my favorite things
to talk about, hence the high five, I guess.
I use it all the time.
It's just part of my regular day-to-day tool box of things
that I use.
And it's not because I have some special job,
where I'm a vector graphics nerd or anything.
It's just like-- I just like jammed it into my tool box
over the last few years, and now it comes up all the time
that I need it.
It's just a natural part of my workflow, which I like now.
And we're going to make it part of years, by god.
Let me grab this clicker thing.
So we've got to do a little intro stuff,
not because the talk necessarily needs it, because you need it.
We're going to define what SVG is
because part of my forcing it into your workflow
is for you to totally get it so that--
I feel like that works for some people.
If you firmly understand the tech,
and where it fits into the holes,
that maybe you'll reach for it just because you know
it's the right peg for that hole, or whatever.
SVG is-- one way that you can use it is just--
you need to know nothing about SVG,
other than it's an image format in the same way
that you might use a JPEG, a GIF, or a PNG,
or any fancy new format, or whatever,
how you can just use image source whatever
and drop it there and work--
totally works that way, too.
Or it can be a background image in your CSS.
That's one way that you can use SVG, and it's still vector.
That's the big differentiating thing of the SVG format
is it's vector, not raster.
Raster is pixels, right?
So just that is kind of great.
Even if you use it that way, it's still vector.
It still scales like vector, and that
has all kinds of enormous benefits on the web, scaling
being the big one, right?
You can make an SVG super big.
It doesn't lose any quality.
It's probably super small, too.
A lot of the usage for vector graphics on the web
is some kind of relatively simple shape, in which case
the SVG code will just be tiny, tiny weeny, which
is awesome for performance.
And you can scale it huge if you want to.
SVG is great for that kind of thing.
All of the rest of the formats--
JPEG, GIF, WebP, whatever-- they're all pixel-based.
They're all raster.
They're all just grids of pixels.
In fact, this is funny.
I was just standing by Eric [? Mayer. ?]
One time, when I had a talk like this,
he wrote a program that would convert a raster image into SVG
by making one by one SVG squares next to each other.
It was totally absurd.
But we were testing gzip.
It was kind of fun.
But anyway, you have no choice.
If you're into vector graphics, and want
to take advantage of vectorness on the web, it's SVG.
There's only one thing.
So if you want vector, then you've got to do it.
The rest of them are all pixels.
And they're just-- some of them have alpha transparency,
and some of them don't.
And you learned a lot from [? Una ?]
about formats that way.
Even canvas is all pixel-based kind of thing.
You want vector, you've got to use SVG.
It draws-- everything in SVG is vector.
It draws from math-- geometry, really.
It's full of numbers.
You can open up an SVG file, see a bunch of numbers.
And it's just geometric math.
It's like, put the pen down here.
Draw a straight line over here.
Draw another line over here, then curve to it,
based on this information.
There's nothing that SVG can't draw.
There's no mathematical limitations
to the things it can draw.
It can draw whatever.
It's just instructions for drawing stuff--
declarative, you might say.
So we covered that you can put it in an image source equals
whatever-- face.svg--
and it works that way.
You can use it in a CSS as well.
But there's another way that most of the rest of this talk
is going to cover, which is just using it inline.
You can take that SVG code, and you can just
put it right in HTML.
And that works, too, and that's a very compelling way
to use SVG.
Here's an example of that.
There's a body tag.
That's just like, look, we're in HTML.
And you can just take some SVG and just put it right in HTML.
So there's a document-- the body document.
And SVG's like a subdocument in the HTML.
And, in this case, there is a view box on it,
which just says--
there's other thing I was just talking with Eric about.
But the idea-- you notice there's
no pixels, or rems, or ems, or any percentages,
or anything on that.
It's just four numbers in a row.
That just says, this is the coordinate system, in which you
can draw stuff inside of me.
And it really doesn't do anything.
I mean, it has some side effects.
But it doesn't do anything other than-- then
that circle below will draw itself
based on that coordinate system that you just
gave-- just a simple little thing about SVG
and how it works.
So here's an example of inline SVG.
Blah blah blah, paragraph tag, it renders some text.
And then all of a sudden, there's
a big chunk of inline SVG.
It draws, in this case, the CodePen logo, and then
another paragraph tag below there.
You can intermix these things.
Here's some HTML.
Here's some SVG.
Here's some HTML-- perfectly fine way to use it.
I wrote a book about SVG.
It's actually mandatory that you buy it.
Sorry, I don't know if you got that email.
Gotta do it, though.
But, you know, it's from A Book Apart, who are out there.
And they're giving away books, too.
I saw stacks of them out there.
Not everybody's grabbing their free books,
but there's two of them out there that you get.
And I wrote one, too, on the same label.
And it's a little over a year old,
which is like, why would I buy it, then?
Little old, isn't it?
Textbooks are notorious for going out of style, you know,
or having a bunch of outdated information in them.
One A Book Apart books tend to not
do that because they tend to be conceptual,
and they age a little better than your average textbook,
I would say.
But more importantly, what has changed in SVG in the year
since I've written it?
You know, what would I amend?
When's v. 2 coming out?
It isn't because nothing has happened.
Perfectly up to date, which is fantastic for me, really,
and you.
You can think of it as stable.
That's another-- that's nice.
Anyway.
Here's another thing that you should just lock in your brain
as far as SVG goes is that you probably already
have plenty of intuition on what is vector and what is not.
There's a picture of my dog shaking off.
Digby-- that's a JPEG.
It's going to be a JPEG forever, or maybe
some other exotic format for a raster data, or whatever.
But it's like, SVG's not trying to creep into that territory.
It has nothing to do with that world.
The Day of the Dead kind of mask stuff
on the right-- that's vector.
It's obviously vector.
So it's just, you know, when you're working on websites,
and you come across some vector data, just be like, oh.
That's vector.
That's SVG land.
Make that connection and then start
the process of thinking about actually using it SVG,
rather than just, like, save as PNG,
which is the thing I'm trying to avoid a little bit.
So recap-- here's some things about SVG.
It's a syntax.
You can look at it, unlike a JPEG, which
you have to be like "Rain Man" to understand
if you open the code of the code of that thing.
It's not going to happen.
You can just look at SVG.
It's weird.
It's not like you're going to be able to look at path date
and be like, it's a tree.
I met a guy once that said he could do that,
and I was kind of skeptical.
But you can look at it.
It has angle brackets.
It has attributes.
It has stuff in there.
It looks like HTML.
It's not HTML.
It's SVG.
But still, it's familiar territory.
It's vector.
It's got the resolution independent thing--
huge on the web.
It's animatable and scriptable--
good stuff.
SVG is a wonderful animation target
because it's like, on the web--
you're familiar with animation.
There's a bunch of rectangles.
Divs are rectangles.
You can animate them around, but it's
much more fun to animate something
that already has a shape to it, which is wonderful.
And it's just sitting in the DOM.
There's a circle-- that circle element.
It's just sitting in the DOM just like a div.
It's not like some other scripting language
that you have to learn.
It's JavaScript.
You can access it and touch it in the same way that you could
any other HTML element, which is cool.
It's made to be quite accessible.
There's all kinds of accessibility stuff
you can do with it.
That would be a whole other talk.
You know, we've got Mr. Featherstone tomorrow
to talk about accessibility stuff.
But just let it be known that it's an accessible format.
It's an open, standard format-- probably going
to be around awhile.
Browser support for it, especially for the basic stuff,
is just all green all day.
Good stuff.
Lots of software for working with it-- probably software you
already use.
Stuff like Sketch is great at it.
Lots of great JavaScript libraries to do it-- famously,
stuff like D3--
you might not even be aware of it,
but D3 is producing SVG for you--
and tools like GreenSock for animating the crap out of it.
In short, it's amazing.
I want you to really know about it
and be kind of impressed by what it
can do because actually, what I want
is for you to reach for it--
for it to be part of your actual workflow,
that you're not just like, save as PNG.
Every moment like that, I'm like, that is
a perfect opportunity for something that
should have been SVG but isn't because it straight up
is under-used.
Like, if it's your mission to gauge SVG usage on the web,
and you just browse around, and you just
find something that looks like it probably
should be vector on the web, and open up your inspector
and look at it, it never is.
It's a bummer.
Anyway.
But knowledge of it is OK.
Like, if you ask-- if we did an informal poll right now--
that's my least favorite thing at talks.
And it's like, everybody raise your hand if--
and then there's no way to adjust my talk.
Like, if one person raised their hand, I'd be like, oh crap.
Well, I'm going to give the same talk anyway.
[LAUGHTER]
So awareness is pretty good.
It's pretty high.
But the actual usage is low.
And that's the thing we're trying
to fight here a little bit.
It's a little higher, especially at an event like this, where
you're all web heroes already.
But kind of behind the scenes is that I've
gotten to give this talk a couple of times.
And it's gone-- not because of my talk necessarily,
but there's just some momentum in SVG that is kind of good.
And I think next year, I'm going to talk about something else.
I'll have some other kind of topic there.
But I'd like to see that--
the awareness is going up.
I'd like to see the usage generally kind of come up
with it a little bit because it's really the muscle memory
thing.
That's my favorite thing.
All day-- all your work day is just
like stitching together of things that you've
done a bunch of times.
You're just like, oh, this is the keyboard command
I use to make a new folder.
And this is the software I use when I need to--
and this is the thing I use to pull down
new resources that I need.
You're just-- people get in their ways.
They learn a way to do something,
and they do it over and over.
And if you just start using SVG a few times-- because I
remember what it was like before it was part of my workflow.
And now it is part of my workflow,
and it just took doing it a bunch of time
to develop that muscle memory.
Sometimes, that muscle memory word
is, like-- that metaphor is lost on people a little bit.
But it's a little bit like golf.
I don't know if I've ever golfed.
But if I went out and golfed right now,
I promise I would be horrible.
There's no way I'm a golf prodigy.
But if I went golfing 1,000 times next year-- somehow,
if I had any time--
I'd probably be better at it at the end
because my brain, and my muscles, and my fingers,
and all this stuff, they'd be so used to those movements
that I would just be better at it, which totally
works for development as well.
Anyway-- we're still working on the intro here.
Here's something you can do with SVG.
Your boss is going to love it.
[LAUGHTER]
What if your boss is like, make the logo bigger.
It's a nice design, but bigger.
You're like, OK.
Well, we're going to have to ditch the nav
because something's got to go.
[LAUGHTER]
And we're going to--
let's blast this thing up, you know.
[? Daniel ?] [? Burkitt ?] told us doing mockups is
our superpower, as designers-- get us all talking about stuff
at the same time, whatever.
I'll make this thing bigger.
Boom.
How you like me now?
Anyway, I think that looks great.
And they should consider that for the next design
of the website.
But obviously, my point is-- look.
Because they used an SVG there, that was a no-brainer.
We didn't have to-- it's not because they cut a 2000
pixel wide PNG to fit in there.
It's because it's SVG and you can do whatever.
You can totally do that.
You could-- you know, you get it.
Versus something like this.
And this is funny.
The first thing I do is right-click on it,
and they're like, are you a nerd?
Do you use-- do you need our logo?
Because they can-- anyway.
But if I inspect it, and something else,
and then move over to it, it'll--
[LAUGHTER]
I'll use scale here to bump it up,
but it loses quality because the browser's like, bro, I
do not have that many pixels.
You're asking me to render something way bigger
than the number of pixels you gave me.
So some genius, at some point, figured out
some algorithm in which to render
PNG or JPEG or something way bigger
than the number of pixels it has.
But it always looks like garbage.
It's, like, a universal truth of design is,
like, never make a raster image bigger than the data
you have it.
It's been true since the print days, or whatever.
That's not good.
It totally should have been SVG.
I mean, whatever.
I don't really care what invision does.
But you know what I mean.
I even found a browser plug-in once
for Chrome called Make the Logo Bigger.
And it's a sad face.
And if you click it, it finds the logo, makes it bigger,
and turns into a happy face.
It's a very important plug-in, I think.
[LAUGHTER]
It doesn't do-- nice.
I don't know how it--
I mean, I guess it probably just looks
for a class name of logo or something.
But it does a pretty remarkably good job at it.
And anyway, sometimes, I talk to people
at conferences like this.
And their baby step into SVG is, like, well, I got our business
to make a logo SVG.
And I was like, that's awesome.
High five.
You baby stepped into it, which is cool.
There is no logo element in HTML.
There's nothing unique about a logo that makes it the thing
that you should use SVG first because it's just an image.
And it could have been any other image on your website.
If that's how you need to baby step into it, great.
But you can take that baby step anywhere, which is fine.
It's a nice step to take though, because worrying about pixels
just sucks on the web.
It's just the least--
it's nice to just take something away
that you used to worry about.
And now, you don't have to worry about it
because when you send SVG, you're sending the right stuff.
Here's an example of that.
Here's a dumb website, and it has an image.
And it's over there, and whatever,
like every other website in the world.
And it's a photo of the Obamas, or whatever,
is always the example.
What do you put--
how do you be most efficient with that?
Well, there's this whole world of responsive images.
And one of the ways to be responsible about how many
pixels you're sending to this web page
is to use responsive images, which
is not what this talk is about.
But there's source set, and sizes, and all this stuff.
If you have no idea what I'm talking about,
look up responsive images.
What that is is trying to save bandwidth and be
efficient in whatever images you're going to send.
But even if you do that, as efficient as you can be--
maybe you'll make three, four, or five copies of the thing,
and you'll send one of those things to that blue square.
And it'll download one of them, which is for sure wrong.
You're getting closer, but it's still the wrong amount
of pixels to send.
So it's like, even if you're killing it and doing
great things with responsive images,
you're still sending the wrong number of pixels.
It's so much more satisfying if you can replace them
with SVG, which is always the right amount of math.
Yeah.
Yay.
OK.
So if it's so great, and everybody loves it,
why is it underused?
Why is my arbitrary bar so low?
Well, here's one of the reasons why I think it might have been.
So it was that day, when Steve Jobs came out
on stage with his black turtleneck or whatever,
and he was like, there's so many pixels
on this phone your eyeballs can't even deal with it.
There's just-- it can't separate this phone from reality.
It's perfect eyeball stuff.
[LAUGHTER]
The Retina display-- you know, they
named it after your eyeball.
Anyway, that day, IE8 was the browser of the world.
That was the predominant browser.
And in fact, it had--
IE8 had, at that time, about half of all market share of all
browsers.
It was kind of going down at the time,
but it wasn't till-- what is it--
nine months later that the first version of a Microsoft browser
supported SVG at all.
So at the time when Retina displays came out--
and that was a bummer.
There was little [? retinapocalypse, ?]
if you remember.
All your little icons looked like crap for a while
until you started shipping four times the amount of pixel data
to them so that your icons looked crisp again.
That was kind of that period of time in history.
SVG was not there to help us.
SVG failed us during this time that we needed it, when
Retina [? one ?] displays--
more and more of them started to get high pixel density.
It just wasn't something that we could reach for.
It didn't start becoming part of a designer toolbelt
until much later because SVG was just
slow to be adopted by browsers.
Fast forward to today.
Like I said, it's Greensville all day long.
It's just not something you have to worry about anymore.
Browser support for the basic stuff for SVG
is just absolutely everywhere.
But still, I think that early failing of us
kind of slowed its adoption.
Anyway, that was a long intro to get to my first slide.
10 things you can and should do with SVG.
We'll count them off 1 through 10.
One of them is a pretty obvious one.
You draw things with SVG with math.
Charts and graphs are--
you know, it's math on the screen.
Super perfect use case for it.
In fact, most charts and graphs, I'd
think, probably leverage in some way, whether you know it
or not.
Here is a super boring pie chart.
There is a super clever way you can do that in SVG land,
where you just kind of like make a circle.
And then you can even control the stroke around it
with special values to make pie charts.
It's just a tiny amount of code that's
great for that kind of thing.
Let's jump a whole bunch up in complexity,
and use some kind of SVG charting-based system
kind of thing, where you just feed
it a bunch of configuration and data,
and it spits out a chart like that-- great use case for SVG,
if you ask me.
We're seeing a bunch of lines.
We're seeing a bunch of markers on those lines.
What's interesting to know is this is a 100% SVG.
It's not like an HTML shell, and then just the lines in there
are SVG or anything.
SVG's perfectly capable of rendering text and positioning
it as well.
We'll get into that a little bit later.
So that's just one big old chunk of SVG.
It's a great use case for it.
You can animate those lines.
Like I said, SVG's is a good animation target.
Sure.
Send it different values.
Animate it if you'd like to.
We have pretty cool stroke control in SVG.
Notice we can change the thickness and color,
like we could with Border in CSS.
But we can also control the length of the dash
and the space between those dashes--
just kind of a cool possibility in SVG to know about.
We could animate a curved path like that.
Why not?
Sure.
It's a lovely demo from Chris Gannon, who all of his demos
feel like a little master class in SVG animation.
Not only does it animate in, but those axis bars come in
and kind of flash.
[INAUDIBLE] nice.
Charts don't have to be lines, of course.
These are polygons.
A polygon in SVG is a filled shape, or a complete shape,
anyway.
So a polyline is a straight line that doesn't have to close.
Anyway, a polygon-- these are stacked on top of each other.
And they have a hover because you certainly
get the same kind of DOM events that you
would on a div, or a span, or whatever else.
You can kind of track the mouse position,
and hide and show things, and anything else
that you might do in JavaScript.
Why not do that as well?
I gave this talk one time right after a data vis specialist
gave a talk on picking the right chart for the data
that you have.
Have you seen a talk like that, where they're like--
they show bad examples of somebody
that used a pie chart when they should've
used a bar chart or something.
And then I was like, I'm pretty sure there's
no use case for a floating 3D wall chart.
[LAUGHTER]
But it's cool.
I like it.
I don't know if you've seen this.
Nivo's not alone in this market, but there's
been a couple of these things that combine
a bunch of technologies.
This is niche.
It's not for everybody.
But it's React powered components
that are built-- they're like D3 charts that React builds.
So if that's the kind of world that you live in,
this is pretty wonderful for it.
It's really well-done library with really good docs.
So as we explore these docs a little bit,
not only it shows you what kind of chart it is,
it allows you to kind of control all that stuff.
But it shows you not only what the component is and does,
but then it shows you the React component, which
is where you configure how big you want it to be,
and the colors, and the labels, and all that stuff.
And then it shows, separately, the data
that's being fed into it.
So it's like demo, component, data.
And it's just a really nice way to look at these docs, I think.
And if you're building--
I feel like we're still living in a time.
There's probably plenty of you out there that work all day
in React, or Angular, or Vue, or something.
And some people are like, I never do that.
I just don't have a use case for it.
It's almost, like, interesting.
But this is a good use case for it.
If you're still in the, like, I don't
get this world of React kind of thing,
imagine you're building some kind of data dashboard
kind of thing.
It's a perfect use case.
Like, oh, I see.
There's a lot of state.
There's things that users would want to control,
and I want to be able to piece together components like that
together.
It's a great use case for React, and D3, and everything.
So I just I like this Nivo for demoing that kind of thing
to people.
Can be an aha moment for some people.
So thinking of SVG and how it's made from numbers--
those numbers are really easy to manipulate.
This is a nice demo.
That's nice.
I like that.
I would buy that rug.
But it was built with just static.
There's just some shapes, and it draws some stuff.
But this developer decided to wire it up
to an old-school thing called that GUI, which
is that thing in the upper right, which
we'll see in a second.
But the idea is you can just configure it.
It's not a difficult thing to configure to say,
this little bar controls this number in the SVG.
And this bar controls this number in the SVG.
And you can drag them around.
That way, it's giving us some control over our creation.
It's not just one creation anymore.
You've just wired up your SVG to some data.
And you could-- this is a little bit programmatic.
But you could imagine making a little frosty the snowman,
or whatever.
And you wired up the radius of the snowballs that
make frosty the snowman to a little bar,
and you can make them bigger or smaller,
or change the color of his nose, or the position of his top hat
or something.
SVG is cool like that.
I like the idea that you've drawn something artistically,
and then you can kind of wire it up
to be controlled this way so that you're able to explore
design a little bit better.
It's tailor made for that kind of thing.
There's a button here to just randomize it.
So that's what's happening there.
Fun.
Here's another thing SVG is uniquely good at.
With animation, I think we're aware.
You can animate, and we're told to animate because
of the performance of the position of things,
and the opacity of things, and the color, and the scale,
and stuff.
But we don't often think you can change the shape of something,
too.
It's just less common on the web a little bit.
So there is a button that just animates a star to a checkbox.
It's using a technology called SMIL, which we're not even
going to talk about because it just doesn't have a very pretty
bright future, and I'd rather talk
about fun things a little bit.
But some libraries have seen that.
The future of SMIL sucks.
We'll step in with JavaScript, solve every problem with SMIL,
and make it more performant and better overall.
One of those libraries is the GreenSock animation library,
which has a plugin called MorphSVG.
And this is their little trailer for it.
This isn't after effects.
This isn't even a video at all.
These are just path just sitting in the DOM being animated.
It's super performant-- incredible
what it's able to do.
Look at that.
His cape is so good.
That is a good looking cape.
Anyway, that's amazing that it's just
happening right in the browser.
It's just some shapes.
You're like, morph that to that.
The API for it is incredibly simple and [? quick. ?]
In fact, I found Donald Trump's signature on Wikipedia
as SVG for some reason.
And I was like, I'll just say, animate
that thing to that thing.
[LAUGHTER]
That's all you do.
You just animate this to that.
And it was fine.
I did this ad for a sponsor I had--
Media Temple-- that I just hovered over it.
It's like, I'm not an exotic motion designer.
I was just like, uh, morph that to that.
And it just did it.
I think that was cool and unique thing through the GreenSock
API.
This uses some other library.
I can't even remember what it is.
But it's cellphones through time,
which is just a beautiful little demo, as it were,
that you could see accompanying some kind of post
about cellphones through time or something.
And you can see that would take an article to the next level
kind of thing.
What a fun interaction, you know,
with that bounce in there, and all that kind of thing.
It's kind of cool to see CSS getting in
on this a little bit, too.
I think this is Chrome only for now, but check it out.
I think it's pretty compelling.
So maybe you've seen this.
Maybe you haven't.
So there's an SVG, [? a ?] path in there.
And see the D attribute?
So I'm saying, when you hover over the SVG,
change the D attribute to this new set of path data.
And then I put a transition on it,
and CSS was happy to perform that morph for me.
So it has some limitations.
It had to be the same number of points and stuff.
But it's kind of cool to see that that required no library
or framework at all.
That's just happening right through CSS,
which is pretty cool.
So here's another example of that.
Look at a little code was required to draw these things.
This is me kind of figuring out the paths syntax.
So see how-- path, path, path, path, path down there.
And see how few numbers I'm passing it.
They're just little 10 by 10 coordinate systems,
where I was learning how to draw the curves and stuff that
are possible in CSS.
But then I was like, well, why don't I
change those numbers in CSS?
I'll have a hover attribute and add a transition
on all of them.
And now, I got this kind of thing
going on for all of those.
With just a few bytes of code, that was possible,
which I think is a really cool.
I think that's under-explored territory, perhaps.
So speaking of taking some SVG and using it in CSS,
here's another thing that you should know about.
What if I want to not morph the shape of something,
but I want to animate the position of something
in a unique, curvy way?
I want to take something, and I want
it to follow that crazy path.
And I drew that in Method Draw, which is a free SVG editor
online.
So I can just take the pen tool, and just
draw a weird path or whatever.
And I can save that out.
So here's the code the saved down to my computer
after I drew that shape.
And you see the path there, with the D attribute,
with a bunch of numbers in there,
which draws that weird path that I just drew.
I can take that, and I can slap it into a CSS property
called Offset Path, which just plops a path onto an element.
It doesn't do anything by itself.
But if I then animate the offset distance from 0 to 100,
that element will then follow that path.
So I can animate the position of something in a circle,
or in any shape that I can possibly draw,
which is kind of a compelling thing that you can do if.
You've never heard of Offset Path,
maybe you're heard of Motion Path.
It was Motion Path at first, and then they changed it.
[MUSIC - THEY MIGHT BE GIANTS, "ISTANBUL (NOT
CONSTANTINOPLE)"] Why they changed it, I can't say.
People just like it better that way.
[LAUGHTER]
I don't think I like it better.
I like Motion Path better.
But whatever.
Here's an example of that.
Here's that just a little div on the page,
and it's zooming around like particle man or whatever.
I slowed it down so you can kind of see it, maybe,
a little bit better, maybe make it a little bigger.
And then you can see that it's rotating while it's happening.
Kind of interesting.
I think it does that automatically.
It makes a little more sense if it's a little car
because then it would be weird if it didn't do that, right?
And it would just-- if it was just a car with its wheels
always pointed down, you kind of get that rotation for free,
which is neat.
It would be weird if you didn't get that for free.
Here's a more practical example.
I'm sure you've seen modals, which fly in from above,
or they have some exotic design effect to them that
matches branding, whatever.
So here's a way to do that that uses a path--
just a simple path to come in on,
which is just a nice little touch for a modal, perhaps.
And if I didn't do that--
lock the position of it, and it curved when it came in,
it would just be a little awkward.
[LAUGHTER]
So in this case, you can lock the position.
You can have it both ways, which is great.
Here's a thing to know about.
There used to be a thing a [? bodymovein. ?]
It's now called Lottie Webb.
Airbnb has this suite of design tools.
And this particular tool takes Adobe After Effects,
which we don't use on the web at all.
It's nothing to do with it.
It's more of a video motion graphics kind of thing.
And it takes that, and it makes it somehow, someway, into SVG.
And I'm not sure how, whatever, production-ready the code
it makes is.
But it's kind of cool to see that you can take After Effects
and then play it on the web through SVG.
And it kind of opens up some design stuff
that is a little bit more like, I don't know, I have a circle,
and it morphed into a checkbox.
That stuff is really cool, but the creativity
that something like working in After Effects opens up is wild.
Look at this little monster.
That's sweet, and that's just different than you'd expect.
You just don't think in that same kind of way
when you're just thinking of basic SVG shapes.
So has that unlocked anything in your brain?
I hope so a little bit.
I hope that that kind of thing gets you thinking.
And then when something like this comes up in your work,
you're reaching for SVG.
Here's another thing.
This is just a dumb SVG trick that it can do.
There's no native API for this.
But here's the deal.
I think it kind of got popularized for a polygon
when they did this PS4 thing years ago.
It's just a nice touch, where it animates in.
And they're reviewing it.
So they had demo unit, and they make
it look kind of architectural.
It was really a cool demo for its time.
It's still cool, really.
But people were interested in how they did it,
and they started figuring it out.
So here's a poor man's explanation of how it works.
Drew a simple shape, I can put that shape,
take it up, put it on the web, and I can apply CSS to it
and say, the dash array is 20.
So that counts for both the space in between
and the dash itself.
It's 20 long.
I could make it 100 long if I wanted to.
What if I left it 100 long, but I animated
the offset of that dash?
So what would happen?
It would just be like that.
It would just be animating around in the circle.
I have that ability.
But what if the dash offset wasn't 1,000, or whatever,
or the dash array wasn't 100, but it
was as long as the entire shape itself, you'd just get this.
Oops.
Way to ruin the final thing.
It would draw itself.
It would just be offset all the way,
so you didn't see anything.
And then it would--
it's just a trick.
And it's combined with stuff like this.
This combines movement.
It combines staggered opacity.
It has the line drawing.
It's got all the stuff.
It's fun.
That's what usually the best animations are.
They're not just one thing.
They're combinations of lots of different things, I find,
anyway.
And this particular trick probably
makes sense when you use it, and it works with a theme,
like drawing a maze.
It looks like the maze is building itself or trying
to figure itself out.
That's a nice looking demo.
How about for a brand like Fitbit
that's all about data, and movement,
and tracking that movement?
That's why that line drawing of the Fitbit logo
itself works great for that kind of thing.
So it's just used as a light touch.
And then the movement of the points kind of evokes data.
It's a nice touch, I think.
Here's another one-- just general interface animations.
It's almost expected these days that there's
some kind of animation happening in your interface.
I think it comes from this idea, which
is that without some kind of animation, sometimes,
it's hard in modern interfaces to understand what's happening.
Like if I click this thing, the green one appears.
If it wasn't green, it would probably be hard to see,
but it's a lot more obvious when it expands into place.
This has nothing to do with SVG, necessarily.
I mean, it could be.
But that kind of 2-step animation--
that's clear as day what's happening right there.
And it's just because a little movement happened.
It's tapping into our animal brains, or whatever.
These are pretty whimsical little demos,
but they tap into that as well.
Like, OK, the little radio button is sliding around.
That's kind of cutesy.
But it is also very clear what's happening.
It changed from this value to this value.
And that input-- that's nicer than a native input.
It tells you exactly what the dang value of it is, you know?
I think that's just nice.
Like I said, it's whimsical.
Not all of us can pull off that kind of stuff.
But I would argue it's more clear.
What about this volume slider in SVG?
This is just a very obvious way how to change volume.
It's a catapult.
[LAUGHTER]
Maybe not easier, but it's awesome.
You've probably seen [? Codrops. ?]
If you haven't, you should go to their site.
They have just zillions of demos of great stuff like this.
You can see a little line drawing happening here.
And just all kind of clever stuff there explaining
how it happens there.
You can draw it all at once, and then you kind of limit
what's being shown any time.
That site is full of great demos.
Here's a demo by Rachel Smith that's
using some line animations and shape morphing together.
So we're starting to combine the animation possibilities
of stuff like that.
Love it.
So cool.
In fact, CodePen is just lousy with little demos like that.
In fact, there's hundreds if not thousands of loading demos
in this collection.
And it's just for days.
If you want to experiment with SVG and minor little animation
possibilities, CodePen's a great place
to find inspiration for stuff like that.
Fork it.
Play with it.
Steal it.
It's all open source.
You know, I worked with Chris Gannon.
He did one of--
I think he's got a bunch of demos in here--
to deliver me this animation.
It was so cool.
He worked in After Effects to start because he was faster,
and then showed me some demos in After Effects.
And then we picked a few of them and went with it.
And when we finally finished, then he delivered it with web.
He rebuilt the kind of the final demo
with just SVG and JavaScript.
And then he-- so the design of it
was all done, obviously, in SVG.
And then he delivered me an API to the animation.
So this thing can do-- this animation
can do different things.
It can turn, and it can open.
And it can show a positive state and a negative state.
And he would just--
he sent me the animation with the API.
He'd be like, just call lock dot turn, and it will turn once.
Or call lock dot open.
I was like, that's such a cool deliverable--
not just an animation, but an animation with its own API.
Well, this is how it worked.
I wired up key up or down or whatever to turn.
And then if it was the wrong password,
it triggered the fail state.
If it was the correct password, it triggers the positive state.
And so I was able to use the animation that it delivered
however I want it to-- however it made sense
to integrate it into the app.
We haven't actually done that yet, but it's coming soon.
This is one that-- you know, the clouds are moving statically.
And his tie is shape morphing.
And his hair is rotating.
And the fire is just scale, it looks like.
And then his movement is on a path that's tied to scroll.
There's a lot going on here that I think is kind of cool.
All the most fun animations kind of combine lots of stuff
together.
I love that.
This is an interface that you can record a little audio thing
on.
And the way that they describe the waveform
is just through little rectangles on there
because they thought SVG is a really fast, efficient way
to render something like that, based on the data
that they had.
Here's a fake amp equalizer, or whatever,
that kind of draws itself based on input type range
equals things that you move around.
It's got a nice little shadows, and pre-sets, and stuff.
That's kind of a nice use case for SVG.
This is a friend and coworker of mine, Jake [? Elba, ?]
who made this interface to make music.
So it's called a musical chord arpeggiater.
So an arpeggio in music is all--
you know, you're on guitar, and you just play a G chord,
or whatever.
And arpeggio of that is all the notes that make up that chord,
but played individually.
So an arpeggio is do do do do do do.
But they can be played in different orders.
So that's what all those squiggly little lines there
are down at the bottom, is what order
do you want this chord arpeggio to be played in?
And you can see the numbers at the top
there, which explains that well enough--
0, 5, 3, 2, 1, fine.
But it's more fun to kind of chart it out.
I think you can kind of understand
what arpeggio is doing when you can look at that.
And that's a poly line in SVG.
It was really clever.
He just made a tiny little coordinate system
and drew the things.
So you can see that in the Web Inspector there.
That's how he drew those little shapes.
And you just apply a little rounding
to the outsides of it, which is just a CSS feature.
Here is it rendered really big.
You know, even if you have a tiny coordinate system,
of course, an SVG can still draw things really big,
round everything with the line cap, and the line join.
It just was a really neat use case for SVG,
I thought, as part of an interface.
Now, I won't leave you hanging here.
This is how it goes.
You pick a key, and how fast you want it to go,
and what-- major, or minor or whatever.
And you just play.
[ARPEGGIOS PLAYING]
Everything you do makes you sound awesome on it.
You just touch anything.
How about a little SVG plus deep purple?
[MUSIC - DEEP PURPLE, "SMOKE ON THE WATER"]
There's a weird subculture of SVG and web audio API
stuff on CodePen.
Like this-- I'm going to wire up drum sounds
to buckets in my keyboard.
[DRUMMING]
That's web audio API, but they took the time
to wire it up to an SVG landscape of drums,
which is so cool.
Hopefully, that sparked some ideas.
How about icon Systems?
That's probably one of the top uses for SVG
out there on the web.
Always ask questions about those.
It might be one part of the book I'd change,
actually, a little because I think
I've stumbled upon a simpler kind of way to do it.
What's the point of an icon system?
You don't need one to put icons on a website.
You can do whatever you want.
I've seen plenty of websites, though, that
certainly take do whatever you want to the extreme, I think.
And the point of doing it, traditionally,
has been performance.
Let's say you've got 50 icons on a page.
That's a lot.
20, whatever.
Instead of 20 individual IMG requests, which is typically
bad for performance--
we'll get to that in a minute--
you can smash them all into one request.
So an icon system was usually a way to combine requests
and to provide some consistency, right?
Like if we say, this is how we do icons on this site,
then it will breed consistency throughout the app, which
is great.
And hopefully, it's kind of easy.
Hopefully, there's a pattern.
Hopefully there's [? some ?] copy and paste code
in your design library or whatever.
So for a long time, I thought this was just
the bee's knees coolest way ever to do an icon system.
And it still works, and it's fine.
If everybody uses this pattern, I think it's perfectly fine.
I just think it could possibly be a little easier.
All icon systems generally start with, in your project,
a folder full of SVGs.
And you either use them directly,
or some kind of processing happens to them
in which to use them.
So many icon systems work this way-- [? Grunticon ?]
and whatever else.
But you'd use some kind of build tool
to take that folder full of individual SVG files.
And in this case, one of the things you can do with them--
turn them into one file, called sprite dot SVG or something,
that is symbol, symbol, symbol, symbol, symbol, as an SVG
element, in which that doesn't draw anything by itself,
but is intentionally like, I am intended
to be cloned elsewhere.
And elsewhere, you can clone that symbol.
So you can use the same icon over and over, whatever.
It was basically a sprite for your SVG symbols.
And then you'd use it like this.
And you'd inject that big chunk of symbols
somewhere in your document.
Anywhere you want to actually draw the icon,
you'd use the use tag and reference the icon there.
And it would draw that icon there,
which is a pretty cool pattern, I think.
And I use it.
You know, here's that kind of system being used on CodePen,
and Trulia.
There's plenty of sites that are kind of using that use
pattern for icons.
It can be quite efficient.
I think the one thing I would change, though, is that,
like, maybe screw the use system.
And there's a pretty really simple way
to do this-- requires no build step, and just really simple,
old school web editing thing, which is just include it.
Remember one of the first slides we looked at
was just take some inline SVG, and put it the HTML,
and it'll draw it.
Just do that for your icon system however
you want to do it.
You're working on a WordPress site, or a PHP, or something?
You've got your folder full icons already?
Just include it.
You're working on a React site or whatever?
Just have some code ready that just injects it as a component.
Or there's a Rails partial there, or some C Sharp,
or whatever.
And I just think that getting more and more popular.
There's GitHub, and Lonely Planet,
who are using that system.
Just put the thing in place.
And if you just put the thing in place, it can't fail.
It's super fast.
You have control over it with CSS because you just
select the thing and style it.
You have really clear JavaScript access.
Just query selector for it, and you can get it.
There's nothing-- there's no weird problems.
And there's not that many problems with the symbol way.
But it is a little bit-- it forms
this thing called the Shadow DOM, which is weird
and outside of the scope of this talk.
But if you're looking at the advantages of an SVG icon
system, there are many.
It's a wonderful way to do an icon system,
and it's so damn easy if you just include them
where they need to go.
Here's an example of that.
I'm just dropping some inline SVG in there.
Now look at all this control I have.
It's an eyeball.
I can select the outside of that eyeball and change its color,
and change its rotation.
I can control those individual parts of it
separately, which is kind of a nice little bonus for using
an SVG icon system because it's something
an icon font can't really do.
It's one color or nothing.
I can add strokes to it.
I can animate it and stuff.
There's all kinds of interesting things
you can do in the world of inline SVG.
It requires no build step, all of the control you need,
no Shadow DOM, no cross-browser problems.
It's just-- I think it's a nice way to go, really.
And it's kind of like prep for HTTP/2, which
was mentioned a little bit--
you know, HTTPS required, and all that stuff.
But it kind of throws a wrench in, I think,
this whole icon system, in which that it's not really a penalty
anymore to make more requests.
If every single icon on your page of those 20
icons we talked about was an individual IMG tag,
in a perfect HTTP/2 world, there really
is no penalty for doing that.
In fact, it might actually be good
because then you can change one of them
without breaking the cache in all other 19 of them
or whatever.
But OK.
So look.
If we went this route of just including
all of the individual icons, it would just be, like,
SVG, SVG, SVG, everywhere.
Sites like GitHub use the crap out of icons.
They're all over the place.
They need some kind of icon system for that.
They're just inlining SVGs everywhere right now--
perfectly good system.
But maybe in the future, it's more
like, individual image tags everywhere-- image, image,
image, image.
It might be fine in the future.
I don't know.
I wouldn't do it tonight.
But just because we're at a conference
and talking about stuff like that, maybe it's good to know.
Well, let's do some more stuff.
Here's a reason to use SVG--
just to express yourself.
Why not?
It's an artistic format.
You can draw stuff.
It's beautiful.
Here's [? sir ?] John [? Nerdmanship ?] doing
the little BB8.
Why not?
That's awesome.
Yay.
Look at him go.
It just gets randomized from there.
He's just on the run.
I think these flames are really nice.
Ain't nobody getting paid for this.
It's just fun.
You just wanted to make some flames.
That's the kind of the fun stuff that
happens on CodePen that I love.
Here's Sarah [? Draser ?] made Mr. Potato Head.
I did this in Europe once.
And like, do you Mr. Potato Head over here?
It's a potato head.
[LAUGHTER]
It's not hard to understand.
I think you'll get it.
I loved this demo from David [? Korshet, ?]
who like made this little husky buddy.
He's got a little tongue that you'll see you in a minute.
Yeah.
But it's all Dr. Katz out.
Remember that, where it's like squiggle vision?
That's really cool.
It's like there's this thing, and there's SVG filters,
which is a whole other world.
But one of them is called a turbulence filter.
And you can apply it, even to divs and stuff
because that's just how SVG works.
It kind of crosses world like that a little bit.
But you can apply it to SVG elements as well.
And it really tweaks the crap out of an element.
It'll be like, bleh.
But if you just tweak it-- just use the turbulence
filter like 0.001, or whatever, it just
screws up the edges of it a little bit.
And that's fine.
But what he did is he used, like,
0.001, and 0.002, and 0.003, and then used a keyframe animation
to swap out that filter rapidly.
So it uses a slightly different turbulence filter over and over
and over.
What a cool little idea, you know?
That's the same kind of turbulence filter applied
to these random bubbles.
Bubbles floating around a screen is cool anyway.
Nice screensaver, you know?
But the turbulence really makes that demo, I think.
Here's turbulence applied with a path.
So this is just a static JPEG.
And they used an SVG Clipping Path, which is just a way
to kind of like vector outline a shape and say,
only apply this to this area.
And they applied a turbulence filter just to the water.
It looks like friggin real water.
What a cool idea.
I love it.
This just makes art.
You just give it a JPEG, and it just becomes cubism.
You'd be a famous artist if you invented this in, like, 1917,
or whatever.
You could just crank-- you'd be the most prolific artist ever.
You'd just be shipping JPEGs.
This just looks amazing.
You're like, wow.
Polygon explosion art.
There's hardly anything to it.
It's just like, query selector all, all polygons.
Randomly generate xy coordinate that's not in the middle.
Animate.
It looks amazing, but it's not much code
to make something that's that cool, I think.
Art is great.
I try to drive this point home over and over,
is that combining ideas is what makes it fun.
Sarah [? Dresner ?] animated this CSS-Tricks logo
a while back that had this little toggle
of that was like a timeline.
It utilizes opacity changes, and line drawing,
and shape morphing, and all that kind of stuff.
Should I do it again?
Animating on a path.
All kinds of stuff combined is what made that so fun, I think.
How about diagrams?
I mean, we already looked at charts and graphs a little bit.
There's Nadia Bremer, who charted gold medal winners
for over 100 years.
And that's just a great way to show that data,
and discover trends in that data that you maybe
couldn't have seen, and call out interesting things in there.
You could zoom in on it really close to get even closer data.
It has hovers and stuff to expose that data great.
She, again-- kind of partner in crime Shirley Wu, who
took IMDB data and made unique time
stamps for every movie based on-- the petal of the flower
is what rating the movie had.
How many petals it had is how many votes or views
or whatever it had and stuff-- and gave
every movie a unique kind of color and shape.
What a clever idea.
It's all SVG, of course.
This is the kind of thing that I really dig, though,
as a fellow blogger myself.
This is Jake Archibald's blog, and he
had a piece of code in there that he wanted
to explain through a diagram.
He wanted to point to individual pieces of that code and say,
here's what's going on with that piece of code.
And so you could have just used pre [? and ?] code tags,
and just used code commenting to point out lines.
But he wanted to do something a little bit more fun,
and arrows, and just have it be more emphatic in there.
So that's great.
So if he made that choice, he might say, fine.
I have to make this choice, so I'm just going
to make it a PNG or whatever.
And maybe I'll have really good alt text
that explains it or something, or whatever.
But he didn't have to make that compromise.
It's the best of both worlds.
That is regular text.
It's selectable.
It's searchable.
It's SEO-friendly.
It's all that stuff.
It's set in SVG.
So you can see me selecting it-- orange
is just the color I have my text selection color on my computer.
I can copy that and paste it, and it's legit code
in any other browser.
Here's me just web inspecting and going in there
to just kind of prove that I can change these values.
And it's regular text in there.
You can see all these tspan elements.
That's what SVG uses to move things around, but still
have it be real text.
Super cool.
Not only that-- maybe I resized it in this video.
But we'll see that in a minute, is
that SVG kind of has this locked-in size that
can be really useful for that.
I try to steal that idea and use it.
This is a blog post on CSS-Tricks
where I do that, where it looks like maybe that's just one
image.
But it's not.
It's just an SVG.
It's inline SVG in there used to kind of prove
a point in a blog post.
So here's just kindergarten-level design,
right, where I set some type.
And I took this word Graves, and I put it
in between the M and the T in Graves Mountain, which
is something you just don't see that often in web text
because you'd have to use absolute positioning to put it
in there.
And it's finicky.
And it's like, what if the global document text
size changes?
Things could run into each other and stuff.
And it's just not something you see in graphic design
all that often.
But it's using web fonts.
And I can do that in SVG--
in inline SVG and know that it's going to be sized safely.
So check out this demo.
If I change the size of it, it keeps that perfect aspect ratio
like you'd expect a JPEG to.
But it's not a JPEG.
It's text.
It's selectable, searchable, findable text, which is cool.
That kind of ad made me think about why are ads--
nobody loves ads, or whatever.
But ads like this are often little iframes with movies
in them, or animated GIFs, or anything.
SVG's perfect for that world, too.
So if you happen to be in that world, god,
SVG's just kind of wonderful for that-- a little
self-contained unit that's animated, and has links, and is
accessible, and all that kind of stuff.
So thinking of those headline lockups for a minute-- stuff
like this is so cool, you know?
It's in galleries all over the--
or, like, inspiration galleries.
You see stuff like this.
I remember looking at little demos like this
and feeling like, I could do that.
I love stuff like that.
This makes me want to be a designer, seeing stuff
like that.
Then you get to the web, and you're like, no.
We don't do that ever.
It's not a thing you do on the web.
But it can be now, I think.
If we kind of embrace this idea of setting text in SVG,
I think we can do stuff like that.
It comes from letterpress days, where you'd literally
take wood type, and set it upside down and backwards,
and set it into a chase, and then literally lock it down
with clamps.
It's where the lockup word comes from a little bit.
Once it's locked in there, it ain't going anywhere.
So what does a lockup look like on the web?
Well, you can do it in something like Illustrator.
You could have a font--
this is Roboto.
So I just grabbed it off Google fonts.
Set this thing, which you'd never
try to replicate with just spans, and H1s, and crap.
Or if you did, it would be fragile and meg.
But in this case, I just did it in Illustrator.
And I set it just so-- just how I liked it.
And then export it, or just copied and pasted it
into CodePen here.
So I have this text.
And I didn't convert to outlines or anything.
I just let the SVG be the SVG.
And now I have this lockup.
I have this set of text that's selectable, and accessible,
and all that stuff, but doesn't move.
But I did put a media query in there.
So it's not like you have no control.
I still have a little media query
that moves some things down.
So I still have some control if I want it.
I think that's cool, and I'd like
to see more of that kind of thing be used on the web,
I think.
Yeah?
Toolbox?
Muscle memory?
Cool.
Here's SVG making its way into reality a little bit.
We got a preview of it when I showed you
that letterpress image there.
This is a teacher that has found this Epilog laser machine that
basically takes SVG input-- that's me liking that tweet.
Boom.
Boom.
SVG for days.
This machine takes vector data, and it carves it out
of wood and different types of metals and stuff.
So her students were messing around on Inkscape.
Inkscape is free SVG open source editing software,
or can do vector anyway.
And the kids are making wolves, and making
unicorns on other unicorns, and foxes and other foxes,
and stuff.
I just think that's fun--
that the idea of vector data is that real-world machinery takes
it because it's an open standard format that of course they
should take.
This is a website for CSS [? Conf ?]
that had these weird blobby shapes.
You can kind of see them slowly morphing as they move.
And they are all responsive designed up and stuff.
It was kind of a lovely-looking site.
But aside from the design itself,
I think I even Webinspect, so you can kind of
see how this was being animated with a library.
And if you go in and find one of the shapes,
you can see the path data being rapidly changed in the DOM.
I think it's sometimes interesting to watch.
Where's the-- so some library is morphing
the crap out of that thing.
Anyway.
They've got a robot there that would take SVG data, and take--
so the shapes that they drew for the website--
and, like, shoot ink out of a little gun
out onto this piece of paper, which
I think is pretty darn cool.
It's just another place where SVG--
an open format like SVG can power this little robot.
Why can't you just print it out on a regular printer?
Well, you get, like, IRL blend modes.
With this robot, you know, it's like literally ink sitting
on top of other ink, which is not something your home
laserjet kind of thing can do.
Sweet.
So this is setting metal type.
It's similar to wood type, you know?
It's just little blocks of metal type
you set upside down and backwards and make a poem
or whatever.
I kind of picked it up as a hobby a few years ago
because there happened to be a shop in my neighborhood.
But that's great.
You can walk into a shop.
You can set a paragraph.
You can pull it on a machine, and you can walk out of there
with a print.
And it's very satisfying.
But sometimes, we want to like combine our digital lives
and letterpress, too.
I still want to letterpress the thing,
but I want it to be my design.
I want to build something that I did in Illustrator.
Well, there's this company called
Boxcar Press that makes these polymer plates that work on--
they have a whole system for letterpressing with it.
But you send them a design--
guess what format.
And they send you back a piece of polymer plate like that.
And it's cheap, and inexpensive, and fast.
And here's an example of it.
You get this sticky polymer thing
that you put on this piece of metal.
And then you can pull it in a letter press press, really,
of any kind.
So I was playing around with this one night.
I morphed a heart--
a CodePen the outside of the CodePen shape to a heart.
And I wired up this little thing so I can stop the morphing
halfway in between.
And I'd stop the morphing, go into the DOM,
take the path data, save it to a file,
and open it in Illustrator so I could
get that shape into Illustrator so
that I could make a file of a stopped morph, you know?
And then I took that SVG data, and I sent it to Boxcar Press.
And they sent me back that polymer plate.
And I set it on their metal thing.
And then I inked up the roller, which is red and black there.
You can see when that spins up, it kind of makes
a gradient on the rollers.
And then I put some paper in there, and pulled my prints,
and now I have these cute little prints
for my house, which is, like, a CodePen logo to a heart.
That's me pulling it.
And that's kind of how they turned out, which is fun.
SVG was kind of a part of the process of this very
real-life thing, which is cool.
So here's number 10.
Here's just another add-on kind of thing.
I found this on a site that sells
a WordPress Theme that had this sticky sidebar kind of thing.
And they were using it as marketing to sell their theme.
And the developer was so excited.
They were like, look.
You can apply CSS to this running animation live.
It doesn't stop the animation or anything.
It just kind of was driving home to that particular developer
was excited about this idea that you have this animation that's
touchable at any time from CSS, which is neat.
Digital Ocean uses a lot of SVG in their marketing stuff
to explain what they do.
These are dots going up a hill.
Apparently, they do that.
This is trying to explain a droplet, I guess.
This is all very cool design work, I think.
They do a good job of it.
Put your code in a droplet.
It connects to other droplets.
It's a cool way to work.
This is their animation for global thermonuclear war.
[LAUGHTER]
Or a CBN-- one of the two, I think.
This explains how a gear differential
works by just Javascripting up some SVG circles
and doing some math on the back end.
What a cool way to demonstrate that concept, I think.
If you've ever sent something in MailChimp,
you've seen a little SVG animation
because Freddy gives you a nice solid little high
five there on your way out, which you can just-- that flash
is a nice touch, right?
I feel like you can feel it.
Boom.
There's a publication called "Bustle"
that does these interactive, clicky, I
don't know, make a choice, and then it
zooms you to your next choice.
Choose your own adventure kind of graphics.
These are designed as a massive [? Illustrator, ?] I think.
I've never met the designer of these.
But I'm pretty sure this is how it works.
It's one giant piece of SVG that's all designed.
And then what they do is-- do you remember that view box
attribute--
0, 0, 100, 100, or whatever?
You can think of that almost as a camera looking down at SVG.
Like, this is the coordinate system
that I want to be looking at this piece of SVG right now.
But it doesn't have to be all of your SVG.
In fact, it could just be a little bit of it.
And because it's just some numbers, it can be animated.
So you can animate the view box, which
is just a really tricky thing.
So here's how this works just real quick.
Here's the canvas, and it has that view box, let's say.
And you draw a circle inside of that view box.
That's the camera.
OK?
And let's say we change that view box
to totally different numbers.
That's what's happening there instead.
But changing the view box doesn't actually
change the size of the element.
So the element stays the same size.
And what actually happens is the camera is looking at it.
And that's what happens.
It's this weird kind of thing.
So it enables this ability of being able to zoom around
a larger document, thinking of the view box
kind of as a camera, which is lovely, I think.
This is a demo that uses that.
It zooms into this island, and moves around,
and uses that technique a little bit.
I think it's a little under-used a little bit.
I think it opens up people's minds into thinking
about that stuff a little bit.
That's a really long demo, and we're coming up
at the end of the day.
So remember about the mandatory book purchase.
Just kidding, but not really.
And thanks so much for having me at An Event Apart.
It's been fantastic.
[APPLAUSE]
For more infomation >> 7 странных изобретений которых вы больше не увидите - Duration: 11:02. 
For more infomation >> Countdown to Christmas: Photo books give you your year at a glance - Duration: 2:06. 
Không có nhận xét nào:
Đăng nhận xét