 How's the volume in the back? Can you guys hear me? All right. We got on the video? All right. Well, hey, welcome to the last session here. I've learned a lot these last two days and my brain is a little tired. And I've got some good news. We're not going to get too deep into coding or anything. We're not going to go down Gutenberg paths. We're not going to get into React. We're going to talk about images. And I guess the one Gutenberg thing I'll throw out here is if you're using Gutenberg or if you aren't, using SVGs doesn't have any impact. So everything you're about to see will work on WordPress 4 and also will work on WordPress 5. My name is Colin Lord. I'm a front-end developer for a company called Modia. I'll have a link to the slide notes at the end of this. If you want to follow me on Twitter, that's my Twitter handle and my companies as well. And whenever I go to a talk, I always kind of have a love hate with the intro slide because sometimes I'm kind of curious about the speaker and want to know something about them. And other times I don't really care and I want to get to the content of what they're talking about. So good news on this talk. I'm going to share something about myself, but it's also related to SVGs. So whichever camp you're in, there's something worth listening to here. So the thing I want to share with you guys is my wife, my family, my coworkers, they all think that I'm notoriously hard to shop for. When it's time for my birthday, nobody ever knows what to get me because I'm, I guess, a pretty simple guy. I drive a 10-year-old car that I'm happy with. I have all the technology I need. Nobody really knows what to get me, so usually it ends up being a gift card, but everybody wants to give me something more than that. So last Christmas, everybody got me soda because that's one of my favorite things to drink. And it sounds sort of weird, but I was very happy with this because I didn't have to go and buy it now. Whenever we have, it's almost like this joke at work. Whenever we have something sort of bad news that a project manager has to tell me, they bring me a soda to try to calm my nerves about it. So I bring this up because we've only got an hour, and I could talk about SVGs for three or four hours, and we don't have that amount of time. So when you download my slides, some of them are going to have a Coke bottle in the corner. And what that means is I've got more to say than I have time in this hour. So this is more for later if you're downloading and looking at the slides after the fact. If you see a Coke bottle on those slides as you're scrolling by, I've put some extra stuff and essentially the speaker notes, but there are more notes for you guys if you want to go and research more about it. So to tie it all back together, the SVGs, I figured a Coke bottle was a good idea, kind of reflects on me, and the Coke bottle is actually an SVG. So images have been the same for, I don't know, 10, 15 years. Like I've been doing front end development for well over a decade, and I've been using JPEGs, I've been using GIFs, and I've been using PNGs. And SVGs are sort of the new kid on the block. They've been talked about for a while, but I think most people haven't really gotten into them. So that's kind of where the title of my talk came from, is we all know about on some level that there's vector formats and we can use them, but these have all served us well over the last 10 plus years. And whenever I hear about a new standard, I'm immediately skeptical, and I think about this XKCD cartoon, and if you can't read it in the back, it says, situation, there are 14 competing standards, and it's two people talking. 14, that's ridiculous. We need to develop one universal standard that covers everyone's use cases. Yeah, everyone gets together, there are 15 competing standards. What I'm talking about and advocating for using SVGs is not like this. SVGs will complement our other existing image types. I'm not saying that we're going to stop using JPEGs or stop using PNGs and definitely not stop using GIFs. So we have three image types that we already used today. I'm saying there's room for a fourth. And in case you haven't ever played with SVGs too much, I want to spend a couple minutes just talking about why they're great, like why are we all here? I mean, the first reason that should sort of get everyone's attention right off the bat is it's smaller files. If you use them properly, an SVG is going to be a smaller file than a JPEG or a PNG or a GIF. And this is my company's logo, and I don't want to be all plug-ola up here, but it's really the perfect logo for talking about SVGs. So when I was looking for something to demo with, I looked at my business card and was like, oh, here we go. So on the left side, you've got my company's logo. It's a circle and it's two mountains. As an SVG, that is half a kilobyte. If I exported that same file from Photoshop as a JPEG, it's 12K. Now look, that's not a huge difference in savings. We're talking 11 and a half kilobytes, but that's a pretty basic image size, and that's a rather dramatic savings. So even if that's the only thing that you take away from SVGs, that's a pretty big savings if we're using that logo in a whole bunch of different places. One of the other reasons that they're great is they're HDPI ready. That's sort of, if you're using a Retina screen or a 3X kind of Samsung Galaxy screen, anything high density, SVGs are awesome because you only have to export that one file. You don't have to go into Photoshop and export the JPEG and then save it as 2X and then 3X. And if there's a 4X screen, I don't think there is yet, but there probably will be. You're future-proofing yourself, too. So let's go back to that same comparison with my company logo, SVG, JPEG. Now let's blow it up and make it bigger. The SVG is still 0.5K and it's also very crisp around the circle and the triangles. If we look at the JPEG, I mean, this is pretty basic image sizing. If we make that JPEG bigger, we're going to have essentially a lot of jank around the circle. It's not going to look very clear and that's on a regular resolution screen here. So putting aside the whole Retina screen thing, if we want to reuse this logo, I can use this for any various size I want and reference that same image. I can't do that with a JPEG. Now, of course, I can go back into Photoshop and I can export this company logo again and make it that size to make it clear, which I just did. But now we're up to 21K and the SVG is still sitting there pretty at 0.5K. So as the SVG gets bigger, it does not increase in file size. That is true with a JPEG or a ping or a GIF. So the bigger the image gets, you're not going to have much of an impact with an SVG, but you will with a JPEG or any other image file. The next reason, and I always kind of think about this whenever I hear anything cool with front-end development is what's the browser support like? It's great. This is from CanIuse.com. It's sort of my favorite site to go in reference for checking on browsers and what I can use, obviously enough. The only red is IE8. And if we look at global browser support, we're talking 97%. That's about as high as anything I've ever seen on CanIuse besides stuff that's 10 years old. So if we look at, let's see if this clicker will work. Sweet. So the only little red sliver is IE8 and below. 11 SVGs work great, same with 10, same with 9. So unless you are worried about very old Internet Explorer versions, everything I'm about to talk about will work across the board. Safari, IE, Edge, Firefox, it's got great browser support. I mean, we've heard a whole lot about CSS Grid in the last year or two, but browser support is nowhere near as good as this and people are starting to use CSS Grid. So if you're comfortable with Flexbox or Grid or these newer browser trends, SVGs have a higher browser support than any of them. And a couple more that I just want to briefly touch on is SVGs are easy to animate. They're also more efficient to animate. So if you have a big JPEG and you're spinning it or using CSS Transform, something like that, you're more likely to get a better frame rate with an SVG. It's easier for the browser to animate a vector than it is a raster object, which is a JPEG or a GIF or a PING. You can also manipulate SVGs with CSS and JavaScript. We're going to get into the CSS part of this pretty extensively in the coming slides, but JavaScript is something that's very fun and I've only started playing with that in the last couple of months. I actually saw an example, I guess it was about two weeks ago, of a guy who made a, you know the Google Calendar logo, how the date changes depending on what day of the month it is? It's one SVG and it's got JavaScript inside of it and it checks what the date is. But one file, and no matter what the month is or what the day is, that SVG actually updates the date automatically using JavaScript. So if I'm building some sort of calendar, I don't have to export 365 different variants of a calendar icon. I can make one, put some JavaScript in it to identify the date in the month and let the SVG do the work. So one SVG versus 365 Pings, that's pretty awesome. And then they're also perfect for responsive sites. Kind of like these properties all together kind of add up to that. Different image sizes, you don't have to worry about that with SVGs, retina screens. Basically the image sizing thing is great because on a mobile phone, you're obviously looking at a different image size than on a big fat desktop. So this is a book that I would recommend checking out if anybody wants to get into the SVG world. It's by Chris Coyer. It came out about two years ago and it's called Practical SVG. That's why they're an awesome image format. And he goes into a lot of detail more time than we have here of how to create SVGs, how to export them from Illustrator. Basically advocating for why we need a fourth image type. And there's a whole lot of great stuff in there. And until I read this book, I was kind of on the fence about SVGs. It just seemed like this unfamiliar new image format that I knew had some perks, but I didn't have enough time to get into it. And I was kind of feeling like this guy, people who exercise longer but those extra years are spent at the gym. I could learn about SVGs, but I know my image types well right now and I'm sleeping until 8.30 and going into work and not going to the gym. Why do I want to do that? And then I read Chris's book and I came out really inspired. I was like, this is awesome. There's so much great stuff about SVGs that I didn't know before. I'm done with JPEGs, I'm done with Pings, at least for some aspects. I'm going to make my next project and it's like walking into the gym on New Year's Day where you don't know how to use anything. It's like, I don't know what those machines are, I don't know how to do anything. I'm 10 minutes of treadmill and I'm out and I'm back to my JPEGs. So that's kind of the stumbling block whenever I've talked to people about SVGs is like they know that they're great, they have benefits, but when you get into a larger scale site, especially with a CMS like WordPress, there's definitely trepidation because they're not quite, they don't have all the images and we'll kind of go through the differences here in the next few minutes. So what I wanted to talk through was how do we use SVGs correctly and efficiently? Because much like the gym equipment analogy, I can end up hurting myself if I use the leg press machine wrong. You can end up hurting your site performance if you use SVGs wrong. So there's definitely ways to use them correctly and there's ways to use them incorrectly. So the first thing that we want to hammer home, like I said this a couple of times, illustrator in Photoshop will export any file you want into an SVG. You might not want to do that. Like if I go outside and I take a picture of the bell tower, that is not something that I want to have as an SVG. It won't look as clear if I export it as an SVG because I'm turning it from a raster picture object into a bunch of vectors. It would probably be in the hundreds of megs of just text to make this picture of the bell tower into a vector. So I put some notes in the slides about trying to decide which should be an SVG versus a GIF versus a ping. But keep in mind that not every image should or can be an SVG. So now that we've got them, now that we've exported SVGs they're the right format that we want to have. How do we use them? The first way you can use an SVG is like any other image. Pull out your image source tag and just find where you stored your SVG. Put it in a browser. There's nothing unfamiliar about this that's different other than the dot SVG at the end. So if you can put an image into a page you can use SVGs. That's not the scary part of that but some people are sort of put off by the file name there at the end that they're not sure if I have to do something different. You don't. You can treat it exactly like any other image and the browser will display it just like that. So back to my company logo example. I just pulled this up in CodePen an image source tag and then we're applying some CSS to it. I've got a width of 300 pixels. I height of 300 pixels and I'm centering it. It's just like any other image. So if you've ever done this with a JPEG or a PING, anything else you can do it with an SVG. That's a vector so we're getting the benefits of file size. It's going to be super sharp on whatever screen we're looking at but I'm not doing anything else once I got it at Illustrator. My HTML, my CSS is exactly the same. Since we can use image tags and backgrounds, same kind of thing. Instead of an image source tag I'm using the background property pulling it in from an external source. It looks exactly the same. The only difference is if you look up in the left corner now I have div class SVG container and then I've got a background property. So even if you just have some vectors and you want to play with them it's pretty simple to put them into a web page and get some of those basic advantages of using SVGs. I haven't done really anything differently with the advantage of a smaller file size and that logo is going to look sharp on any screen that I could potentially use now or in the future. One thing that we want to caveat here and I want to stop for a second is that if I load it in from an external source the SVG is not loaded into the DOM and that's a very important thing to keep in mind with how you get your SVGs in. Now if I load it from an external source the browser knows that there's an image there. It does not know that there is a circle and two triangles inside of it. All the browser knows is I've got this image, I'm going to display it and I'm going to apply some properties. But wouldn't it be great if I could use some sort of CSS property to adjust the thickness of the circle or change the color of the triangle. With a standard image format I can't do that. I would have to go back out to Photoshop or Illustrator or something and export another logo and name it you know, logo dash red and then use some JavaScript or a hover state or something to change that out. If the SVG is loaded into the DOM the browser is aware of what's inside of it because an SVG at its core is just code so the browser can actually read it. So how do we get the browser to know what's inside of the image? The way that we do that is we put all that SVG code right into our HTML and this is sort of a weird thing to look at because it gets very verbose and it's not very readable either. So codepin example again we've got the same logo we've got the same CSS properties but up here we have a whole lot of gibberish and this came right out of Illustrator. So we've got numbers and decimal places and commas it's not readable very much at all but if I export an SVG out of Illustrator that's actually what the SVG is inside. SVGs are vectors which are represented essentially by a whole lot of math. So now we've got that same, it's the exact same image that we had used before but it's loaded in a different way and here's why it's awesome because I can add CSS properties to what came out of the vector. If you see up there I've got class mountain-lg, mountain-sm and then down here we've got a class of circle. So the logo obviously we've got a circle and then two triangles. Now because it's in the browser and I've assigned class names to that SVG I can manipulate those pieces of the SVG without doing anything else and if it's the 4th of July and I want to take my logo and add some red and some blue I can just edit a couple CSS properties and without having to go into the Illustrator world or Photoshop world at all I can just change it. This is also horribly against our brand guidelines so somebody back at my company is gonna be happy that I'm changing our logo like that. But this is a pretty simple example but I hope you can see the power of an SVG versus a JPEG or any other image format. I'm manipulating the image directly with CSS and I can use things like hover states or transforms or animation and I never have to load any other objects back into the browser. There's no second image to be pulled in. Everything's right there in the code and I can write class names to go with it and do whatever. I mean obviously you can do more than change the colors but we could have a hover state. It could be on a button. Anything you can do with CSS you can do in here with SVGs. How do we get our hands on that? If you have the Illustrator SVG you can open it in any text editor and just paste it under your IDE. Yeah, so it's pretty simple. If you've exported that Illustrator you already have the code that you want there's no extra step that you have to worry about. Yes sir. Essentially the browser will see it as HTML and then you can add class names onto it from there. Everyone so far in the internet who's using SVGs uses this inline method if you go by advanced Web webranking.com 97% of global usage of SVGs is this method the inline SVG method and it's obvious why if you're going to go down the SVG route you would go with the inline HTML method because you get so many more advantages than just using the image source tag or the background image tag. So why wouldn't we just use this every time? Like it's clearly a superior method. What's the problem and SVGs are kind of long. My company logo example was just two triangles in a circle. This is part of a SVG that I downloaded and all it is is the United States it's the state lines. That's a lot of gibberish and I don't want to have to look at that I don't want to have to maintain that and I mean it just keeps going and going and going this isn't even the whole, this only goes for about 10 seconds but it was something like at least 10,000 lines of code. Nobody wants to see that in their template. And what if I wanted to put this giant size SVG into my web page twice. I've got a map at the top and a map at the bottom. I don't want to paste that in twice. That's ridiculous. Nobody would ever want to do that. So now we're talking about inefficiencies too. And this is kind of like where I've seen a lot of people give up on SVGs beyond just the very basic implementation because you look at this and nobody wants to deal with this. It seems like a maintenance nightmare and if I'm using an external source I've got that image stored in one place if I want to change it down the road I can if I'm pasting all these images into my web page that's not very fun even in like the WordPress world where I'm putting it in a template you still don't want to deal with this. And luckily there is a solution for how to deal with all that. And it is called the SVG sprite and I just had to throw in the soda thing again because that's just kind of like what I like to drink but we're not talking about the sprite in terms of the soda bottle. We're talking about image sprites and they haven't been as famous lately but who's dealt with image sprites before? So some of you guys not a whole lot. They were a really popular probably ten years ago back when we were on 3G connections and slower internet and the advantage of it is this is an example from Amazon. It's a way of loading a whole bunch of images at one time with one HTTP request. So if we look in the left column like at the bottom there's the Amazon logo and then below that there's the hover state and then below that's if you're a prime member and then below that's if you're a prime member and a hover state and this way the browser has all those images loaded ahead of time so if I hover my mouse over it I'm not making another HTTP request. It's kind of gotten a little less important now and I've sort of seen them fall out of style because everybody just pulls them in a different way. But doing this was not fun because you had to make this image and then you had to figure out what pixels in that image you wanted to display at one time. It wasn't very fun at all and this is a more simple example just using a bunch of browser icons. You'd basically create a window with CSS backgrounds and then slide the image up and down or left and right to get it to display the part of the image that you wanted. So I don't know why the example that I grabbed uses IE because nobody likes that but it's a 50 pixel tall by 50 pixel wide browser and then the background image is sliding it 200 pixels up. That seems pretty simple but especially if like 10 years ago and browsers were a little more finicky from version to version it never quite was right. A lot of times ended up with like the bottom of the Chrome logo, the top of the IE logo. It was great to save on load time and HTTP requests but this wasn't fun I know that there was a gulp task runner that would kind of set it up for you but that wasn't all that great either. The good news is SVG sprites. Oh by the way this I felt just dead doing this. Nobody's happy with that but yeah SVG sprites nothing like this. If you've ever dealt with an image sprites outside of the fact that we're grouping images together there's nothing about an SVG sprite that's like the hell of the Amazon sprite with all that stuff all over the place. So we're going to look at a really basic example and I promise this is the only real hardcore code we're going to get into after that it's more fun. So to create a SVG sprite we basically are going to do the same kind of thing as we would with a regular image sprite. We're making one big image that's going to contain everything else inside of it and just like with an image sprite you would never want to display the whole thing to the end user at the same time. So with an SVG image sprite we're going to say width zero, height zero and then style display none and that way no matter what the browser has with that image it's never going to show it but the browser is going to see it and then we'll be able to access the stuff that's inside of that image after the fact but we never want to display the whole thing. So children inside of an SVG image sprite so basically SVGs inside of SVGs they're called symbols and that's really the only nomenclature that's a little funky as you create an SVG sprite they're called symbols and then we want to assign a name to each one of those SVGs and for our example we're going to have SVG-Facebook as an ID and then an ID of SVG-Twitter I always do a naming convention where I put SVG- in front of any of my image sprites because that way I want to show myself and anybody else that's looking at my code this isn't a CSS class that's adjusting something with look this is a reference to an image that I have so you don't have to put SVG- in front of it but it's something that I usually do just to keep track as I put it in my code and I'll show how we put it in our HTML in a second but to create an image sprite we wrap it in an SVG that we don't display to anybody and then we put symbols name them and then the view box that's essentially the width of the image we'll get that from the SVG that we export out of Illustrator so if we're copying and pasting like we did before all we would do here is we would paste that export right out of Illustrator inside of our SVG and then name the opening and closing tags from SVG to symbol and add the ID the view box and everything else will come with it so I didn't want to paste the Facebook logo SVG and the Twitter logo SVG in there but basically this is what an SVG image sprite looks like the SVG code will go down there inside of the symbol and the view box is something that you'll get out of Illustrator the one thing that I want to touch on here is the title tag that may or may not come with your export and if you care about accessibility especially double A accessibility you need to have these SVGs named with something even if it's empty SVGs are a little bit different for alt text and titles than a regular image so if you're worried about accessibility I've got some notes in the slides here for how to do that but the main take away is the title tag is something you may need to add because it might be there from your designer or if you were building the file yourself but if it's not there you do want to add a title tag but before we move on I just want to make sure this is clear to everybody an SVG sprite is just a big sprite that we're not displaying and then we're putting other SVGs inside of it and calling them symbols does that make sense okay great so where do we put the sprite it's not something that we're going to store externally because then the browser can't get to it so where do I put it in my code to be able to take advantage of it this is a project that I'm working on at work right now it's a doctor page and I just wanted to show where I've got SVGs in the comp we've got three here I have the logo of the client which is Optum Health Care that's an SVG we've got a search icon in the top right to get to the search feature of the site that's an SVG and then every doctor has a star rating so that's an SVG and I need two different star ratings for you know if he has three out of five stars three would be yellow and then two would be gray but because it's an SVG and I can use CSS properties that's only one SVG so client logo search and star SVG you can use more than one of them on one page and one great thing about WordPress is it's pretty simple to try to sort where each one is so the way that I built this is the Optum logo in the top left corner and the search icon those are both at the bottom of my header dot php file so that way it's with the rest of the content and my images are right there the stars those go into I think it was named single dash provider dot php because I only need those stars on that particular doctor profile page it's kind of like if you're trying to load which images with which page I don't need every single SVG on every single page I can pick and choose which ones I have available on which page I always need the logo I always need the search icon I don't always need the stars so I have two SVG sprites in this example one's in header dot php one's at the bottom of the single dash provider dot php file because they're invisible and not shown to end users you can really put them wherever you can make an argument whether or not you want them to load first or at the end kind of think of them as like a jQuery library or react or like something that you're including as a library that you're then going to access later another good example is font awesome it's kind of gotten obsolete with if you go down the SVG path but it's the same kind of thing if font awesome isn't loaded you can't actually load the icons if your SVG sprite isn't loaded you can't load the icons so we've got our SVG sprites they're saved into our template how do we actually display them in our HTML and this is where it's great because it's really really simple going back to that example of the Facebook and the Twitter icon let's say like the bottom of the page I'm putting a link to Facebook and a link to Twitter rather than all of that gibberish that was scrolling by on the screen earlier all I have to do is wrap them in an SVG tag and then use this sort of funky looking nomenclature use xlink a colon and then href and then all I do is put the name of the SVG that I have in my sprite so it's just three lines and it's referencing the sprite and the browser will display those images like they're inline right there and what's great about it is I don't have to look at any of that code or that gibberish but I get all of the advantages of those SVGs being in the browser so I can manipulate individual pieces of the background or I can resize it but I'm not repeating myself over and over again if I have a page full of blog posts and I want to have like a share this Facebook icon for each one and there's ten of them I could paste that SVG Facebook image in there but it would be repeating that image over and over again and we're not really helping anybody out by doing that by using the xlink href method it's just one time that I have to link to it and then I never have to look at that code again so I wanted to include a screenshot of one of the sprites that I'm using and all this gibberish that I don't ever want it to look at again it's relegated off to a file that I don't have to see you can see at the top there I've got width zero height zero, style display none so nobody's ever going to have to see this but I can access anything in here as long as that file is somewhere on the page if you're using something like PHP includes you could make an SVG sprite put it somewhere else and then include it in your template so even you don't have to see it as you're editing your own files so as long as you're bringing that code in no matter where you store it you'll get all the advantages of getting those SVGs right into your HTML so we've talked about four methods so far and this is way more than a standard image like a JPEG or a PING like this is a lot more complicated we've got image tags, CSS backgrounds, pasting that SVG code into your HTML or making one of these sprites there's actually more than four ways to get an SVG into your page these are just the four that I've sort of settled upon as the ones that work best for me unfortunately there's some that don't work very well at all but have gotten somewhat popular because people have been intimidated by putting code into their HTML or making something like a sprite and I'm guilty of that myself as I got into this the one that I found was called SVG Injector and I've got the link to it in the slides if you actually want to go look at it and what it does is it sort of is cheating creating a sprite because remember the whole point of getting all that SVG code into the DOM is so that we can use it for things so with this we have we load in the SVG Injector library and then anywhere that I'm using the class name inject me JavaScript is going and stripping out that line of code that says image class source image-1.svg it's going to delete it and then it's going to paste in that SVG on top of it so this way when I'm editing the code I don't have to see any of that gibberish and look at all the ugliness of the SVG but I also can use something that's familiar to me the image tag is something I'm way more comfortable with than creating a sprite it's also faster this seemed like a great solution for me because all I had to do was throw a class name on there and I could get all the benefits of using SVGs without having to worry about any of the more unfamiliar stuff in the code now the problem with that is the browser is actually loading these images twice when it loads the page it's going to see that there's an image tag named image-1.svg and load that image then javascript runs it'll delete that line of code so the image will disappear then it'll paste it back in and the image will show back up again so what it looks like is the browser is loading is all the images will load disappear and then load again and I saw it and I was like well it's not the end of the world the page is loading it's getting there eventually nobody will probably notice and we had a client demo for the first page that I built and they loaded the page and the first in the client said is why do the images look like flickering lights in a room it's extremely distracting and if the client could see it then I'm probably out of luck so this got pretty popular because it's so simple but it's really not a good idea because it's annoying if the client saw it then that's worth noting right there but it's also not a very good performance trick because every image you're loading it twice so some of the savings we get of an SVG being a smaller image file we're giving up by doing that so I'm not saying that this is a bad idea it's just there's better ways to do it than using a library like this and of the four that we've talked about I've never come across another example where one of these four didn't do what I was trying to do I actually end up using all four in different scenarios because sometimes I don't want to create a sprite but if you want to use SVGs any of these four are perfectly acceptable it's more about what you're trying to get out of it and what your concerns are so let's just talk about the differences between the four because this is kind of an important the last important point I want to make is you get different benefits depending on how you implement them so the first one that most people are interested in is smaller file sizes obviously that's a pretty big win that we all want if we're using the image tag putting them in with the CSS background or an image sprite we're always going to get the smallest file size possible if we put them in with HTML we may not and the reason why is that we're repeating that image over and over again so like with the example of the Facebook and Twitter icons if there's ten blogs on a page and each one has the share icon if I'm using the HTML method the Facebook icon is loading ten times so any gains we got from switching to an SVG we're essentially giving up because we're loading it ten times we don't have that with the image CSS or sprite property the next big advantage is DOM manipulation and we don't get that at all with the image tag or CSS the browser knows there's an image and we can do nothing else with it if that's all if that's if we don't care about that then who cares but if we're interested in hover states or resizing or animation or using javascript within the SVG we cannot use the image tag or CSS we're stuck with HTML or the sprite next caching the image tag and CSS are actually great for caching because the browser will cache an SVG image exactly like any other image so if I've got the client logo in the top left corner and it's on the home page and you click to a sub page I'm not reloading that image again it's just coming out of the browser cache same thing with the SVG sprite if I have it in my HTML I don't have any caching at all because when I load that next page I have to re-download that whole image again so caching it may not matter for a small image but if you're talking a bigger site caching may be something worth keeping in mind and you get no caching benefits at all if you're pasting that code right into HTML the next one clean HTML this is sort of a pet peeve of mine as a front-end developer I don't want to look at all that SVG stuff it's long it's full of numbers like even if I want to turn off my hide the tag or something I'd rather just have the clean image source tag rather than looking at the SVG itself you'll get clean HTML with an image tag, CSS or sprite if you have it in your HTML it's pretty ugly and if that image changes down the road you'd have to update it in every single place you pasted it in so think that through too if I'm pasting a logo and that logo changes in two months with the next brand redesign do I want to have to change that out every single time the answer is probably no repeating the same SVG this is kind of the same concept we've just talked about if you're going to reuse that SVG more than once you really do not want to be putting it in your HTML just by copying and pasting it's a lot of work for you it's a lot of work for the browser and it's a lot of work down the road it's a real maintenance problem if we have all these images that aren't linked together like I could do a find and replace but who wants to do that image tag, CSS or a sprite nothing to worry about there implementation speed this is really the knock on a sprite we have to create that sprite put it somewhere and only then can we actually reference what we're using in the image tag or CSS or HTML it's super quick we just export it at a photo shop export it at an illustrator put it in our code and we've got it there so it's really a knock on a sprite that you have to create it but it's a one time five to ten minute process and I have to rename the symbol once it's in there I can use it as much as I want but if you're in a hurry it's worth mentioning I'm obviously sort of biased towards the sprite but I want to be fair to creating the sprite it can take a little bit of time animation SVGs are great for all kinds of animation I put the question mark by the image tag and CSS because while you can animate them using any of these implementation methods if you're using the image tag or CSS you can only animate the whole image itself because we haven't loaded that SVG into the DOM we could spin the whole logo but we couldn't animate a part of the logo so if you're interested in animation especially more advanced animation you probably want to go with HTML or the sprite method although animation is great with all forms of SVG far better than JPEGs or GIFs or Pings but there's an even better option amongst SVGs icon sets who here has used font awesome what it is is you'll go and download it's a CSS and a font library and load it into your site and it's something like at least three or four hundred different icons that you can then reference kind of the same way that we're referencing SVGs and the sprite they all have a name and you go and look it up and it's like class equals star and it'll put a star on your page icon sets they're great but the thing about font awesome is I don't think there's any site out there that actually uses every single icon in font awesome on its site so you're kind of loading stuff that you don't necessarily need you can always go in and modify the font awesome font file so you're only loading the icons you need but that's really only on a site-wide basis I can't make an icon set specifically for the doctor page that I showed earlier where I'm only loading the specific SVGs that I want so if we're talking a really big WordPress site I could make a font awesome type library but it would be much bigger than if I made a SVG sprite and made that into an icon set obviously if you're talking about icons with the image tag CSS or HTML you can't do that at all the only real competitor there would be font awesome or some sort of font library but font awesome was a great thing in its time it got popular when the retina screens on the iPhone came out because it took care of that the retina crispness so I don't have to load in a second image because it's a font I'm just essentially changing the font size and manipulating the size of those icons but if you think about it font awesome on some level is kind of a hack because we're taking an icon and replacing it with a letter on the keyboard and then displaying that letter as a font so if I'm trying to position the icon like go back to the star example on the doctor page and I'm loading in five stars I'm not manipulating them with widths and heights I'm manipulating them with font size and line height which is really more specific to letters rather than icons and especially with cross browsers they all displayed font awesome a little bit differently you don't have any of those concerns with SVG sprites because all browsers will treat them essentially the same they're looking at them as images and not fonts so if you ever want to create any kind of icon set SVG sprites are freaking awesome for that it's probably one of the best things about them because the reusability is so great and most of us with WordPress we're creating sites that reuse a lot of the same icons and having all that stuff stored in essentially one icon set is awesome the last thing that sort of wanted to hammer home was no matter what implementation method you use you're going to get to take advantage of retina screens hdpi and they work for any width and any height so like I talked about a couple times like the stars in the doctor page those are coming out at like 15 pixels wide if somewhere else some doctor wants a star that's 200 pixels wide I don't have to export another image out of photo shop I just say width 200 pixels height 200 pixels and it's the same star loaded in over and over again same thing with retina screens I don't have to worry about that so that's really one of the best things about SVGs and what's great is that works no matter what implementation method you use so if you look back these are all these advantages that SVGs give but there's one column that has four X's and some of them are pretty significant and that's the HTML in your SVG in your HTML method now earlier I said that 97% of SVGs used that method which is kind of a shame because that's by far the most limiting method of the four if you're pasting SVGs into your code you don't really get caching you don't have clean HTML you're repeating that same image over and over again and you can't take advantage of icon sets so if you're going to go down the SVG road while it's great to have DOM manipulation I would really kind of think twice before I start putting SVGs right in my code it's the way most people are doing them but it's also the most limiting so at the beginning I said that these are why SVGs are awesome smaller file sizes fully supported in all modern browsers animation is great you can manipulate them with CSS and with JavaScript always optimized for HDPI and retina screens and they're perfect for responsive sites that's still a lot of words and if I'm trying to convince my project manager that I want to take some time to put SVGs in he or she may not really want to hear me out through that many bullet points the quicker way to say it is why are SVGs awesome because they save you time for a site that I'm going to maintain for if I'm on there for a year or two or three years if I have a solid SVG sprite system set up any kind of changes that are going to come down the road in terms of different responsive screens, different density screens or just changing icons SVGs will make my job much easier I don't have to go back to the designer and ask them to export image assets as much I can use CSS to change things right there on the fly. I can change image widths right there on the fly and none of those things I can do with JPEGs GIFs or pings there's certainly still a great world for using those three image formats but I hope the takeaway you get from my talk is I think there's room for a fourth and I've been using SVGs on all of my production sites for probably about two years and it was definitely a little hairy getting into that I didn't really like all the gibberish and the code but after going down that road and kind of learning the nomenclature learning about how to use sprites naming them and all that stuff I would probably never want to go back to that and that was what I wanted to go through with you guys. That's the link to the slides. I put a whole bunch of notes like I've been saying on the slides with the Coke bottle so if you want to go and learn more especially on accessibility injecting or the sprite method there's some good links in there Twitter if you want to talk to me that's my email and then the code pen examples are on my code pen there I put in the slides that if you guys have any questions about any of this as you try to implement SVGs on your own sites I'm more than happy to help you out. The best way to reach me is probably on Twitter but you can try my email as well I just get a lot of email and I'd rather talk about SVGs than deal with most of my email so if there's any questions now we can answer those but if you get out of here and you're inspired and then two days later you're confused please reach out to me on Twitter and I'll be happy to help. Yes sir. Yeah the question was are they different layers and yes depending on how you create the image in Illustrator directly will impact how it gets exported like in theory you could create a flattened SVG in Illustrator that then wouldn't be of much use to you when you export it so how the image gets created is definitely a big player and what you can do with it once you get it out of there. Did that answer your question? Okay yes ma'am you wouldn't want to use it for a photograph and the reason why is SVGs are vectors so they're more like icons or logos or things like that if I took a photo outside there's so much going on in that photo Yeah converting it to a vector would be you could do it it probably wouldn't look very good and it would be hundreds of megabytes so that's why I want to say SVGs are great but JPEGs and Pings and GIFs are great too Yes sir The question was what kind of pointer is this? This is the it's by Logitech and I think it's just called Logitech presenter the thing it does that which zooms in and out which is great because I know there's two screens in here and if I point at one you guys can't see on the other and it also has another mode where I can spotlight stuff and it's got a accelerometer inside so it's a fun toy I would recommend it What's it called again? The Logitech presenter I think Spotlight, that's right Logitech spotlight It works with Bluetooth and then it also has this handy little dongle in here so if something doesn't have Bluetooth I can just plug it in and it works over USB Yes Yeah, let me bring that back up so we can all look at it Okay Okay, so the question was we're using the Xlink HREF method to pull the SVG back in but something I don't have here is any CSS classes so how do I actually load that CSS on and that's actually a really good question you would put it on the SVG tag itself so if I would have like SVG class equals Facebook and then I could change the background color or anything like that you could also do it like any other property that cascades down so if all of these icons the only thing like I wanted them to all be consistent is to do in my CSS .social icons and then SVG and then I could say with 10 pixels, height 10 pixels fill which would be their background color white so I wouldn't necessarily need to put a class on every SVG but that's where you would put it is on the SVG opening tag itself Yes It seems like it's pretty complicated to export a good SVG from as an example illustrator the logo it had paths and I mean paths you can do whatever with paths but it feels like you would get a much smaller image if it was just a circle and a couple triangles you could probably do that directly with SVG but is it worth the extra time to even try and make it better or just go with the basic nonsense so the question was about exporting from illustrator and there are more efficient methods than the logo that I showed earlier let me bring that up so back to the fun clicker again which now does not want to work oh it's on this screen so if you look at the HTML up there the circle and the two triangles they're all paths there are more efficient ways to create a circle and a triangle than what was done here generally I kind of just go with what illustrator gives me because I'm not usually at least where I work we have designers and then software engineers and front end developers I'm not really crazy about writing my own SVGs although I kind of know the bare bones to it if you export from illustrator there's a way to basically make it in a web format and I found the file size to be pretty minimal with that if you enjoy writing SVGs certainly go for it but for me I usually just go with the optimized version from illustrator one thing worth keeping in mind though is illustrator there's multiple different ways you can export an SVG from illustrator some save items and stuff that a designer would want and we don't want that so whenever you're the one exporting an SVG from illustrator that a designer or somebody gave you make sure you're choosing the web optimized version because otherwise you're going to get a whole bunch of stuff that you don't want in there anything else? alright well like I said I'll put the slide link up one more time in case anybody didn't get it I put a whole bunch of notes in these slides there's a lot more that I would have liked to get to if you guys have any questions hit me up on twitter and I'll be happy to help