 Good afternoon everyone. My name is Joshua Gioia. I'm a senior front-end engineer at a company based out of Minneapolis called Code 42 We developed a software called crash plan. I've been working there now for about two and a half years I started my career about 12 years ago as an action script developer So if you guys remember the days of flash that you know what I'm talking about if you don't you're probably better off for it So this talk today is SVG versus everybody and The reason I titled it that is because I think there's a lot of mixed conceptions around when we should be using SVGs and how we can be using SVGs so I just kind of want to pin it against the other HTML elements and Methods to get raster images in our browser and we can kind of take a look at the benefits using SVG over those other methods So we'll talk a little bit about the SVG a benefit about the SVG how I actually got introduced to SVGs was at work A coworker of mine said we need to use SVGs for this project and I was totally against it because of how complicated I thought they were but he said no, they're really simple Let me show you and ever since then I've been an SVG fanboy. So he he turned me on to that I'm gonna show you guys How to convert a PNG to SVG using illustrator We're gonna look at the anatomy of an SVG what's actually in those SVG files And then we'll look at a couple real-world use cases So jumping right in a brief history. It's been around for about 15 years now It was first introduced in 1999 and the first release candidate was in 2000 and Here's the kicker all current browsers currently support SVG So there's no reason why you shouldn't be or couldn't be using it So why would we want to use a SVG over a raster image like a PNG or JPEG? I think one of the biggest reasons is control Once you put that image in the browser, you no longer have control of it I mean you can make it responsive kind of but you can't really Move elements around inside the image. You're kind of stuck with that image moving forward So you can add styles in line in an SVG or you can control them from your style sheet, which is really powerful You could group elements inside of SVG, which is also really powerful Way better accessibility I have the ability to add Accessibility to individual elements or group of elements inside my SVG. So that's really really great Performance So let's just take the use case of Social share icons or social icons, right? If we have five of them and we use the PNG method We have to go and get five images from our server Not ideal. We can use another method, which is we can load up a sprite and then tell via CSS Where in that sprite that icon actually lives, but that's still one request If you use inline SVGs zero requests Reusable there's this really nifty feature in SVG code use Meaning if I already have an SVG element on the page I can just reference it inside of another SVG and get it for free. It actually Doesn't load any more code and what it actually does is creates that element within the shadow DOM It's totally responsive It's not this Cover contain situation where you kind of got it aside if you're gonna go full width with it or you know Condense it or stretch it out. You can actually move elements around the side of it You can target individual elements inside the SVG or groups, which is really powerful You can use media queries to target those individual elements or groups So this is kind of an example of that well, I guess not but So basically if you have a Walt Disney logo, let's just say and you want to do a little down as the page gets smaller You can kind of target each one of these elements and I must show you what that looks like in Illustrator So this is kind of what that looks like in Illustrator You can layer it and group it out and name it and when you save it out Illustrator actually saves out the groups with your naming conventions from your Illustrator file Accessibility again, we can we can target different elements or group of elements inside of SVG and give screen readers information about those individual elements filters This is a really powerful feature in SVG. It allows you to define in line filters for your SVG and It's reusable No need to do complex CSS when you're using these filters. It automatically does things like blur For you so you don't have to write some convoluted CSS to achieve that Animations this is For me it harkens back to my flash days right like when we lived in the world of flash We had all these things flying all around sometimes these Super long intros that you didn't want to watch what they just gave them to you anyways um But this gives you the power again to animate certain elements um, they have a built-in feature of animations and you can do things like Within the svg target an element and move it to a different part of that viewport And again, this is like I think one of the Most powerful features I can target individual or groups of elements inside the svg So it's not just making the entire image responsive. It's making every element inside that svg responsive Using raster images like png's and jpegs for things like customer logos I think we got to do away with that um For so many reasons one. It's not future proof. You know what apple just came out with a 6k tv What is you know, what is your client's 200 by 200? Logo look like on that tv. We don't even know right? We don't and we don't know how many k's they're going to go up to They could go up to a hundred k's so I mean Let's imagine a situation where Our name is christine And we're newly single and we're getting on this data app thing called twitter Or sorry tender We're getting on this data app thing called tender now would we if we're christine Put up a blurry or pixelized image of ourself in our dating profile I don't think we would I don't think we'd go with this Right, we wouldn't say this works for me and if you wouldn't put yourself Or your image in this light you probably shouldn't do it for clients either because their logo is very dear to them Their brand is very dear to them Okay, so how do we get from this pixelated png? To this krisby clear svg And now i'm going to do a live demo which I hope goes well We're going to find out Um just give me one second to set it up here Yes Okay, cool. So I'm an illustrator and I have a wordpress logo png i'm going to load it up And here it is So actually illustrator makes this super easy for you Right here, um at this top navigation bar. You can do a thing called trace image trace image Needs a little bit information from you as a user It just kind of wants to know how complex is this image before I convert it So this image is not very complex at all um Sometimes I'll just go with three colors even if it's one Just because that means that they're going to optimize it a little better. So let's do that It's gonna do its thing Okay Now as soon as we click expand We're done We got it. It's an svg And they've already grouped it for us and they've already broke it down in the past for us And we can go in here and group them differently and name them differently if we want So when we save out the svg we have the naming conventions we want um So If the customer gives you a logo and it's not an svg you can convert it in a matter of seconds, right? I mean that was super painless Sometimes it gets a little more tricky when the logos are a little bit more complex Or the images are a little smaller But you know as you kind of go along you'll learn different Tricks and tactics to mitigate that Yeah Yeah, I think if there is uh, okay, so here it is right here. I think you can So I don't this already has a transparent background. I think I think it's just white because the artboard is white So it's already transparent But if yes, if that were to happen and there was a white background on it, um, you could just click into that layer and delete it That's fine um So then we can just save this out here We can just save it as an svg and While out we're done. We can just take a look at the code right in here Um, and you know illustrator does a really good job of grouping things and then automatically Appending classes to the different paths And you see those classes represented up there in a style tag if you're familiar with html and css That should be something that you're pretty much used to Um, is there any other questions about how to convert a png to svg before we move on What's that? I know no no with the photo um No, I mean, I think you kind of got to delineate between is this a good candidate for an svg or not to me Most good candidates for an svg are things like icons and logos Images although you can do it and you can do it well Most images they just don't work. They're too complex Yeah What do you mean optimizing for readability of code or optimizing for performance Yep Yeah, yep, there's a there's a plug-in. I think it's called svg go I think so Okay Sure. Yeah, we use svg go and we we just built that into our gulp task. So that just happens for us automatically when we run our build Um, another thing you can do is get rid of Unneeded layers, right? You can kind of optimize it yourself in this interface if you like I like to go in and group layers based on the colors. They may or may not be All right, so now we know how to create an svg. How do we actually use it? So there's three different types of svgs or three different ways that you can basically Use an svg in your code to get it to display in a browser. That's object mode Object mode is kind of like an iframe or video embed Um, there's image mode image mode is just like any image tag or background image in your css Where you would load an image in and then there's inline Inline is going to give you the most flexibility and benefits and that's pretty much exclusively really what we use at code 42 So let's take a look at each one of those If you're familiar with html, I mean this is pretty basic Um, and you can load it in via image tag or background in your styles And then this is just an svg tag. This is just a basic svg tag Just like any other html element like div or Yep, just just right there in your html. You can just define it and that's the easy part What are the advantages of using an inline svg? We've already covered a lot of them, but one of the big advantages is it solves an agile problem Which is make the logo bigger Right everyone wants you to make the logo bigger Well in the past if I was going to make the logo bigger, I would have to open up photoshop Recrop my canvas recrop my image save it back out load it back up to the server Well, it's bigger. You owe me for one hour of work, sir. Just kidding Now you could just apply css classes and make it bigger Right there right then you can do it in the browser form or just using css. You can make it bigger All right So we've already talked about some of these but let's go over it again. What are the advantages? All right, we got chris fun any screen resolution. They come out with a 10k tv You're sure it's going to look good less htp requests to no htp requests, which is just amazing Easy to animate it is extremely easy to animate svgs. You can yes Are you creating animation by an illustrator? No But I am going to talk about how the different various ways you can animate svg Easy to make accessible Well supported yep So when it comes to accessibility I do accessibility Yep, I'm going to get into the how In a little bit Controlled with styles Now how many of you currently use svgs? Cool How many of you guys currently use svgs, but have never opened up svg file and actually looked at What the output is? Okay, we got a couple cool. Well, this is what the inside of an svg file looks like I'm just kidding, but it is it is kind of scary So this is typically what the inside of our svg files at code 42 looks like So we define our styles up top and we give it A class definition And then we just define our classes in our two paths Can anyone by looking at this example code tell me what this is going to render? You got it. So that code renders this And the reason why we've kind of broken them up into two classes and to find them up there is one of the Paths needs to be red and one of them needs to be almost black cool All right, we know how to convert an svg We know what an svg looks like we know how to apply styles in svg But that doesn't really get us all the way there, right? We're all here for word camp. We're all here for wordpress So how do we use svgs in wordpress? Is anybody in the room currently using svgs in their theme production? How do you typically do it? Okay Okay, okay cool. Yep, so that's typically Typically the way people do it just in line right there in their template or Or just upload it to the media gallery and then you can use image mode to pull it in We use this nifty feature called get file contents So we want our svgs to be in line But we want to tell our template which svd the load Um when it gets the request from the server and the reason why we want to do that is we might have a template in which the svg and the markup They're all the same, but the difference is The svg logo that we want to bring back. So I'll give you an example. I have a client that sells trade show booths And they have all these different product pages and all these different product templates are the same Right, there's a slide show to the left information and then you know the product line logo And so I want to reuse that template, but I need to grab a different Logo for that template to represent their product line. So that's why we would do something like this Um, there's also a plugin that you can use svg support I haven't used this plugin, but they do support in line svg, which I think is pretty cool Code 42 case study. So this is that Moment in time where my co-worker came to me and said we got to use svg for this product We cannot use png's. I'm like, why Why can't we use it? I know how to use png's Is because we love our logos We love to show off our clients at code 42 We have a lot of clients. In fact, our meeting rooms are named after our clients. So we're really invested in client relationship Some of our clients are boston university national geographic Okay, panagonia So the problem We need to give content editors the ability to add logos without any developer intervention Right, they don't they can't call on us every time they win a new client And they want to put it on the website or they want the ability to access that logo on the website We need to change colors programmatically based on different modules and themes we have So that was another really big issue and a big reason why we couldn't use raster images for this particular problem We have to make the Solution reusable across multiple websites and we have about six of them. We maintain Okay The real problem we have adobe as a client We have to represent that logo in four different colors We have to then do it in six different sizes For every code 42 customer So that right there to me equals Not going to happen. We're not going to save out a thousand different png's to represent these various clients against these various modules At various times. It's just not It's not going to work So what we did is we built a plugin and that plugin allows us to upload svgs Optimize them and make them available globally for consumption of our modules And i'm going to demo that for you right now So this is what our plugin looks like So as you can see they need access to a lot of different logos And they need to be represented in all these different colors So we allow them to kind of look at the different themes and decide is this you know The way we want to portray our client on the website for this Incense Yeah, so it's just a nifty little plugin works really well Um, but I mean you can see how like crisp these logos are right? They just look good It's not available to the public no, um if it was up to me If I had my druthers, I would make a lot more of our stuff open source, but And you kind of know how that goes so Okay, cool. So you're asking about how do we use this better accessibility? How do we make these svgs accessible? And here we go right here We have an svg element and we give it a rl label labeled by and we equal that to title and then we ID our title with the same attribute that we fed to the aria And there you go Then you can define what it is and a screen reader is going to get to that element and say oh, I know what to Read here. It's what you told me to because you referenced it here in this aria label So as you can see that that works a lot better than an alt tag Right, especially if I have an svg like the adobe one That's like the red adobe a and then the word adobe, right? I can separate those two things out and say the screen reader read adobe a And spell out the word adobe if I want So again, I mean, it's just pretty simple. It's not very complex to use this element I'm sorry Um inherently it's going to be hidden. Do you mean is it going to show is it going to render in the browser? No animation effects so svg has this built-in animation element that again you can just link using ids And this animation element has things like move to start from So you can create an svg element with an animation Built into it load it up to the browser and it's good to go no javascript. No css So that's pretty powerful Um, I prefer to use green sock Um, but again, how you would do that is just import green sock into your project and call it out the id So you can do some pretty powerful stuff with green socks and tweens So this to me is like one of the coolest features of svg this filter function, right? I've got an svg and I want to do something different with it or maybe when I roll over it I want it to blur and when I roll off of it. I want it to unblur Well, I can define that right here using Using this filter and again, it's just simple I feed it an id and it knows what to do Yeah, you can You can yep Yeah, it's really cool. It's really powerful and I think there's 16 filters right now Sarah sudan has a really Really good article on different filters and how to use them on uh, core drops. So I would I would definitely check that out And this is pretty well supported as well. So unless you have to do something in ie 10 Well, you think that's funny, but when I would start it it was ie 5.5 That was difficult um Like I said, it's just a really powerful Really cool feature. Um And it can do things like this right, so that's just a little bit of JavaScript mixed with a svg filter svg use This is super cool If I define a svg somewhere I can reuse it elsewhere again without Any more code or having the browser interpret any more code. It's going to load This it's going to clone this element and load it in the shadow DOM So in this example, we define one circle and then we reuse it twice, but we gave it different styles so Really powerful as well All right the anatomy of an svg This is that scary part Like all this element stuff on the top level It's pretty cool, you know It's pretty I'm pretty used to it And you don't really got to get into the nitty gritty about what's going on Past defining your styles and putting ideas on path and group, but we're just going to walk through it And uh, you know, it might get you out of a pinch when you hit an edge case at some point So we have built-in elements. Um, those elements are rec circle polygon line Uh, this is what a rec looks like So I have svg element And um, I define a width and a height and it gives me a rectangle. I can pass additional parameters Rx and that's going to curve the um the rectangle We got circle similar you know, we we feed it a radius and um X position in a Y position and it just draws a circle for us right there polygon, this is powerful when you want to create An svg element that basically starts where it stops. So this is a good example of that You know wherever it starts it's going to stop so it So this works well Line um, this draws a line from a starting point to a finishing point Um, and then you can pass it Um Yeah, it's basically just a starting point to a finishing point That's what the x1 x2 is on the y1 y2 path this is um What you're going to see most often and when you do that illustrator Conversion that I showed you they normally create paths whenever they can One thing I like to do with paths is group them based on color or animation preferences but so you define a path and within the um D you equal what that path is going to look like And the z at the end closes the path So you have to have the d equals then you have to fill it in with the parameters and then you have to close it So uppercase is for absolute Lowercase is for relative um m is for move to Uh l is for line so you can define a bunch of lines in a path Um h is for horizontal v is for vertical and z is to end the path um So again, you know, because we have these paths because we have these groups We can actually make things responsive, you know, we can base on the user's browser with condense remove elements from our svg logo And this is what that looks like in code, right? So I've wrapped it in uh svg called disney logo I've named them appropriately. So magic castle walt Disney and then d Um And I group the things that I need multiple paths in if you don't need multiple paths that you can not group them I I like to group everything Just so they're on the same hierarchy And this is an example of, you know, what you could do with media queries And uh responsive logo So I think this is a lot better than what we currently have Which like I said is just stretch contain cover And this is how you do that with media queries. I mean Pretty basic stuff. You guys have done media queries if you've done any type of responsive development And you just call it out the same way you would call out any css class in your markup okay What else is cool about paths is you can add uh beziers to them So we have c that's a cubic bezier self-reflecting cubic bezier That's kind of if you wanted to make like a s shape All right, it's going to give it's going to get where the line curves. It's going to give a reflected similar but opposite curve to it uh quadratic bezier uh elliptical arch And this is a really fun cool tool um It's basically you can go in here And play with these different things on a path And then it will tell you exactly what Uh bezier code you need to achieve that Um, which is really powerful and cool viewbox, um, this is what you wrap your inner elements for your svg in And you can define a width and height I tend to take out the width and height because most of the time I want my svg is to be responsive um, but viewbox is basically you can think of it as cropping the canvas in which your svg is going to live Right, so it's going to need to be the width and height that you want it to be to display all your elements um Preserve aspect ratio The default is going to be x mid y mid that smack dab in the center of that view box that we just talked about These are the options x has mid mid mid and max y the same thing mid mid and max Um meat slice or none you can think of that as cropping slice is going to crop the svg elements If they're larger than the viewport meat is going to confine them to the viewport This is kind of uh image that represents that And then this is an image that's going to represent the difference between Slicing and not slicing. Um, this is a cool example of um using responsive text so It just kind of keeps its Keeps its weight on the page no matter how wide or narrow you have the page with this clicker doesn't want to work Um, there's a list of resources I don't know So sarah drasner and um the two saras they um they are kind of The oracles of the svg landscape. They have a ton of stuff about Um animating svgs filtering svgs and they've kind of been singing svg praise for years now So I would I would definitely suggest following them and I'm going to open it up for questions Yep Um, yeah, I mean, I think you would kind of treat it You'd kind of treat it just like you would any layout like, you know If you're going to do mobile first if it's here then show them what that looks like in that width But in the actual illustrator you're going to want to group those things and name them appropriately That way you and your developer can have a conversation and say hey on group Walt disney or on group magic castle. I want that to disappear on um, you know on ipads or something like that Yep, yep Selectable and copy and pasteable. Huh? Yeah, yeah, no, I hear you. Um, you know, I I don't know. I'm assuming there's a way I'm thinking there's probably some type of element or trick you could do to get that to happen Yeah, yeah Cool Yeah Or that kind of like point based animation on spgs Yeah, so the smil animation was that animation tag that I showed earlier That I think that's adopted from that spec And I okay go ahead Right, um You know, I I think you can get pretty far with that animate element and css But you know, I mean sometimes just You know basic css and html won't get the job done. Do you have like a specific use case that you're thinking of? Okay, um You um, so you're asking if if I have like um A software and I want to create an svg animation And I just want I just want to be able to do it in the software and then export it I think adobe has a product that's pretty good for that I can't remember the name off the top of my head. I'm more on the development side though, so I I wouldn't I really wouldn't know is there any designers in the room that are aware. Okay, cool. Thank you. Yeah Um, yeah, there is a free svg animator. I'm sorry Yeah inkscape Yep, it's called inkscape It's um, it's a free svg editor. Um I find it kind of hard to use but maybe that's just me So Yeah, um, so tip number one, I'd say get a large transparent image And then kind of okay, so when I actually Um, I could show you guys that so there's more features of illustrator But in that trace feature you can do a custom trace Sorry computer died But in that in that trace there's if you go all the way down to the bottom of the drop down There's a custom trace feature and then you can kind of play with the different nuances of it just to get it just right Right Yep, yep Yep, and that like I said, that's that that's setting when you pick like two colors three colors 16 colors Or if you do a custom you just kind of got to play with it and start with a large image Okay Right right, what are oh, yeah Yep Yeah, um, I prefer grouping. I guess I don't know if there's a compelling reason Oh, yeah, okay. Okay. Yeah, so if I have multiple paths and I know that they're going to be the same color Then yeah, you should compound them Yeah Yep Yep Um, okay, so you you have a okay So you have you have a problem in where the editor wants to grab an svg from a list of svgs And then have an inline on the page Right Yeah, um, so you could Well, if you want it to be inline You could use that plugin and they have an inline option and allow you to select from the media query What we did is we created a custom post type And that post type has a reference to the file that we're going to get the content from And then they pick which logo they want to use from a drop down list in the in the template We parse that so it knows what to grab when Right Inline svg if you do it right Yeah, right Right, yep, and and you get all that control And a small number Well, I'm right. I mean you don't even have to use a file if it's inline It's just it's just rendering html at that point. So Yeah, yeah, thank you