Duration 36:43
16+
Play
Video

SVG Will Save Us, Sarah Drasner @ #PerfMatters Conference 2019

Sarah Drasner
Head of Developer Experience at Netlify
  • Video
  • Table of contents
  • Video
#PerfMatters Conference 2019
April 2 2019, Redwood City, CA , United States
#PerfMatters Conference 2019
Video
SVG Will Save Us, Sarah Drasner @ #PerfMatters Conference 2019
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
7.48 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speaker

Sarah Drasner is an award-winning Speaker, Head of Developer Experience at Netlify, Vue core team member, and Staff Writer at CSS-Tricks. Sarah is formerly Principal Lead of Emerging Markets, Cloud Advocates at Microsoft and Manager of UX & Engineering at Trulia/Zillow Group. She’s the author of SVG Animations from O’Reilly and has given Frontend Masters workshops. Sarah is a co-organizer of ConcatenateConf, a free conference for Nigerian and Kenyan developers. Sarah is also the co-founder of Web Animation Workshops with Val Head. She has worked for 15 years as a web developer, and at points worked as a Scientific Illustrator and a Professor in the Greek Islands.
https://sarahdrasnerdesign.com/speaking

About the talk

SVGs are one of the most underutilized technologies on the web. They can be the most performant, flexible, and accessible image formats. In this session, Sarah will cover a few practical things like styling SVG icons like typography, and then dive into the creative wilds of this graphic format built with math. She'll make it respond to physics, make it bounce and snap, and make it interactive with front-end frameworks like Vue.js and React. In this session Sarah will push the boundaries of what's possible while also thinking about cross-browser stability, and you'll come out of it with a whole new world of tools in your front-end developer toolbox.

Share

I'm really excited to be here today. But you know, who's more excited about me being here my mom and my mom is really excited. That is spelled brought 00:04 me here. So you're basically and I didn't to the family welcome to the family and stuff. So I'm super excited to be here today and talk about SPG. I 00:14 think SPG is capable of so many crazy things and it's just such a flexible medium for building a performance sites. I'm so excited to share 00:24 all of these ways that you can create performance sites with SVG today and it's worth saying at this point on WE showing a lot of demos all of the 00:34

demos are by me unless I say otherwise say so and all of the code is available and open source for you to check out later on. Okay. So SVG 00:42 is a total party. You have JavaScript be the event coordinator for your party event get it. Yeah. Yeah. I have a lot of bad dad 00:51 jokes, or you can make it yourself. So yeah, you can do so many awesome things with SVG. Don't worry you're going to get your 01:01 fill of my dad jokes by the end of the day, you know, 01:11 we've got to be kind of serious. So what about the capabilities of SPG? What's really important to understand that SVG can be really tiny 01:21

it can be extremely tiny and the reason why this matters is because if you look at this graphic from the hcp archive most of what we 01:31 communicate and talk about and show over the web what it mostly what that load mostly comes down to is images you can see that 01:40 Sending our performance budgets almost two-thirds of our performance budgets are busted on her images. That's a huge. It's more than have is two 01:49 thirds of everything. And so I love this quote. You can't be a web performance expert without also being an image of expert true statement that I 01:59

never thought of before. I love that because if you look at that last graphic, if you want to make the biggest dent in your performance budget, you 02:08 have to be thinking about images. It's the cost of your graphics that are really going to tear things apart and that's why I think SVG will save us. 02:16 My name is Sarah drasner. I'm going to Sarah at all on Twitter and Muslim The View core team staff writer for CSS tricks. And so today we're going to 02:25 talk about this graphic format from the from the point of view of flexibility and performance. So what is SVG one of the biggest 02:34

benefits of SPG as you can see here is a 1kg graphic kits for of the Twitter logo and you can see on the left hand side. It's Great Clips Crispin 02:43 Creek clear. I didn't say either of those words crispy. They're clearly and then on the other side, we've got PNG which is basically these 02:53 blocks and yeah, you could add more data to the PNG and make it crisp as well. But we'd be adding more data. So there's a there are bitmaps where we 03:03 kind of plot every piece of that, you know, peace and that's how bitmaps are basically Matt, you know PNG to jpg things like that. We've got a 03:13

