 Hey everybody, thanks for coming back after lunch. I know we all had like lots of food and wine and stuff But we're gonna be talking about something that I find really exciting this afternoon and hopefully you do, too The the title of this talk is SVG can do that Part of the reason why I'm giving this talk is because SVG as a graphics format is just capable of so much And I think we're just at the tip of the iceberg for really touching on all of those capabilities So yeah, like I said, my name is Sarah Drasner. This is a photo of me as a child and my mom and my relationship with authority I'm a senior developer advocate at Microsoft. I just started so that's exciting and I just think SVG is a total party You can kind of make your party yourself or you can have JavaScript be the event coordinator get it event Okay, there's gonna be lots of bad jokes where that came from And we can do so many cool things with it So some of you already might know the benefits of SVG, but just in case you don't let's go over some of those It's crisp on any display. It's built with math So basically any time you're making an SVG You're just plotting a few coordinates and the computer is drawing all those coordinates out for you So it's not like bitmaps where you know if you make something really big or really small It loses clarity and it kind of loses pieces of it. So that's really nice It has less less HG. I always mess that part up at less HTTP requests to handle did it. All right, cool It can have no HB requests to handle because you can have it directly in line unlike other images where you have to make requests from other sources as we move into HTTP to this is less of an issue But we're not quite there yet. So for the time being SVG is really awesome for that It's easily scalable for responsive one of my favorite things. It's in the name Scalable vector graphics that means that you can make it adjust to any kind of viewport and we're definitely gonna be doing stuff with that today It's a really small file size if you design for performance If you design for performance is an important part of that. So we'll talk about that today as well It's easy to animate again one of my favorite things. I wrote a literal book about that It has a navigable dom which means that you can reach right inside of it and move certain pieces around So if you have a flat image where everything is just kind of presented in front of you in order to make an arm move or something You'd have to go in and cut out pieces of it in order to you know kind of move them around These are literally just dom nodes that you can slap classes on that you can do all of the same things that you do HTML elements with so that's really cool We talked about how it's a now it has a navigable dom it also can be accessible because it has a navigable dom and It's fun. Remember when we used to have fun funds cool. Yeah, cool. All right So with all of the pens that I'm going to be showing today I I made all of these demos, but I'm gonna be showing you some work that other people made as well to kind of showcase them But I'll definitely have their names at the top of them and then also I make the slides open source so you can check them out later SVG is such a flexible medium. We can do so much with it We can manage state even with within it and do all sorts of beautiful effects So I actually hope that this is the last year. I have to show this slide People think that SVG is really not well supported because years past it wasn't but look at all that green We got opera mini we never get opera mini. That's just amazing And you know, it says IE 11 there, but it actually goes back to IE 9 with partial support on IE 8 I don't know why can I use doesn't show you all of that information But if you're not using SVG because you think it's poorly supported you can update that information in your mind as well So what does the scalable mean when we talk about scalable vector graphics? You can see here we place the graphic directly in line in the HTML and it has width and height attributes Which keep it to that size, but then when I take those out It adjusts and it fills that entire area Which means that if I wanted to you know make it constrained to the viewport width or the viewport height I can do so or if I want to put it inside of a flexbox or grid or percentage you name it so that's really nice because everything stays totally consistent and Is positioning in CSS keeping you down what sometimes it but it kind of bothers me SVG might just be your answer You saw all of those things that were inside of the SVG were staying exactly at their coordinates no matter What we were doing to it? That's really awesome for positioning You can kind of just throw all of the like crazy CSS stuff to the wayside and position things within SVG It even has text as a side note I did this to myself on the plane on the way here. I was drinking wine and watching a horror movie and Splashed it in my face anyway SVG allows you to do create create advanced Effects like this type lock up and it can look really slick and professional while still using actual accessible text That's so nice for responsive Which also means that in terms of animation we can create something that's fully Responsible and scalable in every direction and the animation values are working within that coordinate system So they'll to stay totally totally stable even if you're changing the sizes of them and moving things around and adjusting it These type of positioning refinements are really really wonderful if you have a ton of information on Smaller screens like mobile and you don't want to show all of the information at once if you have tons of icons And you need to kind of collapse that view you can do really advanced layout effects where you're showing and hiding that information with only a small amount of kilobytes So it doesn't necessarily have to be you know squishy either We don't just squish things back and forth when we make responsive design. Let's do some real responsive design So I made a huggy laser panda factory because you know we need to know where huggy laser pandas come from And that's where they come from So if we have the huggy laser panda on desktop We it's actually comprised of three different SVGs we've got one for the top part and one for the side and one for the other side and then on mobile They're going to stack and reconfigure you can see that middle part that one on the side That's magenta is actually just being transformed Translated and kind of moving over to the side So if we have the panda factory running we have our panda getting painted to be a panda Then we have our panda getting lasered and then we have our panda getting huggy'd you know like you have in real life and Then when we scale it down to mobile everything can kind of reconfigure and reconform and all of this works on Android devices old Windows phones and it's only 13 kilobytes So if we look into the code here What we'll actually see is that I have a timeline that's wrapped in a function That's named appropriately in case in this case the naming it appropriately is like function paint panda And I I really literally have a click event listener to re-trigger that timeline But you'll see all of the functions are scoped to the SVGs itself So the design and the functions are all organized in the same way So if I need to update something everything stays totally organized We can also use that stability for page transforms So react is really awesome because it helps us manage state in a really responsible manner I made this with react and green sock what green sock is an animation API react coordinates the state Well green sock coordinates all of the interim intermediary values So we're showing the transition from page to page and all SVG will stabilize all of our graphics while we do so So in this example, I have this concept of screens I'm toggling the screens forward and then they wrap back around to the to the beginning screen And then we have a timeline function that can choreograph all of the animation But something that's really cool about the green sock animation API is this thing called SVG origin here or this thing called clear props here The clear props will actually allow us to remove any inline styles that are set on that Element or that Dom ref so I can remove those if we need to recalculate values or put it into another position So here's another one I made with view and next which I love View is a front-end framework that is very similar to react in that it's the V of MVC You probably are familiar with it Next is a really quick and easy way to get server-side rendering with view And it allows you to do routing and all sorts of code splitting without stepping outside of a view file And because we're using SVG for all of these animations everything states totally stable Nux also gives us page transition hooks so we can hook into the animation and make it different per page So all the ways that the mountains are changing and the text is changing changes per page So if you'd like to check out the code, I have a repo for it and also a demo site that you that's live that you can check out too I'm showing the site so you can get a sense of how those JS hooks work We have these different page routes and if you want to plug into them There's a bunch of different page hooks per page The one that's really important here is this transition mode and that's super cool because when you have a transition mode in view What it will do is it'll allow that component to completely unmount But it'll wait for the animation to to fully fade out then it will unmount and the other thing will wait until it's done So you don't have to write any like messy callbacks, which is what you usually end up having to do when you write that kind of code So this is from code drops It's a similar concept, but it's built in a different way the fixed content lies beneath and once we move the content up It gets revealed and all at the same time that SVG path is changed Through path data ID and this is done with anime.js not green sock This pen by Sullivan Nolan uses transitioning effects and morphing This is back to green socks morph SVG and you can see how it's really captivating and again because we're using SVG It stays totally stable for mobile But we can also use SVG for the layout itself when we were making this page for web animation workshops Our branding is all these triangles. So we wanted to make some interesting page layouts Those little triangles between the sections are little pieces of SVG where we've said preserve aspect ratio none Which means that it's always going to scale in every direction with the container So usually you don't want that right if it's like a face or something. We don't want that. It's gonna be like And that's a technical term for that But in terms of page layout, that's exactly what we want Cool. So SVG can also be super tiny if you look at this HP archive graphic It's a breakdown of all of what we're transmitting over the web, right? All of the kind of content breakdown So we've got a bunch of video. We've got a bunch of fonts and scripts and style sheets But images is huge images is two-thirds of what we deliver over the internet for everybody So I love this quote. You can't be a web performance expert without being an image expert It's actually pretty true if you think about it If you think about that last graphic if you're not thinking about the size of your graphics Then you're really doing yourself a disservice I was asked to I used to be a consultant before I worked for Microsoft and this company hired me because they had 10 page 10 second page load times and just by optimizing the SVGs on their site I brought the the site speed down to less than two seconds That's all of those seconds of deployment and performance all came from the graphics. So how did I do that? Well, not all SVG graphics are created equal We have everything drawn with math But if you have tons and tons of path points and you're not not optimizing correctly it can really bulk your files So I really like using SVG OMG again These are like linked up in the slides if you want to check them out later SVG OMG is by Jake Archibald. It uses a lot of service workers So if you have a bunch of settings in it, it will remember the next time you go there, which I think is super cool It uses SVG. Oh the last one under the hood, which is terminal based So if you're more comfortable with your terminal you can use SVG. Oh, but I suggest you pair it with SVG Oh gooey because the way that you optimize Actually affects the way that that SVG will look the middle one is Peter Collin Ridge's SVG editor It's like a 15 year old rails app that I just keep in there because like I'm a neck beard and I like it still Probably a little less useful, but really really still kind of fun I also wrote a post for CSS tricks called high performance SVGs That was all of the process that I went through to reduce the size of those SVGs for that consulting gig So in this pen I have this little draggable thing And it's a little spaceman and he's standing on the moon and the cow keeps scaring him as he goes over the moon and it's touch enabled for mobile and That whole SVG is two kilobytes So you can do really kind of cool effects and you know show really really Interesting information and have things be super small So while we're looking at this Let's take a gander at what's happening under the hood because I ran into a gotcha when I was trying to build this So at first I was like oh, okay. I'm gonna make this like thing. That's like a null object You know around with this cow and I can spin that and it can also Detect if there are collisions with like get pounding get bounding client wrecked or get B box For that little astronaut head, but then it was firing all the time and I was like what's going on I think the browser is wrong. No the browser is not wrong What was happening once I started you know putting like you know borders around it and kind of understanding this a little bit more is That the browser doesn't see diagonals the browser only sees in rectangles So to give you a better idea of what that means if you look at the bounding box stroke of these rotating elements This is what the Dom sees so I just think that's crazy like look at that circle. That's so weird So sometimes in order to debug things like this you do actually have to think like the browser not like yourself Okay, back to the weight of SVGs because they're they have the potential to be so small SVG is the perfect time to use something like a loader a lot of loaders are really Ugly and a lot of loaders are using gifts which are really heavy if you have a heavy and ugly gift Maybe you should think about updating it this graphic when I was given this Given this graphic by the designer. This is for smashing magazines checkout experience It was 35 kilobytes and I brought it down to six kilobytes just by optimizing it correctly And that includes the animation and everything So SVGs can make other graphics smaller there's this thing called SVG dot JPEG dot SVG And by this guy named Shaw and this is not like a particular graphic that I found But you can see that just dropping in any graphic that I had around which is my I am happy Marge Simpson You know, we brought the file size from 38 kilobytes to 16 kilobytes Just by switching it to an SVG and creating an image mask over the kind of repeated You know images if a bit mask has a lot of the same colored squares It's still mapping out all of that territory where an SVG can say like take the bounds of these things and don't paint them Just show this one color. So that's pretty cool SVG can be accessible we mentioned this before there's actually like a ton of ways that SVG can be accessible And it's like can be complicated, but nine times out of ten This is what you're gonna need in order to make an SVG accessible. So I'm just gonna dive into that really quick So we write aria labeled by and then a title and that title It has to be the first thing that follows that SVG tag That title also has to have a unique ID on it Otherwise, it won't be picked up by Jaws and in NVIDIA devices. Just writing title is not enough We also have roll of presentation on the SVG itself what that'll do even for your icons It'll allow it to screen readers to know that it's an image and not announce everything inside If you wanted to announce things inside, you'd move that to a roll group So that's some of the ways that you can make it responsive I also like writing Lang, you know, whatever language it is so that you know, somebody's using an Screen reader in another language the computer does the hard work for them. That's pretty cool So there's a resource with support charts There's also this article by Heather that she wrote for CSS tricks She spent like every weekend going to the library checking every different device This whole big labor of love for the community. So definitely check out that article. She did a great job with it SVG can be styled like text This is kind of like not too fancy But something that a lot of people kind of come to me and ask me about so let's cover it real quick Someone on Twitter asked me about this They made an SVG sprite sheet and it they're not styling it along with the text They wanted everything, you know, if they changed that line of text for it to pick that up So really so this is the question code. I left it exactly how it was and The secret trick here that you may or may not know about is that you change the fill to current color camel case And that will just make it reflect whatever it is So right now I just have that line with a class that says color red on it and it's picking up that color So if you are using SVG icons for your site, that's a really quick way to not have a headache whenever you're working with it SVG can bounce We can make a ball bounce with SVG really easily without any Animation libraries using request animation frame If we have this bounce ball bouncing we can use a little physics to kind of drum up the bounce of the ball And we can make the radius bigger and we can do all of that midstream So I'm using view again here, and there's some info that I'm not sharing showing here, but here's the gist of it We've got data. We've got the total like height of everything. We've got the radius We're incrementing things based off of a quick event And then we're we have gravity that increases the vertical speed horizontal speed increments from the horizontal position All of these things I learned from like just pulling things out of physics books So you don't have to invent all of this stuff from scratch. You can steal ideas that have been around for a really long time This pen by Tiffany Ray side is one of my favorite animations of all time She's not using any library or anything at all She's spinning up pieces of the SVG applying physics and even these like crazy bounces to to it Also, she manipulates the SVG path values when it hits the wall She's just kind of a master. So if you don't already follow her on Twitter code pen, you should definitely go do that SVG can snap in order to create some, you know, really really beautiful effects We're gonna use some ES six template template literals Which you're probably all familiar with but just in case you aren't I'm just gonna say something about them really quickly Previously we had string concatenation and all of that printed out to this Which was really hard to read and it was kind of ugly and it was kind of error prone because it was hard to read and now We have awesome template literals that when you put things in back ticks We can just manipulate strings really really readily and what does that have to do with SVG? well SVG all of those paths inside and then SVG are really just a bunch of strings of commands And they have these curve values and all of the letters mean a certain thing and draw certain kind of curves and create certain kind Of path so I really like this kind of path explorer tool If you're not familiar with them the way that SVG works you can go and play with this I also wrote about it in my book if you want to you know something. That's a little bit more traditional And if we know enough about how those curves are made Updating them is very simple with something like template literals When we're building out these paths we start with a move to and then we can create those curve By using things like C and Q so we give it a handle And then we give it another point and the computer draws a curve for us How cool is that you can like plot three points and the computer draws a curve? I just think that's great So that's really neat and then we can plot the points We have a bunch of different coordinate values that we're updating and it's so flexible We can make effects like this So you might have noticed that that SVG was distorting at the end there So let's kind of cover distortion really quickly and dig in to how you can do that So distortion filters are really awesome There was this great code code drops demo with a bunch of buttons and definitely the most you know Impressive technique was you hit a button and this little ripple effect came out and what they're doing in order to create that is they're using a filter called turbulence and You can Animate this filter in JavaScript. You can't do it in CSS. It's not an annimateable property We're kind of like hacking the spec here and manipulating it because there's just a bunch of numbers But I would say that from manipulating filters and pushing the dom's boundaries and stuff and doing things I'm not supposed to do I would suggest setting the filter on a timer like applying it when you need it and taking it off When you don't because it is performance insensitive. It's not really hardware accelerated So we can make things like this pool and that's pretty fun because the way that this is done is by applying that filter and Using an image to distort anything that's beneath it So we can have tons and tons of path values like you see here Everything under the pool is also getting updated too and we can do it really really simply all we're doing is we're taking That distortion filter and that image and we're basically Making it scale down hit the wall and scaling up and we're also animating the filter So we can do like really really crazy effects and when I made this pen I wasn't really thinking about like the political climate It's kind of a weird one to show But we can by animating filters we can also make things like a realistic candle that's drawn with math That's really really fun In order to make this I have a few different Pieces that I just kind of traced off of a candle photo. So I just made this in Illustrator and then made a gradient that's attached to it and then I they're not actually blue But I have a bunch of different path values that I'm going to set on a for loop And I'm going to morph between those path values for each second and plot them along a timeline But I also am using a filter and it's this gooey filter that Lucas Beber Created so he has some prior art here. He he's actually using this with divs You can make an SVG filter and apply it to HTML You don't only have to use SVG. So that's pretty cool. So a lot of people use this kind of gooey effect It's a blur filter and a contrast filter applied at the same time So yeah, we cannot because you know that standard deviation of the filter is just using numbers We can have JavaScript update those numbers request animation frame knows how to update numbers So we can do that we go through all of the path values And then we've got a little math dot random opacity because nature is just a little unpredictable And then we can use that effect to create smoke with math SVG can do on-the-fly logo adjustment This demo was made by Leah veru who if you don't follow her already You should probably go do so because she makes all sorts of crazy great things But basically you're allowed to update these logos on the fly Which I think is super great if you have to collaborate with a designer who keeps on not making their mind up And you're like they're like oh Change it out here. Oh, no. It's like fat is in. Oh, no flat is in You can kind of make all of these things really really adjustable So you don't have to keep changing things up and she made this with a tool called mavo that she built That's basically so that you can drum up sites using HTML and CSS with very little JavaScript Which is not very useful for us But I'm pretty sure that almost everyone in this audience has a family member. That's like hey Can you make me a website? And if you do this is a really good thing to show them because they with just a little bit of training They can make their own website and you can get on to your real life work SVG can draw itself too So let's say we have a shape and that's the stroke of that shape is dashed But we make the dash all the way around that entire shape It's the length of the entire shape that offset the offset between those two dashes is animatable So we can have an SVG draw all onto the page just using CSS or something So I made this pen to kind of celebrate New Year's And there's like, you know the fireworks are that kind of idea and pew and yeah This pen by Chris Ganon is also really awesome He does this that same effects if you don't follow him you should go follow him because I think he's just pretty much a genius He's also doing this with clip path. It's super cool You can also interact with an SVG we can manipulate it and interact with it on the fly as well So if since it has a navigable navigable Dom, you can do all sorts of things with it Again, I'm using view here to like update the text and make random lines and allow the user to kind of play with the SVG graphic as much as they want to I can also animate it if I want to And have them be in charge of that as well And I made this demo too long, so we're all gonna watch it So it's gonna play the animation but the coolest part of all of this is I'm gonna play this animation It's still a graphic so I can still download it and it's gonna respect all of the positions that were set during that animation So even though I'm animating it. It's still in all of those places. It's still a graphic that they can hand out to their friends or something So here inside the HTML template we can create some semantic form elements And then we combine them to these methods where we're creating and kind of drumming up pieces of the SVG on the fly We use as we can use SVG to respond to things that the That the browser is doing so we have this like little Wally pen I don't know if you've seen the movie Wally, but I really like it He has a little cockroach friend and he's you know kind of reaching out for him every time the user Moves across the page so what we have here and we have a bit more code than that Basically we have these at mouse move events and I've created an entire timeline for him reaching his arms out complete with eases And then I plot that along that progress of the timeline along with the coordinates So the user can control all of that and it stays really really lifelike So in order to make that pen we had to clip and mask things so SVG can clip and mask things SVG offers this thing called clip path, which is really nice because if you looked at his arms They had to kind of reach out from somewhere, right? I can't just keep tucking everything behind of everything else in order to make it look realistic It has to clip out parts of his arm. So we were able to do that with clip path and If you use something called mask you can use opacity so clip pass will just kind of respect the geometry But something like a mask we can create something with an you know Like a gift masking with all of these SVG patterns and you know slowly unveil them We create a mask and desks and and put inside of it the image that we want to use and then we have we apply it to Erex that also has a pattern associated with it So I learned this technique from Yoke so who has like a whole bunch of pens like this that are super super awesome She also has the most comprehensive, you know collection of SVG And CSS clip pass so if you need to learn about them or you're confused about them This is all like interactive and you can play with it and the code is open source I also kept getting confused between the difference between clip pass and masks So I wrote a CSS tricks article that you can look at to that defines the differences between them CSS has tricks has pretty good SEO. So I knew I could just go look at my own resource again and again If I got confused again and since SVG also has text you can Have that clip that masking apply to text and do things like have your users update text to This pen by Noel Delgado is probably the most famous and also my favorite example of this Clipping and masking that's paired with animation SVG can signify something changing So I kept going in between different time zones for my work And I you know couldn't remember where all my co-workers were or what time it was And I could have just made a dial that just showed what time things were but by changing the SVG and making that dial That associates that change in time I get a better sense of whether or not it's day or night and I can ping them or not and they're probably with their Kids or something like that But while I was working on this Something interesting I found was I used to use this thing called moment.js that kind of allowed me to work with Time data and understand where everybody was you know in in terms of like daylight savings time But there's actually a native method called to locale time string that offers all of these defaults like hours and minutes and All sorts of things so that actually respects all of those daylight savings time so you can eliminate a big library like moment You can use SVG's view box as a camera. This is one of my favorites You might already know this but when you have something like a graphic when SVG is plotting all of those points to draw those Coordinates it's doing so on a big piece of graph paper basically and that piece of graph paper is endless It's just this giant coordinate system and in order to see inside of that SVG and know where to plot those coordinates And what you're looking at You have a thing called the view box and the view box is made up of four values 00 that's x and y where to start it off and then width and height So if I wanted to update this view box to just look at these little houses or something I would have to you know update them to 215 want by 160 42 by 20 So SVG also has a native method called get B box and that will return this object that has X Y width and height for anything that's inside the SVG That's cool. That sounds a little familiar that might be what we need to maybe animate it or you know updated on the fly So here I'm just you know using that to update the view box And then if I take that out it will go right back to where it was So I'm just setting the attributes based on that So then we can do something like this data visualization where we're zooming in on a certain country in order to show Different pieces of information and again because it's SVG It's all totally scalable for mobile and it's so small because it's just one path that's drawn We can also make a flow chart I'm basically this is just a giant SVG and we're just like moving things based on the user input and like Then people can pick a certain thing and then they can go to you know a different kind of output So we can make you know interactive flow charts. This one is really cool This is like a game that somebody made Updating the view box where they're like placing little household items and stuff But we can do better. We can do like a big game. So So let's make a game and that will be the last thing we do this afternoon So if we have a game about a hipster elephant that's going to go get tacos But his friends keep texting him to change plans and you're supposed to try to go get the tacos But avoid the text messages and like there's margaritas for extra bonus points Oops So you can basically move this guy around and like your heart meter goes up and down And if you lose the game you become hangry and you have to watch a movie you already saw and If you win the game you can tweet out your score. It's based on real life events So how do we use SVG in order to create this? We're using react to manage all the state for that application if you know how to manage state for an application You can probably already make a game too So we're using SVG three ways. We have it directly in line in the HTML for loops We have background images for things like tacos where we're not really, you know updating the tacos We're just kind of throwing them across so they don't have to do anything Super special and we have things that are in line directly in react. So let's look at that last one really quickly So if we have this is a slightly older pen. So yes, I know I'm using react create class. I wouldn't use that now I would use classic stens So if we have the initial state of that score that's at 500 and then you know We're setting the game to start because they can play it again They can you know get to the end and decide to replay so we're setting the score back to 500 if they do So we don't want them to have too much, you know winning too much or losing too much And then we have this update score that will either like end the game or win the game if it gets to a certain amount But then and my highlighter is not on this It's on the dots but it should be on the heart meter and that heart meter We're passing down this dot state dot score So you might have noticed that heart meter at the top of the at the top of the game that was kind of keeping track of our score So basically we have this SVG and that SVG is actually really really big because I want to use whole Numbers for this. I don't want to use like 27.25 or something to update the score when he's a thousand or zero So it's really big and then we have the width that's this stop props dot score and in our racks in SVG in order to update it We have an xy width and height just like the bounding box so we can update that on the fly and Because it's SVG we can make it super small then for the size of the screen that we need and on desktop It's a certain size and on mobile. It's a different size with media queries All of that and we didn't even get to any data visualization I wrote a book about SVG animation. This is not my book. This is my friend making fun of me I don't have a man blob animal. That's not even my last name. I Do have a real or I look I think I have like a fancy chicken or something. That's cool Um Yeah, thank you so much for coming today. I appreciate it Thank you so much Sarah Those animations totally blew my mind and I love how you shouted out so many other creators in your talk way to spread the love Yeah, yeah, there's a lot of them. We have time for one quick question What resources would you recommend to get started creating awesome SVGs like the ones you showed? Yeah, actually, I think a misconception that a lot of people have is that you have to be a designer in order to make things with SVG you don't there's tons of free SVGs online that you can go play with Free pick with a K. No CK free pick comm has tons of free vectors that you can use The noun project also has a bunch of free vectors So you can just you know download them and start playing with them and animating them and manipulating them Awesome. Thank you. Yeah, definitely go buy her book if you want to learn more