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

[Applause] so I'm really excited to be here today but you know who's more excited about me being here my mom and and so my mom is really excited that Estelle brought me here so you're basically indited into the family welcome to the family and stuff so I'm super excited to be here today and talk about SVG I think SVG is capable of so many crazy things and it's just such a flexible medium for building performance sites I'm so excited to share all of these ways that you can create performance sites with SVG today and it's worth saying at this point I'm gonna be showing a lot of demos all of the demos are by me unless I otherwise say so and all of the code is available and open-source for you to check out later on okay so SVG is a total party you can have JavaScript be the event coordinator for your party event get it yeah yeah I have a lot of bad dad jokes for this or you can make it yourself so yeah you can do so many awesome things with SVG don't worry you're gonna get your fill of my dad jokes by the end of the day okay so that's that's fun but we're at a performance conference right so you know we've got to be kind of serious and so so what about the capabilities of SVG well it's really important to understand the SVG can be really tiny it can be extremely tiny and the reason why this matters is because if you look at this graphic from the HTTP archive most of what we 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 we're spending our performance budgets almost two thirds of our performance budgets are busted on our images that's that's huge it's more than habits two-thirds of everything and so I love this quote you can't be a web performance expert without also being an images expert true statement that I never thought of before I love that because if you look at that last graphic if you want to make the just dent in your performance budget you have to be thinking about images it's the cost of your graphics that are really gonna tear things apart and that's why I think SVG will save us my name is Sarah Dresner I'm known as Sarah Etta on Twitter I'm also on the view core team staff writer for CSS tricks and so today we're going to talk about this graphic format from the from the point of view of flexibility and performance so what is SVG one of the biggest benefits of SPG's you can see here's a 1 kilobyte graphic it's 4 of the Twitter logo and you can see on the left-hand side it's very cliffs crisp and clear I didn't say either of those words crispy there clearly and then on the other side we've got PNG which is basically these blocks and yeah we 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 bitmaps where we kind of plot every piece of that you know piece you know and that's how bitmaps are basically mapped you know pngs JPEGs things like that we've got a block for every piece of those coordinates rather rosters or vectors or SVG's are made with coordinate points so how many people here have played battleship as a kid yeah like most of us it's the same kind of concept where you like a 2 b 3 and then you draw a point between you don't really kill the SVG with the battleship but that's beside the point that's basically how these things are drawn they we find different coordinates within a coordinate system and then we're drawing lines in between them so if we have raster and vector they're both good for different things right you can't necessarily just exchange all of the things for SVG and you sometimes might not want to so photos are really great for raster photos are really great for things that are bitmap oriented but 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 today and I'm even gonna live code for you even though I hate that because I love you that's that's how that's my love language is live coding so in there's a couple different things between SVG and the you know the SVG DOM and the regular Dom they're not that many dissimilarities but there's a couple so let's cover those real quick for the regular Dom we're gonna be using background and border colors to you know assign colors for the background in the border but we're going to use fill and Stroke for SVG graphics and sometimes people shy away from SVG's because they look at it and they're like what is all this garbage in the dot like I don't want a number barf all over my stuff and it's actually not as scary as you might think so if we're looking in this SVG Dom here all of the things that's drawing on the on the right hand side here and we see this G right the G is kind of like a div it's just it stands for group its grouping all these objects together and you can apply things like styles and classes like in IDs and in style it just like normal but here I've done it in line just as presentational attributes and 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 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 could do stroke stroke weight with five or something like that but you can see these rectangles and circles and ellipses in line all of these things we made all of these graphics with just this small amount of code that's not even a byte and for all of these what we're doing is we're finding the coordinates and the DOM and they're mostly XY values if we look at that rect it's x and y we're finding a coordinate system you can think of a coordinate system as a big piece of graph paper we're finding x and y values and then width and height draws a rectangle or something like the circle CX CY finds the middle point and then you draw a radius that's it that's all it takes to draw a circle pretty cool so we have all of these things we also have these kind of more complicated path points but those are also curved commands that you can learn so they really look and work a little bit like this some of it's a little bit hard to see on this screen but you can see it's a piece of graph paper and we're basically pulling you know saying go go from this point x and y this point x and y and then we're gonna get this like bezzie a handle x and y and we can pull it around and it makes a curve how cool is that you like just told the computer a few things like X Y X Y X Y and it can draw a curve I just think that that's so cool so then you know you can do things like this where you can like make slinky is out of code you know and this is just basically me using requestanimationframe and changing some control points using template literals and JavaScript that's just I'm just know where those little curved handles go and then I manipulate them so I can make cool pens like this one with that celebrated the yarn release where I'm like changing the path value and doing some and then I'm like distorting it we we're not going to talk about distortion filters because that's performance- [Laughter] so in this pen i drew this little spaceman and a cow and I throw the cow over the moon and every time I throw the cow over the moon the space beings like ah my friends were making fun of me because they can actually throw the cowboy better than me I'm not very good at it but this this uses trackable just like you can use for the DOM and it's touching device enabled for mobile but the cool part of this demo is it's two kilobytes gzipped all of the code is two kilobytes gzip because they're pretty simple shapes for all of those things and so you can accomplish really crazy interactive and awesome things with just two kilobytes so they're good for things like loaders because they have the potential to be so small Smashing Magazine had hired me to do the loaders for their check out experience so that's just this I didn't design this I just animated it it's this cat looking around they gave me the thing and they said oh you know it's pretty big it's like seven five kilobytes like don't worry about it and I optimized it and I worked with it for a minute and now it's six kilobytes gzipped it's not a lot of data to transfer and if you think about gift loaders gift loaders are actually pretty big they can sometimes be megabytes and some of them are ugly and big which is like neither of the things that you want to accomplish on the web SVG can be great for beautiful and performant animations I didn't do the design or dev for this the artwork is by veera and the animation is by kono animation and I just think that's super cool and it's also nineteen kilobytes for the whole thing and if you consider a hero image on a site you know when you join it you wouldn't you go to a sites marketing pages it's a giant image that takes it the whole thing it's 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 where there's not high connection speeds so SPG's can make other things smaller so check this out if you use the the SVG JPEG and yeah it's going it's very slow sorry it's a recording of me I should have sped it up I'm just finding a random graphic here but the graphic that I found was 38 kilobytes and it reduced to 16 kilobytes I didn't even find like a particular graphic that that was especially good on but it masks certain areas and allows us to show only what we need to communicates with SVG can actually make some other images smaller too it's really cool you should go follow the guy who made this is really really neat so Tammy Everts wrote this really cool book called time is money and if you haven't read it you and you're in this audience you should definitely read this book but she talks about how we can do front-end optimization and some of the things that we can do to create front-end optimization is reduce the payload of the HTTP request reduce the number of HTTP requests optimize client-side and priorities and target the specific capabilities of the client browser those are some of the things that we can do to make things more performant and of these SVG really helps reducing the payload of those HTTP requests and reducing the number of HTTP requests so we're gonna dive into why those two things are true those are the two things that it helps out with so let's talk about reducing the payload of the request this is demo time I I'm not sure how this is going to go probably not well so let's do okay so estelle has this cool image of herself actually let's show it here in my app she has this cool image of herself and it's really it's really cute I really like it and I spent it's it's actually huge so I spent some time optimizing it and you know making it smaller and good for the web but it's still 40 kilobytes so then I brought it into illustrator and you can see this is the kind of graphic that looks like it might be a good candidate for vector I asked her if she had a vector this is just a PNG that I'm turning vector by by doing an image trace within illustrator you can say I want to image trace and 16 colors and this is what it gives me it's pretty good and you can see the difference is I have all of that you know how I said all those path points path points path points all of these shapes are now individual shapes with path points that I can manipulate and I can even grab them and put her hair in a different group as her face which I'm definitely gonna do uh-huh and you know have those be separate elements on the page and from there what I'm gonna do is I'm not gonna say save as like you might think we're gonna say export and export as and the reason why we're gonna do that is because the person who works on the export settings is Dimitri Baron offski who wrote snap SVG and he knows SVG's very well so the export settings in Illustrator I've worked with sketch and all of the you know inks you know ink space or whatever for all of them and this is really like the bee's knees of export settings so I'm going to you know say I'm going to export this you know replace and you can decide if you want styling with internal CSS inline style presentation attributes you can decide what you want your font to be because there are actually fonts available in SPG's and ways to do real actual semantic texts within SVG's and and things like that so I can show the code even and we can see that we've got one of those gee remember we talked about G G ID is the face so any IDs anything that we can aim these things are gonna end up being IDs here so that's that's pretty cool so we'll just cancel out of this and pretend it's gonna be like a baking show where I like look we're putting it in the oven and then it comes out of the oven so we're gonna open this trace original and you can see immediately that we bring first of all it's 25 kilobytes that's a lot less than our PNG right and then we've also reduced it by 83% um when I look at you can have whatever kind of settings you want here I strongly suggest you visit this before getting on a plane Jake Archibald's SVG oMG it's a way of optimizing SVG's and it uses serviceworkers so once you visited it you can use it but you got to do it before you get on the plane I made this mistake and there's all these things that you can kind of click I'm not gonna say clean IDs because that will remove the face thing that I talked about before I'm not going to merge paths because sometimes I do animation if you're doing icons you can totally merge paths no problem but you can also see the markup so you can see our little GID face here perfect it's great awesome ok so now we've got our app I'm gonna make the font a little bit bigger so you can see it and let's go check out our app here so here we got our cute Estelle awesome so what happens if we want to bring that graphic into our application I mentioned you know reducing the size of the SVG well we can actually put the SVG directly in line in our code because it is it's an SVG Dom I can put it 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 going to make it accessible and we're gonna make it accessible with just a couple of steps and then it's fairly simple to get done we just have to do a couple of small things so I'm gonna say Aria labeled by and of course and I'll say it 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 entire SVG Dom to people right and so that would be mean so the other thing I want to do is I want to put a title in there but I want the title to be the first element that's immediately inside of the SVG right under that it has to be the next one in so I'll say title and then the ID is estelle and actually if you miss this ID part that I rere labeled by and the ID that Association some screamers some screen readers won't even read the title so that one's a really important one so I'm gonna say like fancy pants make sense and one last thing that I'm going to do here is I'm going 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 transit heavy lifting and the translating for them so that can help with that as well cool thank you prettier for making that pretty so then we can go in here I'm gonna make a new section where I add in the new Estelle so I'm gonna get rid of this one and this is just view stuff so I'm I'm using some snippets I made so I'm sick gonna say app graphic asto and then I'm gonna use that here app graphic asto and that will close it off and then I also want to give it the same width so that you can compare the two as the other one so that one had 300 and 300 and now we have two Estelle's cool they look the same like all of that and you're like okay whatever we have two graphics but 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 and says make the logo of it bigger what you know they will and then we have to Estelle's and one of them is a little bit fuzzy and the other one is still sharp and crisp that's pretty cool but let's take it a step further oh yeah okay well this we're gonna step away from accuracy index so let's do some maybe more fun things and we'll say like label let's get get ourselves a label and we're gonna say here because remember we had some hair going on there and there in its own group and then I'm also going to say input you know I want em it thank you input type color and ID is hair that's associated with the label and then I'm gonna say V model is hair color and then I'm also gonna 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 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 in my data this here again use stuff but it allows us to say like hold the state of this hair color so at first it's gonna start off as null but then we've got this hair color and you know we're gonna maybe play around and make a still have a different hair color so we're gonna just go all the way around the spectrum like I'm gonna give her hair color like mine cuz whatever I'm narcissist or something I give her all sorts of hair color this is not accessible hair color that's too close to her skin color so don't dye your hair like this that's not good for example cool okay so we'll go back to our presentation here so SVG oMG that's a really really great resource I've included in the slide link you definitely want to use that to optimize your SVG but there's another thing that you can do sometimes people will hand you these SVG's that are enormous ly large and you're like why is it enormous ly large well all of those path points that we talked about our data that you're going to be transferring right so if you have something like a texture like this no human is gonna discern if you have more of these path points or less like they're just not going to be able to tell and you can kind of achieve the same thing so one thing that you can do in Illustrator is you can go in and say simplify path and you know change some of these dials and you can see but the original started off at 14 45 points and ended at 800 that's a huge amount of savings that's way bigger than what we just saw in SVG oMG even so by thinking about those path points and what we're communicating you can actually make things smaller too so there's also that reducing the number of HTTP requests well you probably already know the answer to this one right the answer is well sometimes when we're using responsive images what were we end up doing is we do these picture and source said and that's great because we're having smaller images or larger images depending on the screen size and this is a really good way of doing things but you'd still have to cut all those images and if the chick images change you have to cut all those images and figure out this what I like about SVG is it's one SVG to rule them all I just started work using keynote so like these I'm sorry it's one SVG to rule and well that is a graphic it's hard to believe but that is a graphic that's way less than even a byte and it's directly in the HTML as you saw before so we're not creating more HTTP request we've got no HTTP requests because it's embedded in the HTML so it's it's with the entire application it's along with the application so we're also doing that to achieve the performance on our site so let's talk about another really big thing and this is one of the biggest questions that I get about SVG why SVG and said instead of icon fonts everybody's like I already know how to use icon fonts I don't learn anything I get it I get it but it's a it's a really great question but there are a lot of reasons why we should be using icon fonts instead of our SVG instead of icon fonts one of them is that they're vector they're sharper than icon fonts because of non text anti-aliasing this is actually from Chris coiours article he wrote an article about this that I have the link for in the slide notes it's easily multicolor we just saw that with a hair right you can make Estelle's hair whatever color you want to except inaccessible hair colors and it's easy to animate because it 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 I want to animate my arm if it's a photo i how am I gonna animate that I would have to like cut it out find the background of the thing put it back on and then absolutely position it and then responsive is a drag but with SVG it's already its own unit if we can just put a G over that whole sucker and move it around I don't have a famous arm like some other people here but you know it's really great we can script we can do everything in the Dom it's better accessibility you just saw that the accessibility doesn't just end with that roll presentation that I showed you 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 by group and then have you know if you have graphs or bar charts you can have the screen reader read read out each individual group so you have a lot of concepts for accessibility that a regular flat image wouldn't have there's better semantics and the ease of use is really nice you're just picking it in there you're done it's so great it scales with the container as well so you don't have to do any kind of responsive work at all um Chris Boyer did this Serena saerom dev Davies her dad is in the audience right now sorry for butchering your name wrote a really great talk called death to icon fonts which is all about her dyslexia and why icon fonts aren't as great as SVG for that purpose so I'll let you look for that online and I have another joke you ready okay why was Sarah frustrated about the debate at work over whether or not to use SVG Zoar icon fonts because the debate had no resolution okay all right so we have one more demo this is basically me doing doing anything in the world okay so we'll do you System Preferences so okay this other we add mate Estelle's hair funny and fun so let's talk about eye icons for just a moment if I I'm gonna comment out estelle one for just a second because it's distracting me your blurriness is distracting me so I'm gonna actually add in a demo that I made to show off some some icons so if we want to import that component which we do and what we have is 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 icon demo 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 so that icon base has a bunch of default props but we can also change them up we have width we have height we have view boxes we have the aria tag so we can change the 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 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 the text is around it so if I go and I say okay I have the icon demo in this P tag I'm going to style it with the color of red 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 different SVG icons so I have this base and then I pass in into this slot or if you're using you know reacts we can use render props we can use higher-order components there's so many ways of doing this in different component systems and in this app icon right I basically have a G with some paths in it then I'm passing through and I can change that up per thing so let's let's go back to Estelle because we love Estelle but we got to find out if Estelle loves us back so I'm gonna make a button here and I'm gonna say I'm gonna say span and then I'll say yeah that's awesome but maybe sometimes the stove doesn't love you [Laughter] and then for that button I'm this is kind of view stuff I'm gonna say is showing is equal to it's not is showing so I'm just toggling a boolean and I'm gonna say V if it's like just a conditional so if it's showing then do this and B else if not show that and then down here I'm gonna add the is showing and then here what I'm gonna do is I'm gonna go into insight here and I'm going to add some hearts and we're gonna make sure that those are showing or not showing the same way showing so then we need to bring in those icons the icon base and also the icon hearts so that we can you know see the both of those working grab this this heart and face no face so then in here we can inside of our our hearts let's add the app icon base and we're gonna close it off and inside there we're gonna add our app icon heart we're gonna give it a view box that's a little bit bigger because we want it to be a little bit larger and show everything so view box is a hundred which is sixty height is 60 and the icon color is gonna be crimson cool now let's go back to here refresh we've got Estelle doesn't love Oh doesn't love you Oh what did I do I did something wrong of course oh it's because this needs to be on the icon base that's silly we knew I would mess up it was just a matter of how so Estelle loves you but we need we need to hard eyes right so we got to put another one on there and put it a little bit apart so we'll do trick style transform [Music] translate X 45 X all right let's see how that still loves you [Applause] [Music] 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 of those things so quickly right so you can also you don't have to be crazy like me and make all of these icons yourself either you can just dump a bunch of SPG's in a folder and have webpack do the hard work for you by using either one of these github repos so like if you don't want to be nuts this is a really good way of not being met one thing is really that's really cool is that you can actually adjust things on the fly with SVG so you know if you ever make like a logo and then people are like oh thin is in like we gotta make our logo thin style and then make the logo thick and then like maybe oh we got to change the kerning long big kerning is in then like make the logo bigger or smaller you can do all of that stuff with SVG without cutting new graphics every week and like wanting to kill your design team it's awesome and because of all that all the pieces are separate it makes it incredibly easy to make these interactive demos and this usually has sound with it it's not doing it 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 cockroach friend and kind of like grabs at him and we're gonna talk about how this was made really quick so basically he's got like one 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 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 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 and the other thing is is that as SVG allows you to mask pieces of the SVG which can be really great for animation right because with that his arm I don't want to show his entire arm the entire time I wanted to go into his body as he's reaching out to make it look more realistic dick so I can actually mask those things and we can you know crop on the fly we can crop it like it's hot yeah I told you there's more of them I love this pen by Noel Delgado it's so well done it's this like you can see the little x-ray as you're masking this whole thing super clever really really nice 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 there so even 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 really dealing with pixel units 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 have to adjust anything for Responsive no no media queries necessary it also lets us do these advanced type lockups that Chris coiour did and this is real accessible text so these are all you know stuck together in a particular configuration you can have these beautiful text select lock ups and it's 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 it's cool so we can use that kind of stability for page transitions I made this one and react and you for each one of those even if it does responsive stuff with the page it all stays totally stable as I'm moving through the pages and having this work I also made one in view so you can see all of the pages do these like weird 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 you'll see that we can scroll the page down and everything you know stays totally stable 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 a layout too so on Val and I have this Val head and I have this web animation workshop site and you can see these triangles on the page those are pieces of SVG it's just a simple triangle and what we did was we took preserve rest we said preserve aspect ratio none so what it basically inherently an SVG we have this preserve aspect ratio so things get bigger and smaller they stay totally uniform if we put preserve aspect ratio none it will just scale to whatever container you have it in so you can make crazy layout stuff really simply with grazie and awesome shapes and it can still be completely semantic in a small amount of code super cool I wrote a book this isn't that book my friend was trolling me I don't have the blobfish animal and that's not my last name this is the book that I wrote and it's about SVG animations but it also dives through SVG Dom and all sorts of the things that we talked about today and while I have your attention really quickly Aiko organized an event called concatenate conf with a bunch of other really lovely people it's a free conference for Nigerian and Kenyan developers and we are looking for sponsorships for next year gatsby who's one of the sponsors of this conference today helped us last year and we're very thankful for them Mena was one of the speakers for last year we're really grateful to her as well but so if you want to make this happen even either personally or through your company we would really super appreciate it thank you thank you so much [Applause]

Channel: estellevw

Views: 10,552

Rating: 4.9527559 out of 5

Keywords: web performance, svg, #PerfMatters

Id: sxte3WpyO60

Length: 36min 43sec (2203 seconds)

Published: Mon May 06 2019

Reddit Comments

[u/snifty]

For a sec I read that PerlMatters.