blocked for every piece of those cornice rather rosters or vectors or spg's are made with coordinate points. So how many 03:23 people here had played Battleship the kid like most of us, it's the same kind of concept. 3 and then you drop point between you don't 03:32 really kill fast busy with the battleship, but that's beside the point in different coordinates within a coordinate system. And then we're 03:42 drawing lines in between them. So if we have raster and Vector, they're both good for different things right when you can't necessarily just exchanged 03:52

all of the things for SVG mean sometimes might not want to so photos are really great for roster photos are really great for things that are bitmap 04:01 oriented up a vector is really good for icons logos illustrations charts for things like that. We're going to dive into some of the use cases for that 04:10 today. I'm even going to live code for you, even though I hate that because I love you that my love language is life going. 04:19 So there's a couple different things between SVG and the name of the SPG Dom in the regular down there. 04:27

Not that many dissimilarities, but there's a couple so let's cover those real quick for the regular Dom. We're going to be using background and Border 04:37 colors to you know, sign colors for the background in the border for these fill and stroke for a SVG graphics. 04:45 People shy away from SPG because they look at it and they're like, what is all this garbage in the. Like? I don't want number barf all over my stuff 04:55 and it's actually not as scary as you might think. So if we're looking in this SVG down here all of the things that's drawing on the on the right hand 05:03

side here. And we see this G write the G is kind of like a diff. It's just it stands for group is grouping all of these objects together and you 05:12 can apply things like Styles and classes like in IDs and and style it just like normal, but here I put done it in line just as presentational out 05:22 after if you can see anything that I applied to the group is going to also apply to all the children just like in CSS as well. So if I did something 05:31 very specific for one of the elements that was inside that group again like CSS, that would be more specific. So it would kind of take precedence. I 05:40

could do stroke stroke weight with 5 or something like that. You can see these rectangles and circles. An ellipsis in like all of these things we made 05:48 all of these graphics with just a small amount of Coach. That's not even a bite. And for all of these what we're doing is worth finding the 05:58 coordinates in the dumb and they're mostly X Y values if we look at that wrecked its X and Y we're finding a coordinate system. You can think of a 06:05 coordinate system as a big piece of graph paper for finding X and Y values and then width and height draws a rectangle or something like the circle 06:14

c x c y find the middle point and then aren't you draw a radius? That's it. That's all it takes to draw Circle. Pretty cool that we have all of these 06:23 things. We also have fees in a more complicated pathpoint. But those are also curved commands that you can learn so they really look and work a little 06:33 bit like this some of it's a little bit hard to see on the screen, but you can see it's a piece of graph paper and we're basically pulling, you know 06:42 saying go go from this point X and Y this point X and Y. And then we're going to get this like busy a handle X and Y we can pull it around 06:50

and it makes it how cool is that you like just told the computer a few things like XY XY XY and it can draw a curve. 06:59 I just think that's so cool. So then, you know, you can do things like this where you can like make Slinkys out of code, you know, this is just 07:09 basically me using requestanimationframe and changing some control points using a template literals in JavaScript. It's just I'm just know where 07:17 those little curved handles go and then I've I manipulate them so I can make cool pens like this one with that celebrated the yarn released where I'm 07:27

like changing the path value and doing some then I'm like distorting it weird that performance negative. Definitely 07:36 this little Spaceman and a cow and I throw the cow over the moon. Every 07:45 time I throw the cow over the moon the basement lights and my friends were making fun of me because I can actually throw the cowboy way better than 07:55 me. I'm not very good at it. But this uses draggable just like you can use for the Dom and it's touching device enables for mobile, but the cool part 08:02

of his Dental is its to kilobytes gzipped. All of the code is 2 kilobytes GSAT because they're pretty simple shapes for all of those things. 08:11 And so you can accomplish really crazy interactive an awesome things with just to feel so they're good for things like loaders 08:21 because they have the potential to be so small Smashing Magazine hadn't hired me to do the loaders for their checkout experience so that it's just 08:31 that I didn't Design This I just animated it. It's this cat looking around they gave me the thing and they say, oh, you know, it's pretty big is 675 08:39

