 All right, I'm gonna go, whoa, that's really bad. I'm gonna step away from the microphone. I'm gonna go ahead and get started. My name is John Ferris. I'm the lead front-end developer at Atten Design Group based out of Denver, Colorado. We're a design development and strategy company and we do a lot of droop work. And this is the flavors of SVG. When I got the, kind of the idea for this talk is as I started diving into using SVG, I really found that there's a lot of nuances in it and you use it differently depending on what you're trying to achieve, what kind of browsers you need to support. And then the things you can actually do with SVG depend on how you actually use it. So just real quick, SVG is Stance for Scalable Vector Graphics. It's essentially an alternative image format. So it's vector graphics meaning that you're basically giving the computer instructions on what to draw on the screen, like draw a circle here, make it this color, add a rectangle and stuff like that as opposed to like roster graphics where you're essentially, you have an image that's a grid of pixels and you're just telling the computer which pixel in that grid should be which color and whatnot. But SVG is much more than just a graphic format. It's actually markup. So it's XML based markup language for defining graphics. So in HTML, you have stuff like your H1s, your paragraphs, image tags, stuff like that. In SVG, you have a similar structure. You have tags for shapes and paths and filters and animation. So in this example, it's markup graphic at the top. All the code for that is below. So we just have a circle. We tell what size it is, color orange. We have rectangle and there's attributes on that for the size and color. And then we have the actual text and it's all placed in there. And it's pretty concise for a graphic that can be scaled up big and small and it always kind of maintains the fidelity. So when you're thinking about SVG, just keep in your mind that it's actually markup. So essentially, whatever you can do to HTML with JavaScript and CSS, you can pretty much do that same stuff to the actual graphic. So it provides a ton of flexibility and opportunities. So some of the stuff that you can do with SVG, you can scale it up and down and it's never gonna be like anti-Alist unless you go too small with it. But it's almost always gonna maintain those like crisp edges and look really good. It can be animated. There's different ways of animating SVG. You're gonna use CSS animations. You can use JavaScript animations and it actually has its own built-in animation syntax. You can filter it. So filters would be like, so like Photoshop filters like blur and blend modes, CP atone, that kind of stuff. You can style it with CSS and you can script it with JavaScript. So here's an example of the, I'm actually not sure if it's Smill or Smile animation. It stands for something I don't really know and it's not that important. It's like synchronized multimedia in interpreted language, I don't know. I don't know what the I is. But here we're just taking, so we have this Kool-Aid man SVG and we have a group of shapes in there that has an ID of left arm in there and we're using the animate transform tag to actually just wave his arm up and down. So we say we wanna animate it from angle of zero to, let's just highlight this, maybe it's easier to see. From zero to 20 degrees using this particular point on the grid for the rotation points. And we're rotating it back and we're gonna do that for two seconds and we're gonna repeat it indefinitely. So Kool-Aid man will always be waving his picture at you and it never spills. So you can do filters too. So this is an example of a blur filter. So we just have a tag that's filter. We give it an ID so we can actually reference it and apply it to different shapes. And inside of that filter, it has a Gaussian blur filter applied to it. And then below that, we're just applying that to the Kool-Aid man by referencing that ID. And you can apply that filter to just different parts of your image. Your graphic. So here's an example of style in it. All the shapes within the Kool-Aid man SVG that actually have that red Kool-Aid color have a class applied to the tag of Kool-Aid. So we just use fill purple and it applies that to all those shapes. So the most things you can do with applying CSS to HTML, you can do, I won't say most. There's a lot of overlap in the actual style attributes that you can apply to SVG shapes as you can with HTML. And as we see here, the fill property, there's no fill property for HTML. So that's one that's specific to SVG. So there is a little bit of difference there, but the syntax is all the same. And this is one of the really cool things with SVG is you can actually, you can embed your styles within your SVG and you can include media queries within that graphic. So in this example, we've added the media query or max width of 360 pixels. So if this image is smaller or as big as 360 pixels or smaller, we'll change the Kool-Aid to orange, we'll hide the oh yeah and we'll show the oh no. And the cool thing about this is if you actually, if you're embedding these media queries in your SVG file and you're embedding your SVG with like say an image tag, it'll actually, it takes those media queries based on how big your image is, not how big your viewport is. So in this example, this is the exact same file of the Kool-Aid man, same SVG, it's just shown at different sizes. So the media queries apply accordingly. So let's talk about those embed methods because that works a little bit differently depending on how you actually embed your SVG. So the most basic version is just use an image tag, you know, instead of like sourcing a PNG file or a JPEG or a GIF, you could just use SVG. It's super simple. Support for that as far as SVG features, you can animate it using the smell, smile, syntax. You can't animate it with CSS or JavaScript. Excuse me. And when I say you can't animate it with CSS and JavaScript, I'm talking about the innards of your SVG. You can animate it just like you could animate a JPEG, you know, you can rotate the whole thing or translate it and move it around. But if you're embedding SVG this way, you can't actually, like we couldn't use JavaScript or CSS to wave the Kool-Aid man's arms. You have to use the smell syntax for that. You can't script it with JS, same thing we're talking about the innards. You can style it with CSS if you embed those styles within your file. You can't use external CSS. And then the other benefit is if you're using SVG in this way, the actual SVG file gets cached across page loads. So fallbacks for that, a very simple fallback to implement when you're doing image SVGs is just to add some inline JavaScript, which is a little dirty, but it's also super simple. So I think it's all right if you're doing, if you're just applying like, you know, maybe have a single SVG on your site and you wanna provide a fallback for that. It's very simple, you just add on-air attributes and if this airs out, like the browser can't load the SVG, then we'll just replace the source attribute with a PNG. And then we also add this on-air equals null to prevent like an infinite loop if for whatever reason the PNG doesn't load. Like we messed up the path or whatever. So it checks once, if that airs out, then it just says no, you don't get any image, you just get the alt tag. So that's super simple. There's a tool called SVGZ. This essentially does that same thing, but it kinda does it in bulk and it'll just go through, you add the script to your page, it'll read all your image tags that are linked to an SVG, replace all those with PNG. So it's kinda up to you to actually make sure you have PNG fallbacks using the same exact name as your SVGs. It's really a simple solution if you're just using those image tags. Then there's the picture fill fallback. This uses a picture element. I'm not completely sold on this, I think it has a very narrow use case, but the idea is that you use the picture element and different sources for your SVG within that using your base image as a fallback PNG. Kind of the downside of this is it's only gonna work for you if you're actually using the picture fill polyfill. And the reason for that is that there's way better browser support for SVGs than there is the picture element. Picture element's still really new. I guess the advantage to using this method is that you can apply some art direction. So depending on your different break points, you can provide a completely different SVG as opposed to one that's just sized or scaled differently. The other way you can use it is background images. So very similar just using the background image property in CSS and pointing to an SVG. Support is also pretty much the same as an image tag. As an image tag, fallbacks for this, just a general fallback using Modernizer. Modernizer, that can be your fallback for anything really. Here, we're just using Modernizer. If you don't know what Modernizer is, it's a library that does feature detection on the browser. So you just add a feature check for SVG support. If the browser doesn't support it, it'll add no SVG to the body tag on your page and then you can apply alternative styles for that. So here we're just saying if this page doesn't support SVG, I'm sorry, no SVG, then use the PNG as your fallback image. And then there's the object tag. So the object tag's very similar to an image tag. We're just using the data attribute to embed this SVG. And the main advantage of using the object tag over say an image tag or background image is you can actually access the innards of that with JavaScript. You still can't style that stuff with CSS, but you can access the elements with JavaScript, which is nice. And it has a nice clean fallback in that if you just place an image tag within your object tag, that's PNG. If the browser doesn't support that SVG that it's trying to load in, it'll just pick up the PNG. So that's super easy. And then there's inline SVG. So you can take your SVG code and just plop it right inside your HTML. And this has the best support for all the features. So yeah, you can animate it pretty much any way you want. You can script it. You can style it with external styles. The one downside with this is that your image does not get cached. I mean it's loaded, you get to save an HTTP request because all your image data is embedded in the page, but it's not gonna get cached externally. And that actually may be fine if you're using an SVG for say like some kind of opening an animation or it's your navigation on the homepage or it's a very specific use case. If you're only using it on that one page by all means, just load it in there. So to kind of compare all those, you see that using the SVG as inline has the best support, but there is a lot of simplicities to using the image and background image. So if you don't need all these extra features and you just need the scalability of SVG, then by all means use it as an image or background image. So there's nothing here that's like completely perfect and covers all the bases. There is a library called SVG Injector. And what this does, it'll take, you put an image tag on your page, set the source to your SVG and give it some kind of identifiable class that you can target. You load the SVG. I'm not sure if you can actually see that. It's kind of dark. You load the script and then you kind of tell it which elements you want to inject the SVG. And what this will do is go through it'll read all your source attributes, find out where that file is and take that file and just inject that SVG markup right into the page. So then you can do all your JavaScript moving things around and that asset will be cached. So this is really great if you have something, maybe it's a navigation that's on every page and you want to cache those bits. This is a great way to go. The one downside is it actually requires JavaScript. So let's look at some of the uses for SVG. This is our Atom logo and some pseudo code for what's actually defining this. We have our SVG opening tag and we have our styles which you just have to pretend that those are there. And then we have different groups for like the mark, the actual sun. Then we have a horizontal version which you don't see here and then a stacked version and in that stacked version it's got its own mark. It has the Atom name and then design group. And then what's in that actual style tag we have our media query. So by default we're gonna hide the actual words and just show the mark like it's a, as if it were a square. And we have our horizontal versions and our stacked versions that are using aspect ratio media queries. So what this translates into, so we have our logo, just add some crop marks so you get an idea of where the bounding box is on this. And depending on how we embed this in the page and how it fills that box, it'll actually adjust. So if it doesn't have enough height, we'll hide the design group and just stick with that and then this would be the default where it's more of a square aspect ratio. We're just showing the mark and then we have the horizontal view. So we can use one file wherever we need to use this on any kind of site, which is pretty handy. And all those media queries are just baked into the file so we don't have to worry about adding extra CSS or anything other than the CSS that would be required to actually kind of size the box that it's living in. SVGs are great for icons. This is probably how, I mean, it definitely is how we use SVGs mostly, use it on a daily basis. So this is just an example of an icon set. And these are, it's kind of a sketchy looking icon set so your SVGs don't have to be like these crisp, perfect things. And the advantage here over like PNG is our tiny GitHub icon can actually scale up. You can do this, you can do it with an icon font but you can't do that with like PNG sprites. And the advantage that an SVG icon set has over an icon font is that you can do multicolored SVGs. So if you look at this example, the tool on the bottom, the Google Drive and Flickr, they actually have multiple colors in it. You can't do that with an icon font unless you do some hacky like lane icons on top of icons, which is really weird. So that's a big advantage. How we actually implement icons on our sites is using GruntzCon. And GruntzCon is a tool that will take, basically takes a folder of SVGs. You run it through GruntzCon's command line tool based on Grunt, that wasn't obvious. Takes the whole folder, runs it through and creates these different files. So it'll create a CSS file that has all your SVG files, URI encoded into the file, attached to a class. So it's essentially creating a sprites. You have all these classes that has all your files in it. You can apply those throughout the page. It'll check for support for SVG support. If your browser doesn't support SVG, it'll load the PNG version of the file, which is the same thing. It's just data encoded PNG files into one style sheet. And then if you have a browser that doesn't support the encoding or SVG, it'll just load like a standard set of classes that reference external PNGs. And it creates these PNGs for you on the fly, which is super nice. It's a good workflow. You get pretty much all the advantages that you get with a sprite without dealing with the mass of like trying to move things around like your background positioning to find the right icon and whatnot. We use this all the time. I'm a big Gruntacon fanboy. If command line isn't your thing, they have Grumpicon, which, and when I say they, this was all built by the filament group. They have Grumpicon, which is an actual browser tool where you can take your folder full of SVGs and just drag them into the browser and it'll spit out all these files for you. You know, it's good if you don't want to, if you're not comfortable with the command line tool, it's an okay way to go, especially if you're just doing this kind of once. But if you're building out a big site over time and you're constantly making changes to your icons, you're adding them, changing them, removing some, then you probably, it's worth the time to actually get Grunt set up and it's really not that hard. Another alternative for icons is using the SVG Spriting method. I don't actually use this and mainly because we do work in Drupal and Drupal is not always that easy to add the markup that you need everywhere. And this approach involves adding an actual SVG markup to your page. So kind of the gist of how this works is you create a single file that has all your SVGs in it and you just group them or you give each one of those SVGs an ID. And then where you actually want to use an icon within the page, you drop in an SVG element and SVG has a use tag which references just another fragment of your SVG. And you can actually reference an external file. So you have your icons.svg file and then the HTML is referencing just a fragment, just like one piece of that file and pulling it into the page. So it's really nice. I actually don't think, even though this is embedded SVG because you're using the use tag, you can't actually style the internal bits of the SVG that you're pulling in. If you apply style to it, like a fill color, it's gonna apply it to your whole icon. And one of the downsides of that is Internet Explorer supports SVG from version nine up, but it doesn't export or support these external fragments. So there is a polyfill for this called SVG for everybody that you can drop in and take advantage of that. Okay, so SVG is good for animations. Just an example, this is from CodePen. This is from Sarah Drasner, I believe. This is just showing how you can actually use SVG to provide feedback on a form input. So here we've, in theory, we've entered something into the form. Yeah, we still get a success. But yeah, it's just showing you the actual feedback of, you know, I did something on the site and waiting for it to load. It's a little bit more interesting than just seeing the little tiny whatever rotating circle at the top of the browser. So SVG is really good for data visualization as well. I'm actually gonna pop out this and just show you the actual site. So Google just released this pretty interesting infographic called the Evolution Web. It's built all in SVG and it kind of goes through all the different open technologies that the web is made up of and kind of maps out the different browsers over time and how they supported them. So if we go and just kind of highlight this SVG curve, we see that it became a standard in like 2001. Didn't actually gain support until Opera 9 was the first to support it. Whoops, that's Canvas. And just goes through and shows it's kind of a, it's a very interesting infographic. It could be a little weird to use, but it's super cool just to kind of mess around and see how things were adopted over time. But this is all built in SVG. Another use is just non-rectangular interfaces. We build the web, everything is boxes. This is an example of site that we built for UC Berkeley. We had done some branding work for them. We built out or we designed a logo for them. They kind of had this interesting isometric shapes going on with things overlapping. And we wanted to bring that into the actual site. And to be honest, when I first saw this when our designer came up with the idea and she's like, oh, do you think this will work? And I opened it up and I was like, no. Like, no, there's no, this is, this is, yeah. Yeah, it's air and hallway design. So yeah, when I first saw it, I'm like, no. The web is rectangles, and those are diamonds. I'm like, oh, just, if you design in the browser, we want to get this kind of creativity. No, but after, so after I thought about it, but after I thought about it and she called me a baby and whatnot, she called me out, like, I was like, this is actually a perfect opportunity for using SVG. So yeah, it actually, it worked out really well. This, it's a Drupal site and essentially all all we had to do other than like creating the graphic was drop that SVG code into a Drupal TPL file and create this interface. And we can actually, because it's markup, we can use like the T function to translate all our strings. So all these, all the actual text within this page is translatable and worked out really well. So some other examples of that. Sarah Swaydan, who's done just amazing work in the SVG community has built this tool called Circulus SVG. And it's a site that you can go to and build these circular interfaces. And at first it can kind of seem gimmicky, but they've actually done user testing and an interface like this, especially on a touch device or a mobile phone. It's actually quicker for a user to target the individual links because they're targeting it based on like direction of moving their cursor or thumb as opposed to if you're doing like a dropdown or something that's more of a, it's like a distance. Like they have to be pretty precise about how far they're moving their cursor. Whereas this you hit the button and you kind of just pick the direction. So that's a pretty interesting tool. Check it out. One thing to note is that this is actually using the G-SOP JavaScript library to animate it to do that stuff. So this is another interface that was built with Snap SVG. It kind of mimics if you're an Android user, which I am, the alarm clock like feature with the latest version of Lollipop is pretty awesome as far as like the actual interface for choosing a time. So you can switch back between picking like the hour and the minute and essentially you're just dragging your thumb around to actually pick the time. It works really well. So this is actually, we can implement this in the browser using SVG and just build out these shapes. So we just take an input form, whether it's a number or a text form and we just replace those inputs with JavaScript if SVG is supported and make it a little bit easier to use. So those are the different use cases. There's tons of tools out there actually using SVG. Specific libraries, just mentioned Snap. Snap is supported by Adobe and it's an SVG specific library and then it's built for creating SVGs. It has a lot of built in methods to real high level API for just simply creating circles or animating things, moving things around the page. The predecessor to that is Raphael and this does, it's very similar functionality the big difference here is Snap is built for modern browsers and Raphael has support actually all the way back to I believe IE6 because it'll take your SVG code and translate it into VML code which is supported by IE9 and below. But everything else, if there's support for SVG it'll actually load it. You might think that that would solve all your SVG problems in terms of browsers but VML isn't supported by older Android browsers. So creating and editing SVGs, some of the vector art programs. Adobe Illustrator been using that for years that's my go-to tool for editing SVGs. Sketch is a Mac app that handles vectors really well and then the open source free alternative is Inkscape. But really when you get down to it all you really need is a text editor. So these are just examples of that. Usually my workflow if I have an image in Illustrator is I'll take that and import it or open that SVG up in a text editor and go through and clean out some of the craft and edit it there. And along those lines I do wanna point out a cool feature. So this is Illustrator, I've got some icons. If you take an icon or this whole thing and you can't see but I'm hitting Command C and opening up my text editor. I'm hitting the wrong shortcut. And you just paste that in there and it'll actually paste the SVG code from your Illustrator file directly into your text editor so you can start editing it there. And that's pretty cool. So yeah once in there you just edit it like it's text because that's what it is. And then tools for optimizing. So as we even saw with that example of pasting code in from Illustrator there's still extra Illustrator cruft that you don't need. And you don't want browsers to have to download that. So there's a few tools for actually optimizing and compressing your SVGs. Peter Cullenridge has an SVG editor online where you can either upload your file or just drag your SVG into it or copy and paste it. And it has options for what you wanna optimize. And it'll get that file size down for you. The nice thing about this is you can actually, it gives you some fine control over like what you're optimizing. Because if you're using an SV, or some of these optimization tools could really jack up your graphic. So doing something completely automated can be scary at times. So something that's completely automated. SVGO is a JavaScript based command line tool that will actually take your graphics and compress them down as a lot of the same options is the editor we just looked at. But you kinda have to, if you're automating this you have to pick those, like what you're gonna compress down which you're gonna remove from the file. So you have to be careful about what it's outputting. This would be a great use case for like visual regression testing. And there recently became, or launched SVGOMG which is the browser version of SVGO. And you see we dropped the Kool-Aid Man in here and I think the original file size for this was about 20K. I think if I was diligent enough and actually didn't just put points all over the Kool-Aid Man and drop pretty sloppily, I think I probably could have manually got it down to maybe like, I don't know, 10K. But as you can see, this gets it down to 6.27 from 20 when it's GZipped. And SVG, since it's marked up, it actually GZipped really well. So some animation libraries mentioned GZIP earlier. This is the JavaScript library. It's not SVG specific, but it supports SVG natively. So this is just a JavaScript animation tool. It's very powerful. It's not open source, which is one of the downfalls with it. They have some premium plugins that require membership to use, but there is a version that you can use freely. It's super powerful if you're like a hardcore animator and want to do like timeline adjustments and sequencing and tweening and all that fun stuff. An alternative is Velocity.js. Again, this is just a JavaScript animation library. Kind of replaces the jQuery animate methods. And it's supposed to be a more performant version of that, but it supports SVG out of the box too. So that's pretty cool. Just an example of what you can do with Velocity. Here's another code pin. I'm not sure who built this. I'm not taking credit for it. But it's just showing you all the different things you can actually do with animating SVGs. Data visualization tools, D3. D3 is not limited to SVG, works really well. You can use it for Canvas. You can use it for pretty much anything. D3 is super powerful. If you're doing really complex infographics and data visualization, it's probably the way you'll go. But it's also like there's a lot of work you have to do to get it to do stuff like a simple bar chart or something like that. There are some plugins for it, but it's really powerful. It's also relatively low level in terms of the actual amount of work you have to do to get stuff out of it. Highcharts is another one that's definitely more on the easy use side. It has a lot of built-in charts for line graphs, bar charts, pie charts, where it's pretty simple. You pass it the data and you get a chart back. All right, so just some general resources on SVG. I don't know, as I started researching this stuff, it was like drinking from the fire hose. There's just like so much stuff about SVG that I had no idea was there. And the actual documentation and things to find, there's tons of it. It's just all over the place. So some good resources. As I said earlier, Sarah Swade on her website. She has a great blog. She's really good at taking these concepts, these real technical concepts and just not dumbing them down, but distilling them down to something that's really easy to understand. If you go to other sites like CSS Tricks or Codrops or even the Adobe blog, and there's an article about SVG, like there's a good chance that she's actually the one that wrote it. And then there's CSS Tricks. There's tons of SVG information on there, but there's a single page that's the mega-list SVG information that has links to just all kinds of stuff. There's the SVG Immersions Podcast, which just started recently. It's actually pretty good. It has a pretty hilarious opening theme song. It sounds like Color Me Bad, singing about SVG, like slow grind music. It's pretty, it's good, it's classic. So places for inspiration. Codrops is really good for just like slick, small interactions and animations. CodePen, if you just search SVG on there, you'll find a lot of, it's more experimentation. People just messing around, trying to figure out what they can do with SVG. And then Mike Bostock, he's the guy that actually developed D3, I believe. He has this huge list of data visualization examples. So they're not, you know, there's a mix in there. Definitely not all SVG, but if you're looking to do data visualization and just want to see what's out there, that's a great place to look. Icons, or if you're just looking for, I don't want to say clip art, but like pre-made SVGs that you can just grab and either use in your projects or if you just want to mess around and see what you can do with SVG. The Noun Project is a great place for that. It's all creative commons, icons. They do have a membership if you want to use any of the icons without attribution, but any of the icons on there are free as long as you credit who created them. Icon Moon is a tool, it was originally built for icon fonts, but it'll actually allow you to build like a custom set of SVG icons and use download that and you can pick your icons from the list and it just bundles them up and you can use them. Icon Mellon is a much smaller, just kind of a curated list of some free SVG icons, which most linked to like full paid versions of larger icon sets. But that's pretty much all I have to say about SVG. I want to say thank you for sticking around so late. It's dinner time for a lot of people. But, do you have time for questions? If anyone has questions? If you mind stepping back to the microphone. Yeah, so it seems like in terms of like, is there, I know you can animate the end of your full sale, but is there any sort of fallback or anything? For browsers that don't support SVG at all? Or, not, yeah, that's the answer. Yeah, the answer was flash. SVGs through GPL's image upload field. A partner that we're working with on a project who was very savvy in design, their designer, has created all these lovely SVG images, but they want to be able to upload them to teaser you modes. I actually went in to the image settings and I added SVG as an extension that it would accept, but then whenever you actually try to upload the SVG, it rejects it, so I was just wondering if you have any modules or if, I don't know, I just can't really do this. I actually have no idea. We haven't come across that yet. Does anybody else? All right, do you mind stepping up to the microphone and doing my work for me? Possibly the picture module, and then all the same problems you expressed. I see. So possibly the picture module, but I imagine you'd still have to upload. Like the problem is actually uploading the SVG. So I'm not sure that would fix the problem. Is there any other guesses? Transmit it. Oh really? Hmm. So maybe it's some other setting or a possible server setting? No idea, sorry. We have a problem where they wouldn't display, but that was just a configuration on the server side. We would just modify the... Oh, I think what you said, we've run into this before, is actually the SVG not displaying when you display it as an image tag because the server isn't serving it as the correct meme type. See actually, that's a fairly simple change in your htaccess file. I don't know if that applies to uploading though. All right, geeky. Oh, okay. Oh, okay. Yeah, I wonder if that actually solves the problem of the user being able to upload the file though. We're gonna answer this question for you. This guy's got the internet in his hands. It's called, it's open source. Take a look, they did it. O-S-C-I. I'm curious to know how you can accessibility and all that stuff for things like inline SVG. I was looking online, it seems like it's not quite worked out yet, what do you think? So as far as inline SVG, the title tag is kind of a good alternative to adding an alt attribute. I think there's actually fairly good support for ARIA roles in ARIA attributes on the actual tags themselves. So I think that really depends on what you're doing with the SVG, like is it a simple image like a logo or is it something more interactive? If it's the simple logo, definitely the title tag. If it's something more interactive basing that on your interactions on ARIA roles, it's probably the way to go. Thanks. Definitely illustrator. The viewport, actually when we export our icons for GruntCon, illustrator will include the viewport attributes. Actually that depends on if you have, when you saved SVG from illustrator, there's a little check box that says responsive. We leave that unchecked when we export and that will include the width and height on your SVG because when we process that through GruntCon, we build our icon in illustrator to the size that we want the PNG fallback to be and including that information will actually build out. GruntCon will create your PNGs to that same size. If you uncheck that, it creates it as whatever size you have set in your GruntCon settings. But actually if you're, to get the, so if you're using SVGs, again this comes down to like how you're using it. If you are just embedding the image, it's easier to leave the view box off and leave the width settings off and then it'll just resize easier. You don't have to do the, like the max width thing that you would do on an image because it just, that's the way SVGs work natively. Very simple geometry. Yeah, actually playing with the stuff is super helpful in learning. And you do bring up a good point. The W3C is obviously kind of the definitive guide to how SVG works. With pretty much everything else front and related, I always use MDN, the Mozilla Developer Network, but their SVG content on there, I think is pretty lacking. So yeah, W3C is a great place. Thanks. Yeah, SVG Pocket Guide, I should have included that on the list. That is quality stuff. All right, well thank you very much. Enjoy dinner.