SVG can do that?! - talk by Sarah Drasner

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 that the title of this talk is SPG 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 Dresner 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 HD I always mess that part up at less HTTP requests to handle did it alright cool it can have no age to be a request 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 2 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 well definitely going to 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 of us hat 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 with HTML elements with so that's really cool we talked about how it's and 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 fun's 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 off from Annie 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 inline 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 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 we're 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 splashing 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 sits 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 SVG's 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 paint 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 hug heed you know like you have in real life and then when we scale it down to mobile everything can kind of reconfigure and reconfirm and all of this works on old Android 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 really literally have a click event listener to reach rigor that time line but you'll see all of the functions are scoped to the SVG's 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 has an animation API react coordinates the state while green sock coordinates all of the 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 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 slide so you can get a sense of how those j/s 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 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 wraps 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 animate is 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 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 said preserve aspect ratio none which means that it's always gonna 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 break down so we've got a bunch of video we've got a bunch of fonts and scripts and stylesheets 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 ten page 10-second page load times and just by optimizing the SVG's 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 Colin ridges SVG editor it's like a 15 year old rails app that I just keep in there cuz like I'm a neck 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 SVG's that was all of the process that I went through to reduce the size of those SVG's 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 2 kilobytes so you can do really kind of cool effects and you know show really really information 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 ok 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 pout and 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 of 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 late of SVG's because there 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 smashing magazines checkout experience it was 35 kilobytes and I brought it down to 6 kilobytes just by optimizing it correctly and that includes the animation and everything so SVG's can make other graphics smaller there's this thing called SVG JPEG dot SVG and by this guy named siya 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 kind of complicated but nine times out of 10 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 you should be doing this it'll allow it and screen readers to know that it's an image and not announce everything inside if you want it to announce things inside you 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 you 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 they're not styling it along with the text they wanted everything you know if they change 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 cased 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 Lant animation libraries using a requestanimationframe 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 sure 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 a code pen you should definite go do that SVG can snap in order to create some you know really really beautiful effects we're gonna use some es6 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 backticks we can just manipulate strings really really readily and what does that have to do with SVG well SVG all of those paths inside in Venice Fiji 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 paths so I really like this kind of path Explorer tool if you're not familiar with 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 - and then we can create those curves 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 were updating and it's so flexible we can make effects like this so you might have noticed that that SPG was distorting at the end there so let's kind of cover distortion really quickly and big and 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 animate scible property we're kind of like hacking the speck here and manipulating it because there's just a bunch of numbers but I would say that from manipulating filters and pushing the doms 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 and sensitive 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 in 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 pan I wasn't really thinking about like the political climate so it's 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 gonna morph between those path values for each second and plot them along a time line but I also am using a filter and it's this GUI filter that Lucas beber created so he has some prior art here 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 GUI effect it's a blur filter in 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 requestanimationframe 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 leav aroo-whoo 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 it keeps on not making their mind up and you're like they're like Oh change it out here oh no it 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 MA though 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 web site 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 - 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 that's this pen by Chris Gannon is also really awesome he does this that same effects if you don't follow him you should go follow him because he 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 going to 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 can bind them to these methods where we're creating and kind of drumming up pieces of the SVG on the fly we use s we can use SVG to respond to things that the blog 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 the user moves across the page so what we have here and we have a bit more code than that but basically we have these at mousemove 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 coordinate 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 over 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 paths and if you use something called mask you can use opacity so clip paths 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 F's and and put inside of it the image that we want to use and then we have we apply it to a rect that also has a pattern associated with it so I learned this technique from yoke cyl 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 paths 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 paths and masks so I wrote a CSS tricks article that you can look at too 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 applied a text and do things like have your users update text to this pen by Knoll 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 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 jeaious that kind of allowed me to work with time data and understand where everybody was you know in terms of like daylight savings time but there's actually a native method called to local 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 a view box and the view box is made up of 4 values 0 0 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 1 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 enemy or you know update it 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 flowchart 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 flowcharts 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 could 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 say for an application you can probably already make a game too so we're using SVG threeways we have it directly inline in the HTML for loops we have background images for things like tacos 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 inline directly in react so let's look at that last one really quickly 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 class extends 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 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 twenty seven point two five or something to update the score when he's a thousand or zero so it's really big and then we have the weight that's this stop prop score and in our racks in SVG in order to update it we have an X Y 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 any book I think I have like a fancy chicken or something that's cool yeah thank you so much for coming today I appreciated thank you so much Sarah those animations totally blew my mind and I love how you shout it out so many other creators in your talk weight us Fred the love yeah yeah there's some a lot of them we have time for one quick question what resources would you recommend to get started creating awesome SVG's 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 SVG's online that you can go play with free pick with a K no CK free pick com 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 Sarah definitely go buy her book if you want to learn more [Applause]

Channel: freeCodeCamp.org

Views: 19,283

Rating: 4.952055 out of 5

Keywords: learn to code, programming, coding, javascript, web development, web design, tutorial, python, android, security, testing, coding tutorial, javascript tutorial, web development tutorial, html, css, design, html tutorial, css tutorial, learn to program, learn how to code, learn how to program, get a programmer job, get a developer job, python tutorial, android tutorial, linux, learn programming, learn coding, linux tutorial, learn linux

Id: 4laPOtTRteI

Length: 38min 7sec (2287 seconds)

Published: Fri Mar 16 2018