kilobytes. Don't worry about it, and I optimized it and I worked with it for a minute and now it's 6 kilobytes gzipped. Not a lot of data to transfer 08:48 and if you think about gift loaders get floaters are actually pretty big bear. They can sometimes be megabytes and some of them are ugly and big just 08:57 like neither of the things to you want to accomplish on the web SVG can be great for beautiful and Performing animations. I didn't do the design or 09:07 dad for this by Vera and the animation is by Kono animation and I just think that's super cool and it's also 19 kilobytes for the whole thing. And if 09:17

you consider a hero image on a site and when you join you wouldn't you go to sites marketing Pages Giant image that takes up the whole thing looks 09:26 like Meg's or at least hundreds of kilobytes. You can have something that's engaging in performant and small and great for users in different places 09:35 where there's not high connection speeds. Sdgs can make other things smaller. So check this out if you use that the SVG 09:45 to jpg and yeah, it's going it's very slow start recording of me. I should have said I'm just finding a random graphic here. But the graphic that I 09:54

found was 38 killed and a reduced to 16 kilobytes. I didn't even find like a particular graphic that that was especially good on but it mask 10:04 certain areas and allows us to show only what we need to communicate with SPG can actually make some other images smaller to it's really cool. You 10:14 should go follow the guy who made this really really neat Everett's wrote. This really cool book called time is money. And if you haven't read it in 10:24 your in this audience, you should definitely but she talks about how we can do front end optimization and some of the things that we can do to create 10:34

front front and optimization is reduce the payload of the ACP request reduce the number 5-HTP request optimize client-side 10:42 priorities and Target the specific capabilities of the client Rodger. Those are some of the things that we can do to make things more performance and 10:51 all of these SPG really helps reducing the payload of those HP request and reducing the number of each of you. So we're going to dive into why those 10:59 two things are true. Those are the two things that it helps out. So let's talk about reducing the payload of their request. This is demo time. I am 11:09

not sure how this is going to go. Probably not. Well, I'm so let's do this. Christmas benefit 11:19 great. Okay, so I still has this cool image of herself actually looks show it here in like at the chances 11:29 cool image of herself and it's really really cute. I really like it and I spent so it's it's actually a huge so I spend some time optimizing it and 11:39 you know making it smaller and good for the web but it's still 40kg be so then I brought it into illustrator and you can see this is the kind of 11:47

graphic that looks like it might be a good candidate for Vector asked her if she had a vector. This is just a PNG that I'm turning vector by by 11:55 doing an image Trace with an illustrator. You can say I want an image trace and 16 colors and is what gives me it's pretty good and you 12:02 can see the difference is I have all of the you know, how I said all those half-point pathpoint spackling all of these shapes are now individual 12:12 shapes with half points that I can manipulate and I can even grab them and put her hair in a different group as a face, which I'm deaf. I'm going to 12:20

do and you know, I have those be separate elements on the page. And from there I'm going to do is I'm not going to say say that like you might think 12:28 we're going to say export and Export as in the reason why we're going to do that is because the person who works on the export settings is Dimitri 12:38 Baranowski who wrote snap SVG, he knows svg's very well. So the export settings and illustrator. I've worked with sketching all of them think that, 12:46 you know in space or whatever for all of them and this is really like the bee's knees of export settings. So I'm going to let you know say I'm going 12:55

to export says so, you know replace and you can decide if you want styling with internal CSS inline style presentation attributes, you can decide what 13:04 you want your font to be because there are actually fonts available and SPG some ways to do real actual semantic text with an SVG stand and things 13:13 like that so I can show the code even and we can see that we've got one of those of GE. Remember we talked GID is the face. So any ideas 13:22 anything that we can name these things are going to end up being IDs here. So that's that's pretty cool. So we'll just cancel out of this and pretend 13:31

