 It is now We're gonna spend three thirty nine minutes and fifty eight seconds talking about the wonderful world of SVG It's gonna be amazing. My goal is to get you excited about SVG and stuff Maybe I'll not stand right in front of it. Although. I like to pace a little bit I work on a pretty cool app called codepen and there's gonna be a bunch of codepen demos and stuff in here Just because that's exciting and fun and I like showing off other people's work SVG is a language It's built with angle brackets and attributes and values between those things and stuff. It looks a little bit familiar to our friend HTML they're both kind of XML, right, but in HTML land the tags are Divs and spans and things that make sense for documents whereas in SVG the elements are slightly different They're rectangles and ellipses and things for drawing and things to affect drawings, but they're familiar and they're fun They hang out together and that type of thing Let's look at a little bit of syntax for context, you know what we're talking about here how SVG works. It's not particularly complicated in fact Of all that you know like if you're right in HTML There's like you don't have to like have a cheat sheet of elements next to you usually is you kind of just know what to use That like a SVG is kind of that same way There's not so many elements that it's hard to memorize the important ones that you need or not even memorize It's kind of rare the actually have to write them yourself But the point is there's just not that many in fact for the shapes that do drawing in SVG That's all of them really there's really not that many is lines and rectangles and both circles and ellipses Polyline is a polygon that's just not closed and then paths are fun because they can draw anything They have their own kind of special syntax pretty cool little element there. Let's look at a little bit of syntax Pretty easy to understand the dashed area there will be the SVG context that we're working in it'll be an SVG tag around This rectangle, but there's an X and a Y coordinate, which is kind of the where it lives You know, that's that's 10 10 right there Sure, and then it has a width and a height and then those are equal So that's why it's a square and we've drawn a we've drawn a circle that's filled with yellow and struggle It's pretty easy to understand. It's just some attributes on XML elements and you've kind of Syntastically declared a rectangle pretty nice there circles work the same way There's an X and Y coordinate and a radius involved and it draws a circle there So pretty kind of pretty kind of easy to understand System there there's XY points that and then that's how a polygon works is just XY points and it draws a shape between them You can kind of draw anything It's it doesn't take too much of a stretch of imagination to understand that you could with those tools draw beaker freaking out There's just circles and polygons and stuff You know like the tools are there if you can draw rectangles and circles and stuff and fill them with colors You can draw a lot. Those are the kind of the tools of art There's these are the little electricity things are poly lines Unclosed polygons and stuff that the tools are kind of there a little bit more syntax. You could declare a gradient That's how it's done in in SVG. It's a little it's a little wordy Maybe for a little bit compared to CSS, but it's not too bad. There's actually a gradient element That doesn't draw anything at all by itself You're just kind of declaring this gradient in which to kind of apply to other elements later We've given it an ID here And this is like a fancy designer gradient where it fades to like green to like slightly different green to slightly different green just so it's perfect and there It's any lips and we'll draw the ellipse and we'll fill it with a reference to that gradient And it's a gradient with a fancy green thing on it, right? We can take because it's been declaratively defined We can then draw something else We'll have a path element with a bunch of funny numbers in there But that you know member path can kind of draw anything in this case We drew a little leave and we filled it with green and we were able to refer to the same Gradient that we've already defined so that's kind of the Syntaxical declarative nature of SVG that's kind of cool with those tools now so you can draw any shape You can fill it with any color you can stroke it with any color There's you can do all the all the tools of art are there It's not too much of a stretch of imagination to think that you could just do anything You know I have all the tools that's that's all the that's all you can do in any kind of visual languages draw shapes and fill them with Colors, maybe I guess texture we don't have but that's about it in SVG So this particular image in the background though There's kind of limits to the practicalities of SVG in that way I happen that's one that comes with like illustrator when you buy it is like look at the cool shit illustrator can do But it's like a lot as SVG It's like 11 megabytes and it was just weird territory for SVG I mean it came as a dot AI files whatever But you would probably not use that an SVG format on the web because it's like impractically large and the pull point of SVG is the web really I mean there you might like argue for some archival reasons why it exists, but It's a vector format for the web. It was born for the web It was specced out by web people to be used on websites So what's kind of interesting about that is there's no there's no it doesn't enforce any particular like performance Limits or anything, but there's certainly files that like totally definitely should be SVG on your websites Totally definitely shouldn't be SVG on your websites like that weird Whatever that was happening in that one and then and then like gray in between right of ones that are like Probably should be SVG, but maybe not or how do I guess? So I thought we'd cover like the obvious spectrum and then talk about the middle gray area a little bit using your grandmother as a Guide this picture of your grandmother. I Can just tell is like 80 bytes, you know It's like a it's like a couple of a couple of elements just a little bit of code that it would take to draw that in SVG with The stroke it's super minimal code and it will render like it is now render perfectly well On a website that's kind of in the like definitely category like if that's the image you're trying to use in your website That is like SVG town definitely use that then as we move into the middle ground Territory, there's like maybe like kind of cartoony stuff like this vision of your grandmother here is like in that gray area Kind of like it's a it's complex enough That the file size compared to the PNG version of it is like I don't even know so when you're in this kind of territory, which we'll talk a little bit more as we move on You should probably be comparing the zipped file size of it compared to cool The zipped size of the of the of the of the JPEG version of it to be kind of to be kind of fair about it And then you have to make choices like is it are you am I just playing it that big on the website? And it needs to look super crisp or am I shrinking it down to like avatar size and there's like 12 of them There's like decision-making that you have to do their file size being one of them in comparing the the gzip file size of SVG which we're going to look at in a minute this version of your grandma. It's it's raster. It's pixel by pixel There's no there's no reason for that to be SVG SVG isn't it's a it's a cool file format It's useful for lots of things raster not really being one of them unless it's like weird clown car stuff That was a best cackle ever nope Cool, this would be like maybe in the maybe category right it's pretty complicated SVG could totally handle it It looks beautiful, but it's fairly complicated. It would probably be a pretty big SVG file, but it's moves Which puts it firmly in the SVG category because that's awesome And the SVG has great animation tools We'll talk about that as we move forward a little bit here as someone who looks at a lot of demos on code pan Occasionally, I'll see something like this where it's really cool. You're like nice You made it I kind of an SNES controller that looks awesome It does look awesome cool little experiment wouldn't take that away from anybody But you do look at the code and in this particular case It was just div town right which is cool and clever and interesting you can take We've come we've talked about this many times you can take a rectangle and apply border radius to it and absolutely position it and rotate it And you can make this happen with divs and there's nothing really the wrong with that from experimental perspective Other than that it was probably kind of hard to do that and it probably would have taken like 10 seconds an illustrator to draw The things that just exported as SVG and then it would have been an SVG file Which is cementically appropriate thing that has more design possibilities to it. There's more places you can take it There's more animation that could be done to it in an easier way. So this kind of drawing with divs stuff is weirdly common and should be just play with SVG kind of thing not to mention there's tools to do it like like I said You could probably draw that Without too much skill and something like illustrator barely quickly an illustrator speaks SVG very well It's a native file format of illustrator, which is great. So I think here's just me Smurfing around and in there just just to prove that like look It's made from points and you can move things and rotate them and crop them and remove other garbage and stuff I probably should have made this video so long and boring But I think the point is I get to a point where I'm saving it because I need I need an SVG file in which to use And the drop-down menu has SVG as a format. It's not just you don't just export to You know, it's not like you have a PSD and they're like I'm gonna temporarily make a jpeg but I had me to keep the PSD around because otherwise it won't be editable the SVG and illustrator can be saved as a SVG in a kind of fully editable Kind of way and we'll we'll get a little bit in more into that later and kind of what you should and shouldn't do there I think I might even have this kind of this is like one of those like major dialogues that you're confronted with when you Do that that's like holy buckets. Is there a lot of things in there? SVG SVG 1.1 is the kind of the correct choice there This is the thing like let's say you have type in an SVG file. It says like Chris okay, and then that's editable so I can click into it and like change the letters to something else it remains Editable text, but then like in SVG there's an actual element called text and that's kind of great because the text remains editable selectable indexable searchable findable whatever text actually in the SVG document Which is great and it's really tiny and efficient that way But it's subject to the fonts that are available in the document that you put it in So if you use like cool Gotham or whatever designers are using these days Gotham light You can't like you can't just use that the text it won't little be in Times New Roman or whatever the default is right unless you Happen to be load that at font face font and use it But if you're like, but I really want to use Gotham light on you can like convert all that stuff to outlines I'm sure you've done that before it's not really type anymore. It's just a vector shape of this We'll just kind of do that on the fly for you. That's what that one is It's just kind of convenient when you save it. This this is an important one the preserve illustrator editing capabilities. That's like If you like guides, you know, you can drag in the little blue bastards from the side and they Luffer line and stuff up that's data that goes into a file And you would maybe expect that the next time you open that file that they would be there But that's stuff that's got to be in there if you save an SVG format. There's no SVG Element for a guide. It's just crap that gets thrown in there. I don't even know what it looks like in the file But it's there totally useless for the web. So it's tempting to like turn that off so that you It's not there because it doesn't need to go across the pipes of the internet. That would be kind of useless information Maybe just leave it on though because Like it's something to do your like just get some optimization of SVG going here But it's like maybe not like there's probably a build step that will do most of the optimizations You might as well kind of leave this file as like nice as it can be with your guides and your precision and stuff And then do the optimization stuff later. Maybe that's up for debate. That's the only right answer to that one Let's cruise through this UTF-8 the whole web Responses a good Checkbox there you'll get a viewport if you leave that checked, which is good. That's a boring slide Let's move on there's tools in Photoshop for vector editing stuff, too That you may or may not be aware of One of them is like if you kind of if you like right click on on that's like a vector That's a shape layer in Photoshop, right? You can kind of go if that layer is like you can go file or you can go click right click on the thing and go Extract assets from the flyout menu now you get this weird export screen that has it cropped to that logo And you can be like I want a PNG version of it. I want an SVG version of it I want a 2x version of a 3x version of it just an export and I'll give you all those Pieces which is kind of nice for web design people. I don't know if you've used extract assets, but it's actually outputs pretty decent SVG Cropped ready to use right from Photoshop, which is kind of cool And it's you know, it's ready to rock it actually has some of the best SVG export that I've seen a lot even like good Kind of SVG will even sketch like puts a bunch of like Metadata garbage in the file you're like cool. Thanks. I'm sure my users will love that digging into that View source generated in point four two seconds Thanks Sketch is pretty good though Sketch is good any element you like click on and sketch whether it's a group or what I don't know how many people use sketch Sketch is great, but yes nice. I saw a tweet the other day that was pretty funny about sketch There's like a guy like fell down a well or something and he's like help and a designer walks by and he's like You haven't switched to sketch yet So you can click you can click on stuff and then you click make exportable And you get the same same kind of stuff where you could be like I want the SVG version of it I want a PNG version. I want a 2x version of it. I want a 4x version of it Whatever you just tell sketch what you want we'll zoom in on that like that's this is this is good for that responsive images Stuff if you're if you're if you like, okay, I get it source set 2x 3x like how do I generate those versions? Well, you just you put the high res one and sketch get it to the size that you want it say I want the 1x the 2x the 3x whatever just hit export and Throw them in and now now you have all those versions for source set to use This is part of that workflow kind of so that's pretty useful for the SVG portion of it You could you would use picture because picture has a way to do to do media type fallback stuff, which is pretty good So yeah, throw them back. Yeah, you like He loves that stuff Great, so that's what like the syntax would like for picture if you If you have a you'd have a source that points to the SVG file And if it fails then it then it will kind of fall back to the PNG stuff And that's how you would use that The problem with that kind of is that picture element any any browser that sports picture certainly sports SVG as well So it's not really that useful unless you use a polyfill for picture Which is great because there's a really good one called picture fill But in order for picture fill to really like do its thing and be efficient you can't have image source It will the browser will find that with the pre-fetchor thing we learned about and it will download it anyway So this isn't this isn't all that useful unless you use picture fill and kill the source part Kind of move that down into source set, which is fine It's just invalid and then locks you into using picture fill forever Which is maybe fine because picture fills cool But just know that like this isn't maybe the always the perfect way to kind of handle that We'll talk about more fallback techniques for SVG Later so now you have some SVG. We made it an illustrator. We found it on the web Whatever we have something dot SVG and we intend to use it. There's a whole bunch of ways to use it on the web I think there's pretty much only three that are are useful in any way One of them is just to put it as the source of an image tag. That's the kind of the easiest way One of them is the background image in CSS Which is cool and one of them is in line SVG the other ones being objects and embeds and iframes and stuff And of all the years I've worked with SVG I've never done that so whatever go away We're gonna have an image tag and we're gonna just point it to an SVG file You can do that if and anybody didn't know that now you do and that's a I think a kind of an excellent takeaway It works just great for the most part The con the the use case for that is images that belong in content They're part of a blog post or a page or they live in CMS or somewhere. They're not really part of the design of the page They're part of the content that goes there. It's part of the design of the page. It's kind of CSS territory. Anyway, so there's the There's a blog post. It's got a cheesy thing box border box is cool It lives there it lives in the RSS feed that I read for it It goes out to it this gets put into an email that goes out to people the image will show up fine in the email Images are perfect for that SVG is a great use case there If the image is vectory and small and fits into the definitely category and all that stuff Yes, it works in email for the most part If not use an alt tag good enough May the This is how you use it and it's just you just use it in the same way you'd use JPEG GIF ping whatever you just put it in the background with the URL thingy and there it is this would be like a use case for that It's an ad there's people in the background. That's totally vectory. That's gonna look great an SVG No matter how you do background size you could do for example background size Cover or whatever it is which just unabashedly resizes it It doesn't care to make sure that it fills whatever the element is that would be kind of dangerous Maybe in with when you're using raster cuz like what if it makes it bigger? It might look like crap Doesn't matter an SVG will resize and it will look good doing it This is what inline SVG looks remember our friend the rectangle. I need to not step on that It can just be an HTML document and it will draw the rectangle right in the document Which is pretty great now. I have drawing tools right in HTML What's kind of nice about that is those other two ways that we just looked at it's referencing a dot SVG file that it has to Traverse the internet to go get and then come back which is fine because that's how the internet works except for that when you're looking at Making web pages more performant the less times you have to do that faster your website Which is great, so this doesn't have to go anywhere all the instructions for drawing it are right in the document Which is good for speed and it's good because it's like in the DOM and you can control it with CSS and you can Attach event handlers to it. You can do anything that you would could do with a div. I think maybe even more. I don't know So let's think those those three ways that I think are important. Here's a fictional website about doughnuts to demonstrate such Cool, so it's not like they're all interchangeable ways. You'd probably reach for them in different circumstances I would say that the doughnuts themselves I could see being content that like goes out to an email or is generated by a CMS it's like these are like posts almost I could see that making sense to be like this is Content that's going on the page that is going to go elsewhere, too. That's a fine use case for SVG as image There's the little purple wavy things that are part of the design of the site that makes sense that it would be in CSS SVG views that way we could size it we could do stuff that way and then there's like the logo And then there's like the add to cart buttons have a little cart those are vector I would say the inline SVG makes sense for that because we can build a system to do that and we're going to do that Soon I think if not next I thought we'd just interject a little thing like can we talk about why SVG at all? The obvious one is resolution independence SVG will always look as good as they possibly can on any screen despite It's how you size it or what pixel density the screen is and stuff. It doesn't matter. They're made from math Little look fine. That's probably the most compelling way because you know responsive raster graphics are a pain in the ass And it's just you just don't even have to worry about an SVG. You have a vector graphic It's just one less thing on the things to worry about list that we all have I Have one there's a you know another cool reason is that you can use SVG as a system We looked at the syntax and how it's declarative and programmatic and stuff That's like a pretty compelling reason to use SVG computers can do cool stuff with it So that's cool and all the design possibilities like animation and controlling it through CSS and that type of thing That's pretty I mean the list could go on farther, but those are some pretty compelling reasons to look for it This is the most like typical cliche conference graphic ever like there's different size screens these days Have you thought about that? That's a I have a phone right here in my pocket And then so anyway But you've but it's kind of true and SVG will eliminate some of that problem you can put SVG on it anywhere and It will look as good as it can look which is kind of great I think I have a sound for this one But this was like kind of the year that the smart people that decided SVG should be a thing do Rock the rock the modem sound a little slow cool. That's like the environment that the SVG was Was invented and it was a low bandwidth time and we knew it, you know everything sucked and kind of Not really the matrix was that year, but Amazing But it's we knew that it took a long time it was that was definitely even to this day Like the network is the bottleneck, but it was really the bottleneck then that sucked, you know so We did we the it was born in this fire of like let's send like Instructions on how to draw something instead of the thing that's already been drawn because we can either computers more powerful than it go I'm not saying anything else Cool. Yeah, this was like the graphic that supported what I just said, which is why send pixels when you can send math It was good. I thought I think those are good slides Nice so yeah, why send pixels when you can send geometry because math is more efficient let the let the let the computer Do the drawing which is interesting because I think we had we had mr. Tom Dale actually on a podcast We was talking about MVC frameworks and ember and how like it's a big payload, but once it comes down to your computer It's a lot more efficient what goes across the network wires in an MVC world is like less and it's like let the computer Do more and the network do less which is kind of thing Which is interesting parallel right? It's the same kind of Concept come on buddy. There you go There's a thing and he found cool. He would agree with me that svg similar different concepts There's like big thought stuff tweetable maybe Let's talk about svg efficiency a little bit svg's already very efficient because its instructions on how to draw something so like that by nature is a pretty efficient thing But because of the file format in the nature of it it can be like even more efficient, which is pretty great For example at g-zips super well g-zips is just something you like tell your server to do and it does it for you for the most part If you've configured it correctly There's a little bit of code to do that It's mod deflate and stuff not something to write down But this one is like make sure that you serve it in the right file format because occasionally Servers are weird about that and then while you're at it g-zip it on its way out You'd probably be g-zipping a lot of stuff, but see how it matches the file format there Yeah mod deflate. It's pretty good stuff This is a cool video like kind of to understand how g-zip works. This is how g-zip works on a poem Which is cool. So once upon a midnight dreary Yeah, and any in the wind and when it comes across some text that's already been printed that like kind of collapses into nothing It's just turns into a pointer of where that text has previously appeared kind of thing So anything that's read kind of like gets collapsed in the kind of final file So as the as the poem goes on more and more of it becomes Code that you know will kind of not be there in the final thing. It's just the black that's that you know I get I'm not very good at explaining it, but the yeah, look at that that appeared somewhere else. That's amazing Anyway, so g-zip is really efficient. Can you imagine how G how how how it is in an svg file It's done a friggin poem with fancy words in it It's like wrecked wrecked wrecked wreck x equals x equals x equals angle brackets all over the place It's super repetitive. So g-zip eats the crap out of it. It's rid of g-zip's incredibly well So that's just g-zipping and then it can also be optimized like like the like imagine a polygon where it's at like 1.872 and 4.378 or whatever like does it need that much decimal precision? We could probably like chop off some decimal precision. We can remove white space so we can remove comments We can remove a proprietary crap There's like a lot of optimization that can happen like Curistically kind of and that's what svgo does. This is just the the graphical version of svgo There's a bunch of versions of it We drag grandma on there and we get 20 to 20 percent presumably without it looking any differently than it did before So it's very compressible just with that then with g-zip then the fact that it's efficient anyway It's like it's a super efficient format for the web kind of great Cool, let's talk about icon systems a bunch because I think that's like a hot cool thing Or I've decided it is a hot cool thing in svg land a lot of websites need icon systems I've got a ton of you work on sites that have one here's github.com They make there's like a few places on their site where they use icons I was able to identify a handful of them where they need it where they just they've decided to opt for an icon No judgment there the point is that like if each each one of these was like image source equals gear dot svg Or whatever that would be a whole heck of a lot of HTTP requests. We already covered that's kind of bad news for the web So we reduce the if we could smash all those into one request that would be kind of great for performance It would be a nice system. Let's build a system. We've been building systems like that for for kind of a long time Yeah, that's that's the deal. It's 20 requests very slow. So in our system We want all the way to smush all the icons into one request That would be nice for performance and then just make it easy on us Give us some tools to kind of make it not so hard as a front-end developer We solved this problem in the past with with with sprites and we had creative solutions for that you could hand code them You could use tools to build them. This is the same problem with the same solution smash all the things into one request Serve them somehow we solved the same thing with icon fonts was like that, you know, it's like that's a system It's somewhat easy to use and we've smashed all the icons into one file. We're solving the same problem here I'm gonna solve it again with svg and what I think is kind of the best way to do it probably for the future as a quick aside The things that we're gonna talk about are probably not gonna be super important in HTTP 2 I don't know what the timeline is. I'm sure there's smarter people in this room for that but I think the idea is that There's not as much penalty for requesting multiple files from the same host in the future and It might be better not to do this, but I wouldn't like wait for that necessarily I don't know what the timeline is but for now. Let's keep smashing stuff together. It's pretty good for performance So here's that we're gonna use inline svg to pull this off and this is gonna be our little odyssey here This is how svg works. There's an opening and closing tag, right? We're gonna put some drawing elements inside of it Let's say the top one draws the Twitter bird or something the bottom one draws the code pen logo Which is the thing and then the other element is the circle There's you can put whatever you want in here lots of shapes lots of stuff gradients whatever you want then around each each icon We're gonna put for now a g tag and a g tag doesn't mean anything in svg. It's just like a div It's just a generic wrapping element. It's group and it's just convenient for like the cascade You know kind of referencing a group of things together for styling reasons or whatever We're gonna put that in a depth tag in svg. That means I'm just defining this stuff to use later I'm not gonna don't draw it right now For now, we're gonna drop it right in the document right and HTML document We're gonna make sure that svg doesn't render because the even though depths won't draw the stuff an svg element still takes up space So let's squish it to nothing. You might even want to kick it off the page something like that with css And then when we want to draw that shape we use the use tag It's a new one We're looking at in this funky looking attribute the x link href attribute and we're going to put with the value of it The identifier that points to one of those g tags with all the drawing shapes inside of it And that will work wherever this appears in our document. It will draw That icon which is useful. So it's like we've set up all the icons We want to draw and then we just sprinkle this in our document wherever we want to draw it So it's kind of the basis of an icon system, which is great in this case. We've put them in some anchor links We put it in some things Put some some words next to those next to those shapes That's the old school design of CSS tricks did that it was just drawn in svg and then use use use use Fill orange fill red fill blue whatever I just drew in a tab once and I used it over and over and over And I was able to draw that shape, which would be pretty hard to draw Exactly as is in CSS with the outro would be pretty difficult to pull off probably Cool. Yeah, so that's how those tabs work But certainly it could be just like a little cabin next to the word home or whatever and the more traditional use for For svg icons, but let's level up this a little bit Let's make it a little better if we can we're going to do some things to it We're going to use the symbol element instead of g symbol is perfect for it It's kind of that's the whole purpose that exists in svg is to you know Have a thing that you can reference and use later We're going to use a build tool make our computer do some work for us because that's what they're for and We're going to Ajax for that file, which we'll get to in a second. That's efficient because we can then cache it Instead of dropping it in the document and then we're going to deal with all the fallback stuff So this is going to be the final little journey we're going on first. We just looked at some code. So It's my chill out slide Cool, let's get into it though. This is what we used to do We have the g and then what later when we want to use it We have to actually do a little bit more work We have to bring a view box with us to set up the context that that drawing was in we have to put that's not even That's a bare minimum for accessibility You probably have to put some aria rolls on it and title tags and stuff and actually where you draw the icon Is a little bit more robust than what I just showed you have to kind of do all that stuff Well, let's let's replace it for with the symbol tag You don't really need deaf symbols don't draw automatically you could leave it in there That doesn't really matter the the symbol tag and this one We're going to put the view box Which is the the context in which the shapes are drawn is on there the our correct aria labels are on there the correct Title and description and stuff is right there now later when we go to use it and draw it in our document We don't have to have a view box all the aria stuff just comes along for the ride It just gets plucked up and put in here instead and it just becomes easier to use So like that's kind of the way to do it and if we could have a computer build that thing for us That would be great because the implementation that is super easy So this is kind of what we actually want This is the final output file that we want is just an SVG then symbol symbol symbol symbol symbol symbol Just the each one of these is a an icon that we intend to use our logo the Twitter bird whatever it ends up being That's what the kind of final Production output is going to look like although the white space and stuff would probably be removed We're going to make that to a devs file or call it whatever you want icon sprites, whatever we were one file is the output That's the one thing we're hoping to be our whole icon system And we'll make the computer do it a tool for that one of them is icomoon That's pretty cool one. It's like I want this one this one this one this one this one click click click They can be your own ones that you upload they can be from other sets or whatever you click download you get this little folder Stuff to check out we're going to open that folder probably And it gives you all of them individually, which is nice, but it also gives you This file what is it svg symbol symbol symbol symbol so it's a build tool It's a web-based one, but it gives you what we're talking about. That's the output that we're looking for That's like a production icon file ready to use and then whatever you want to use it You go svg use excellent href icon headphones and you can draw the icon right there. It's great There's grunt ones. There's gulp ones. Whatever here's here's a grunt one We'll look at a little workflow of a grunt setup with this thing going on So we have a folder full of svg files each one draws its own little unique icon in this case It's the cart we have grunt watch set up to watch the folder full of those svg files when one of them changes is Updated deleted removed added whatever Grunt will trigger some things it's going to trigger one that optimizes the svg files And then it's going to run one called svg store which is the one that smashes them all together in that file So here I'm I'm in illustrator. I'm changing the color of the card. I'm going to remove its wheels So I'm just making a change and I'm going to hit save and then when grunt watch runs It's going to run all its tasks and immediately refresh the browser and all of the icons have been changed So it's like once you have this workflow set up. It's pretty great I'm just working with the individual icons and as soon as I hit save they're optimized They're smashed into a new devs file the browser is refreshed. It's a pretty nice pretty nice workflow It's I think a lot easier than working with icon fonts and I got used to do this whole showdown with icon fonts I'm not even doing it anymore. I can funds are stupid. This is awesome end of story This is how you test for svg support inline svg support don't even worry about it But I like makes you know I'm sure people are like you do I get it but if you don't know it makes a div It injects some svg in there and checks of its namespace is correct That's a true false situation will turn either true or false true if the browser supports svg and false if it doesn't which allows us to write some logic like this if the browser supports svg cool Do stuff in this case. We're going to end up age xing for that file. We just made Otherwise we're going to need to do something else for fallbacks if you care if you're in a position where you need to care If you don't care forget it just just Age x for the file without this logic That's a modern Age x request if you don't need to care about older browsers and stuff which you do or you don't but it'll just grab that file And it just drops it in the document So you have this html document you want to use the icons all over it just trigger an age x request do it async do However, you want to do it you know for performance and for your sites loading capabilities age x for the file And then this just drops it in the document so it's ready to go So it's ready to reference the things the reason we have to do this is basically because ie Like you should be able to use a use element and then put the full file path to the SVG defs file right in there and it will just go grab the icon that it needs and put it there It doesn't work in edge. Nothing. It doesn't work in anywhere in ie land. So we do this instead It's not that big of a deal the browser would have to make the request for the file anyway So it's like well now do it with age x whatever, you know, it's it's kind of a horse at peace Cool so what for the fallback situation there is a thing called grunt to con it does a great job at SVG fallback kind of stuff so you can use it instead I'm gonna blast through it because it's like you know Just look at the grunt to con docs is the point really but it's like you put a class name on the svg And then in the false situation like it's not supported then call the grunt to con thing But grunt to con deals with the success situation too So just remove that and the grunt to con will do the fallbacks It ends up working in all the browsers you expected to and working in things where in Inline SVG doesn't work like old Android and old IE's and stuff These are PNGs that grunt to con has created for you. So it's a great fallback tool So yeah, and what's kind of cool about doing it this way is that one day when you stop caring about Fallbacks for all the browsers you just pull that out just pull grunt to con out and it's then you're You're kind of modernized. You're not reliant on a polyfill forever We heard the noun project. It's pretty sweet. There's just you just type anything and there's a great icon for it It works great for this icon flow kind of thing. They have a Mac app. That's fairly new. That's pretty nice It's just this tiny little thing you type stuff in it. I'm have illustrator I just dragged and dropped and boom. I have an eyeball, you know It's like you need you need icons and eat them quick or any kind of SVG vector version of things Just search you get them you drag and drop them. It's like the future Anyway, that's sketch works great with sketch. Anyway, noun project is sweet crop it save it out dot SVG It's part of your system. Love it. What if you do all this? What do you get out of that? How do you what is the what is what is in it for you? All your icons are vector. That's pretty great You don't have to worry about the you have the different screen sizes and all that stuff They're gonna look great forever And as opposed to some of the other systems there you can be multicolor It could be a cabin with green trim and white smoke or whatever. No problem You can draw anything you can draw an SVG can be used in this system You can make the smoke animator the door open or whatever just because it's in the DOM any CSS animation you apply you can just do whatever you want that way. It's great You can script stuff you can have I want to when I click on the smoke it gets smokier I don't know do whatever you can in JavaScript It's better accessibility because you know you tab to the icon and it announces what it is or it doesn't to do That or you kind of have controller with icon fonts You really have to jump through hoops to get that to work Semantically it makes more sense. You're using SVG which is semantically an image Which is what it is on the page You don't have to fake that garbage and there's so many build tools and cool processes for it You just get a whole lot. I feel like that adds up to one big fat rainbow of awesome these are some Once they're in the DOM let's say these were all our icons third They have some class names applied to them because why not now that they're in the DOM I can just be like I'm just going to change the fill color and they all kind of change You know I'm just using the web inspector to because I'm styling them through CSS I can change the fills and all that stuff Leah was doing with strokes and making that all happen through CSS that's in line SVG with CSS the same thing It's going on here SVG has some pretty cool animation tools We'll just kind of go through real quick except for smile because that's kind of gone So let's just stop talking about it. I guess rip RIP and Yeah, CSS is one of them that we already kind of covered. This is a little robot guy. He's floating around real cute I mess with them for a while in this video. I'm like your arm, buddy. Go on Don't have it These are the art design patterns page on code pen. These aren't animations But just transitions when your mouse goes over it There's a hover state that I just move things around with I just translate it up or change scale or change fill You know and apply transitions to them. That's all just inline SVG that draws that stuff really Simple things you can do JavaScript, of course can animate stuff I'm not going to dwell on this but it's like JavaScript can do anything, right? So here's just a really simple loop where we move the the position of a circle by by 10 every 20 milliseconds That's like not how you would do it these days There'd be like request animation frame and stuff but more likely you'd use a library like snap SVG is kind of like JQuery for SVG. It's really nice syntax green sock is really powerful for animating anything including SVG does a great job with I think we're gonna hear from Sarah a little later on that four o'clock. I think SVG DSD at D3 does a lot of data stuff. You've probably seen it Here's just some here's some syntax of how snap SVG looks and how kind of like it does the chaining and stuff That you may be familiar with from the jQuery days. I think we're calling them now back then Here's just the syntax of work I'm just moving the clouds across the screen. It's kind of perform it and nice MailChimp uses it to high five you and you send a Campaign, which is pretty fun Chris Ganon does a really great stuff on with green sock on code pen little fun animations like that that kind of draw Themselves and spin around here's a nice one from from him Yeah swinging stuff all kinds of stuff. It's all time lined out with green sock, which is pretty good They have a nice API for that. I'm not gonna take the stuff away But y'all should check out Sarah Drasner's portfolio on code pen or I don't know what we call them profiles I guess she has a zillion excellent SVG animations. We're gonna see some of these later I think this is a really particularly beautiful one. I think SVG has this concept of filters in it, which is pretty great Which we're not gonna I'm not I used to do this Visual explanation of it, but we're gonna we're gonna cruise cuz time is going look at the goo happening That's when blur and contrast fight each other So cool because and and blur is contrast only natural enemy You can draw stuff in SVG. Look at that. You just do that with where you just animate the like like the Dash offset or whatever. That's just that's the trick. That's one dash That's as long as the whole thing is so if you animate it the length of itself it draws itself pretty cool So charting is pretty good in SVG I just want to kind of get to the end because we got more stuff to learn It's good for maps. It's good. Look at look at clipping and masking. Yeah, nice It's just because that the bones is above it, but it's only showing this circle of it It's following the mouse, which is pretty great that works with the clip path element Which is it's which is different than masking clipping is vector masks are raster or at least they can be I want to get to this fun ending quote here Scott Gell said that you know there's database people and we kind of refer to them as architects JavaScript people are always engineers, of course, but SVG people are archaeologists because it's freaking old It's kind of like discover. We kind of discovered like cool one cackle. That's cool And then yeah, I have this list about every SVG thing that's kind of ever been done So anyway, I'll make the slides available. Thanks for listening very much to my talk