it's going to be like a baking show where I like look we're putting it in the oven and then it comes out of the oven. 13:40 Chase Regional and you can see immediately that we bring first of all it's 25 KGB that's a lot less than a right and then we've also reduced it by 13:53 83% when I look at you can have whatever kind of setting do you want here? I strongly suggest you visit this before getting on a plane 14:02 Jake Archibald's SVG OMG. It's a way of optimizing spg's and it uses service workers. So once you visited it, you can use it you got to do it before 14:11

you get on the plane. I made this mistake and there's all these things that you can kind of Click. I'm not going to say clean IDs because that will 14:21 remove the face thing that I talked about before I'm not going to merge past because sometimes I do animation if you're doing icons you can totally 14:29 merch pass no problem, but you can also see the mark-up so you can see our GID face here. Perfect. It's great. Awesome. Okay. So now we got 14:37 our app make the font a little bit bigger so you can see it. And let's go check out our app here. So 14:47

here we got our cutest El awesome. So what happens if we want to bring that graphic into our application, I mentioned, you know 14:57 reducing the size of the SVG will we can actually put the SVG directly in line in our code? Because it is code. It's an SVG Dom. I can put it 15:07 directly in line right here. So here I've got that SVG directly in the template, which is what we in view land use and I'm also 15:16 going to make it accessible and we're going to make it accessible with just a couple of steps in there. It's fairly simple to get done. We just have 15:26

to do a couple of small things going to say Aria labeled by And of course labeled by 15:33 and I'll say is still and then the other thing that I want to say is role is presentation because I don't want the screen reader to read out the 15:43 entire SVG Dom two people, right and that would be mean to put a title in there. But I want the title to be the 15:52 first element that's immediately inside of the SPG right under that it has to be the next one in so I'll say title and then the ID is Estelle 16:02

and actually if you missed the CID part that I already labeled by and the idea that Association sunscreen sunscreen readers won't even read the title. 16:12 So that one's are really important one. I'm going to say like fancy pants that make sense. And one last thing that I'm going to do here as I'm going 16:22 to say that the language is English because you know people use screen readers all over the world and maybe they need the screen reader to do the 16:32 Heavy lifting in the Translating for them so that can help with that. Well, cool. Thank you pretty pretty so then we can go in here. I'm going to make 16:39

a new section. Where I added in the newest Dallas, I'm going to get rid of this one. And this is just a few stuff. So I'm I'm using 16:49 some Snippets I made so I'm sick going to say app graphic Estelle and then I'm going to use that he rap graphic 16:59 Estelle and that will close it off. And then I also want to give it the same with so that you can compare the two as the other one. So that one had 17:08 300 and 300 and now we have to Estelle. They look the same like all of that and you're like, okay, whatever we have two Graphics 17:17

one is smaller than the other one, but the other thing that the other end, it's more accessible, but the other thing is what if someone comes along 17:26 and says make the logo bit bigger which you know, they will and then we have to Estelle's and one of them is a little bit fuzzy and the other 17:35 one is still sharp and Crisp. That's pretty cool. But let's take it a step further. Oh, yeah it 17:45 from accuracy. The next may be more fun things and 17:53 we'll say like label. Let's get ourselves a label and we're going to stay here because remember we had some hair going on there and their it and its 18:03

own group. And then I'm also going to say input. No I want I meant thank you input type color and 18:13 ID is hair that's associated with the label and then I'm going to say V mod. Is hair color? 18:23 And then I'm also going to pass that hair color as a prop down here. If you don't know what that means. Don't worry about it. Just know that I'm 18:34 allowing the component to know about the hair color that I'm passing hair color here. And then I'm also going to hold this 18:42

in my data. So I'm going to add this here again, you stuff but it allows us to say like hold the 18:51 state of this hair color. So I first is going to start off as no, but then we've got this hair color and you know, we're going to maybe play around 19:01 and make a still have different hair color. So we're going to just go all the way around the Spectrum. Like I'm going to give her hair color like mine 19:11 cuz whatever I'm narcissist or something give her all sorts of this is not accessible hair color. That's 19:18

cool. Okay, so we'll go back to her presentation 19:25 here and let's see if I can. back 19:35 excellent now we can go back to I'm so SPG. OMG. That's a really really great 19:49 resource. I've included in the side lengths you definitely want to use that to optimize your SVG. But there's another thing that you can do. Sometimes 19:58 people will hand you these svg's that are enormously large and you're like, why is it enormously large will all of those past points that we talked 20:05

about our data that you're going to be transferring right? So if you have something like a texture like this, no human is going to discern if you have 20:13 more of these half points or less like they're just not going to be able to tell and you can kind of achieved the same thing. So one thing that you 20:21 can do an illustrator as you can go in and say simplify path and you know change some of these dials and you can see the original started off at 1445 20:27 points and ended at 800 that's a huge amount of savings. That's way bigger than what we just saw an SVG en. Jeevan by thinking about those path points 20:37

in what were communicating you can actually make things smaller to so there's also that reducing the number of a sheep he requests while you probably 20:47 are I know the answer to this one, right the answer is well, sometimes we were using responsive images. What were we end up doing is we do these 20:55 picture and Source said and that's great because we're having smaller images are larger images depending on the screen size. And this is a really good 21:04 way of doing things but you still have to cut all those images and if the image is changed if it cut all those images and figure out this what I like 21:13

about SVG is is one SVG to rule them all I can just start a route using Keynotes what likely 21:21 it's hard to believe but that is a graphic that's way less than even a bite and it's 21:26 directly in the HTML if you saw before, so we're not creating more issue. Quest where we've been no issue. Quest because it's embedded 21:35 in the HTML. So it's it with the entire application is along with the application. So we're also doing that to achieve the performance on our site. 21:45

Let's talk about another really big thing in this is one of the biggest questions that I get about SVG icon fonts. Everybody know how I use icon 21:55 funds. I want to learn anything I get it I get it. But if it's a really great question, but there are a lot of reasons why we should be using icon 22:05 fonts instead of our SVG instead of icons on one of them is that they're Vector there sharper than icon fonts because of non text anti-aliasing. This 22:15 is actually from Chris choirs article. He wrote an article about this that I have the link for in the slide notes is easily multicolor. We just got 22:25

hit with the hair, right? You can make yourself hair or whatever color you want to accept inaccessible hair colors and it's easy to animate because it 22:33 has a navigable Dom all the same things apply. I can attach something to different pieces of it. Like if I'm standing here and I have like my arm and 22:41 I want to animate my arm if it's a photo. I how am I going to anime? That I would have to like cut it out buying the background of the thing put it 22:51 back on and then absolutely position it and then responsive is a drag but with SPG, it's already its own unit. If we can just put a g over that whole 23:00

sucker and move it around. I don't have a famous arm like some other people here, but you know, it's a really great we can script we can do everything 23:09 in the dome. It's better accessibility. You just saw that the accessibility doesn't just end with that role presentation that I should have showed you 23:19 that's like the lowest that's the lowest amount that you can do with the title, but you can also identify things by group so you can say Aria labeled 23:26 by group and then have you know, if you have grass or barcharts, you can have the screen reader read read out each individual group. We have a lot of 23:34

concepts for accessibility that a regular flat image wouldn't have there's better semantics and the east of uses really nice. You're 23:43 just sticking it in there. You're done it's over. It's scales with the container as well. So you don't have to do any kind of response of work at all 23:53 surprised player. Did this certain Davies? Her dad is in the audience right now. Sorry for butchering your name wrote a really great talk 24:00 Called Death to Icon fonts, which is all about her. Dyslexia and why I conference aren't as great as SVG for that purpose. So I'll let you look for 24:10

that online and I have another joke. Okay, why was Sarah frustrated about the debate at work over whether or not to use SVG 24:18 Sarai conference because the debate had no resolution. 24:28 Alright, so we have one more demo. This is basically me doing doing anything in the world's system preferences. 24:38 Cool. So okay this other we had made Estelle's hair funny and fun. So let's talk about icons for just a moment. 24:52 If I I'm going to comment out Estelle one for just a second. Your blurriness is distracting me. So I'm going 25:01

to actually add in a demo that I made to show off some some icons. So if we want to import that component 25:11 Which we do and grab this. And I'm going to grab. 25:22 And then up here. I'll do you. app icon demo What we have is 25:34 this in line icon concept that we have all of these different icons and we can make them any size and the way that this works if we look at that 25:44 I condemn is first we have we have this base and the right and we're able to pass all of these props down and change these on the fly but icon base 25:54

has a bunch of default props, but we can also change them up. We have wits we have height. We have you boxes. We have the Aria tags, we can change the 26:04 name and we can even change fill colors. But the other thing that we have is the icon color is just intentionally left as current color and what 26:13 current color does if you do nothing else learn this part today if for fill and stroke, if you put in current color it will inherent whatever color 26:23 the text is around it. So if I go and I say, okay, I have the icon demo in this petag. I'm going to style it with the color of red. 26:32

Then what happens all of the text gets updated but so do all of the icons as well. So that's really flexible. We can use that for all sorts of 26:42 different SVG icons by this base and then I pass in into the slot or if you're using, you know react we can use render props. We can use higher 26:50 order components are so many ways of doing this and different component systems. And in this app icon, right? I basically have a g with some paths in 27:00 it then passing through and I can change that up per thing. So let's let's go back to Estelle cuz we love his stuff, but we got to find out if a cell 27:09

loves us back. So I'm going to make a button here. And I'm going to say I'm going to say span and then I'll 27:19 say that's still. Loves you. Yeah. Yeah, that's awesome. But maybe sometimes 27:29 it still. Doesn't love you. And then it for that button. This is kind of used stuff. 27:39 I'm going to say is showing is equal to its not is showing some cobbling a Boolean and I'm going to say fee if 27:49 it's like I can just a conditional. So if it's showing then do this and be else If not show that 27:58

and then down here when add that is showing. And then hear 28:08 what I'm going to do is I'm going to go into inside here and I'm going to add some hearts. 28:18 And we're going to make sure that those are showing or not showing the same way. is showing so then we need to bring 28:28 in those icons the icon base and also the icon Hearts so that we can you know, see the both of those working. 28:38 grab this this this 28:48 face to face. So then in here we can inside of our our hearts. Let's add the app 28:59

icon base and went to close it off and inside there. We're going to add are app icon heart. We're going to give it a view box. That's a little bit 29:09 bigger because we wanted to be a little bit larger and show everything so few boxes 100, which is 60. Height is 29:17 60 and icon color is going to be crimson. 29:27 Cool. Let's go back to hear refresh. We've got to still doesn't love doesn't love you. 29:36 Oh, what did I do? I did something wrong. Of course he if 29:52 Oh, it's because this needs to be on The Ikon base, that's silly. We knew I would mess up. It was just a matter of how 30:07

so I still loves you, but we need that. We need two heart eyes, right? So we got to put another one on there and put it a little bit of Hearts of all 30:16 dude Style. transform Translate axe. 45 30:26 yaks All right. Let's see how that suits us. I still loves you. 30:36 So now we know how we can reuse those things and it didn't actually take us that long to get there. It's it's pretty fun to be able to play with all 30:51 of those things so quickly, right? Okay, so you can also you don't have to be crazy like me and make all of these icons 30:59

yourself either. You can just dumped a bunch of SVG through note folder and have webpack do the hard work for you by using either one of these GitHub 31:09 repos feel like if you don't want to be nuts, this is a really good way of not being that's one thing is really cuz that's really cool is that you can 31:17 actually adjust things on the fly with SVG. So, you know, if you ever make like a logo and then people are like oath in as in like we got to make a 31:26 logo thin style in the make the logo thick and then like maybe all we are change the crooning long big kerning is in the logo bigger or smaller. 31:34

You can do all of that stuff without cutting new graphics every week and like wanting to kill your design team is awesome. And 31:44 because of all the all the pieces are separate, it makes it incredibly easy to make these interactive Demos in this usually has sound with it. It's 31:54 not doing Now but basically he's like looking around. This is Wally. I love Wally and he's looking around and then he reaches out for his cock 32:02 cockroach friend and it's kind of like crabs at him and we're going to talk about how this was made really quick. So basically he's got like one 32:11

animation that like moves his head around and stuff and flips him when you move across the page, but there's also an animation timeline that goes 32:19 across and reaches his arms out. And what we did was we have this like at Mouse moves coordinates and in that coordinates, we map the progress of the 32:29 timeline to the coordinates of the page. So then you can kind of scrub that timeline and have him interact with the page as he's going. The other 32:38 thing is is that a SVG allows you to mask pieces of the SPD which can be really great for animation, right? Because with that his arm, I don't want to 32:47

show his entire arm the entire time. I don't have to go into his body as he's reaching out to make it look more realistic so I can ask Mac those 32:56 things we can you know crap on the Fly we can crop it like it's hot. Yeah, I told you there's more of them. I Love This 33:04 Time by No Doubt. Oh, it's so well done. It's this like you can see the little x-ray as your masking this whole thing super clever really really nice 33:14 in terms of Animation. The other cool thing is that we're working with the SVG Dom and no matter what size it is, it stays consistent in their so even 33:24

if I apply animation make things move all over as I change the size of it, it stays totally stable, which is perfect for responsive because I'm not 33:33 really dealing with pixel unit. So if I make like a crazy animation inside of an SVG and then make it bigger or smaller as I need to I don't adjust 33:42 anyting first. No no media queries necessary it also Alexis Do these Advanced type lockups that Chris choir did and this 33:50 is real accessible text. So these are all in a stuck together in a particular configuration. You can have these beautiful text Lex lockups and it's 34:00

not even that much code because you're really using text and that's a circle. You already know how to make all of this. So we can use that kind of 34:08 stability for page transitions. I made this one in react and for each one of those even if it does responsive stuff with the page, it all stays 34:17 totally stable as I'm moving through the pages and having this work. I also made one in few so you can see all of the pages do these like weird 34:26 Mountain things and each page has a different animation for the mountains and for the text and stuff and I made this demo too long, but eventually 34:35

you'll see that we can scroll the page down and everything, you know stays totally stable. 34:44 So it's all completely stable for mobile. And there's this other thing that's really cool is that you can use it for layout to sew on Valentine have 34:54 this Veil head and I have this web animation workshops that you can see this triangles on the page. Those are pieces of SVG. It's just a simple 35:03 triangle and what we did was we took preserve. We said preserve aspect ratio none. So would it be sickly inherently an SVG 35:11

we have is preserve a starfish you so things get bigger and smaller than State total uniform. If we put preserve aspect ratio none. It will just scale 35:21 to whatever container you have it in so you can make crazy layout stuff really simply with gravy and awesome shapes and it can still be completely 35:28 semantic and a small amount of code super cool. I wrote a book. This isn't that book. My friends was trolling me. I don't have the 35:38 Blobfish animal and that's not my last name is the book that I wrote and it's about SVG animations, but it also dives through SVG Tom 35:48

and all sorts of the things that we talked about today. And well, I have your attention really quickly Aiko organize an event called concatenate 35:58 columns with a bunch of other really lovely people. It's a free conference for Nigerian and Canyon developers, and we are looking for sponsorships for 36:06 next year Gatsby who's one of the sponsors of this conference today helped us last year, and we are very thankful for them mean. I was one of the 36:14 speakers for last year were really grateful to her as well. But so if you want to make this happen even either personally or through your company, we 36:22

would really super appreciate it. Thank you. Thank you so much. 36:30

Cackle comments for the website

Buy this talk

Access to the talk «SVG Will Save Us, Sarah Drasner @ #PerfMatters Conference 2019»
Available
In cart
Free
Free
Free
Free
Free
Free

Video

Get access to all videos “#PerfMatters Conference 2019”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Similar talks

Mandy Michael
ДолжностьDevelopment Manager at Seven West Media
Available
In cart
Free
Free
Free
Free
Free
Free
Kevin Ball
Engineering at Humu
Willian Martins
JavaScript Formatter at Netflix
Shawn Wang
Account Executive at CircleCI
Lin Clark
Prinicipal Research Engineer at Mozilla
Till Schneidereit
Senior Research Engineering Manager, Developer Technologies at Mozilla
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk 'SVG Will Save Us, Sarah Drasner @ #PerfMatters Conference 2019'
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
439 conferences
17532 speakers
6299 hours of content