 Hi everyone. Welcome to the Thursday sessions at Drupal South. I'm Simon. I'm the Track Chair of the Building Track, which hopefully should be self-explanatory, but hey, there's a lot of crossover. But today, for the opening session of the Building Track, I would like to introduce you to Ricky Bocco, a very awesome developer. She was at Weave and now she's at Previous Next, which means she's got to be awesome, so I'm going to let Ricky take it away. Hi everyone. Everyone can hear me okay? This is loud enough? Okay. Cool. So I'm Ricky Ichio, front-end developer at Previous Next. I've been doing web development for nine years now, mostly front-end, and Drupal for five of those years, I think. So the sessions about SVGs in Drupal and sort of discussing why they've been added into Core, their sort of Drupal 8 now looks for a SVG file for the logo, and it's also replaced all of the sort of icons like the RSS feed. So just going to have a quick discussion of why they've done these things, why they've chosen SVGs, and why you should also use SVGs, because they're cool. So SVGs aren't the same as bitmaps, and this is, so SVGs are scalable vector graphics, that's what it stands for. This is my little acronym of a non-scalable bitmap graphic. It doesn't really exist. I made it up. Drupal 7, you had bitmap files for your logo and your icons that were all pings, and they just weren't scalable. This is a bitmap. This is a 24-point sex that's been saved as a ping, and then enlarged here just to show you how unscalable they are. And this is an SVG, same size, just blown up, and it's always crisp. It's always going to scale. It doesn't matter whether it's 30 pixels or 300 pixels. It still has the same Christmas, which is great for retina screens. There's sort of no, you can have one file that caters to all the different retina displays. So it's pretty cool. This is what the vector looks like. It's basically a bunch of code in the file that maps out to some coordinates that is either a path, a shape, a line, anything that you can make. And it just has some dimensions on it, which I won't go into really, but there's some great information online, particularly this blog post explaining what the coordinates are. One of the biggest advantages of them are that they're smaller. SVGs are much smaller than ping files. So once you take, so basically I took the Drupal South logo, saved it as a ping and as an SVG, optimize both of them the way you would normally on the web, and the results are three times, three times the size the ping is than the SVG is. And then to get all the retina stuff you need to add in your 2-by file and your 3-by file. So you end up with three versions of that ping infinitely bigger than the first one. SVGs can have bitmaps in them, so you can put a photo inside a vector shape, you can mask it so that it's cut into the shape like the Drupal South logo is with the flag behind it. That can be a vector file, but then you do lose some of the size benefits obviously if you're including bitmaps inside them. But they're really great for illustration, they're sort of not so good for photographic content. They're also way better than icon fonts as well. Icon fonts aren't semantic, they have a lot of putting in i tags and em tags and making sort of hackish ways around getting those icons into your web page. And the fonts are sort of for text content, they're not really made for anything else. You have more control with an SVG than an icon font, you don't need to fiddle with the line height to get your alignment. You also can have more than one color in an icon which you just can't do with an icon font. So you have much more design control. And they're also smaller. Icon fonts, so a set of nine icons that I put into Ikomoon to generate the icon font came out to 26 kilobytes worth of font files that you would need to include in your page. And the SVG sprite with the same nine icons came to eight kilobytes. So again much, much smaller. And just one file instead of four different font files. This is a SVG sprite, so you can do the same thing with the icon font where you can have multiple icons in one file and just map them into a ID which is called a fragment identifier in SVG talk. So you can include this one file in your page or externally with another library. And then you can reference any of those icons anywhere in your page. And it will just pull them in. And I'll show you more of that later. But it's very simple just to create a sprite of SVGs. This page has a lot of information about how the different ways of creating your sprites because there are a few different approaches. You can also fill using CSS. So you can target SVGs with regular CSS and change their colors and more than just change their colors you can change the size of them and all sorts of stuff. So they're really handy. Specifically for hover states, different hover states when you're hovering over an icon. All that sort of stuff. You can target specific paths inside an SVG as well. So if you have a multicolored SVG you can put a class on that specific colored path and target that specific class with your CSS and change that little portion of the SVG color as well. So you've got quite a lot of control. So SVGs are highly accessible as well, especially when used inline instead of as an image file. So if you've got the same inline SVG code as we had before, we've just added in role equals image and an ARIA label and then we've got a title and a description. And this is really great for your website logo as well because you can put your site name and your site slogan into the SVG itself, straight from your PHP template or your twig template. And then a screen reader will automatically read that out to the person viewing the site. So this article has a lot more information about that as well. SVGs can also have text in them themselves. So there's a text tag in an SVG file and you can just put regular text straight into that file. And it can have the web fonts as well of your website. Browsers read it just like normal text. There is some issues with translation though because SVGs are sort of external DOM reference. They don't translate instantly. You would need to refresh the page to get a translation. So there's some catches with it, but it's pretty good for accessibility just to have text straight in the graphic. Optimization is the key to getting that small file size. There's a few different tools. SVG and OMG are the main ones. So it's a node-based optimization tool. Anyone familiar with nodes should not be too scared of that. The OMG one is a visual. It's a website that you can use so it gives you a preview of the optimizing so you can see whether the image is being changed by the optimization, which can happen with more complex SVGs. The more detail they have, the more you optimize it, the more likely you are to change what that image originally looked like. Because optimizing basically is the main part of it is decreasing the amount of decimal points that is in the vector. So the more decimal points, the more detail there is, the less decimal points, the less detail. So you've got to just be careful. So I really like using the web-based GUI because of the preview. I can see what's going on. There are also grunt tools and gulp tools that you can use to optimize that optimization. You just need to keep the original so that you can go back and undo if you've gone too far with the optimization. This is what Illustrator will give you as an SVG file. It's trimmed already so it's quite a large file and you can see all the decimal points that it puts in and a lot of other guffs that you just don't need in your file. You don't really want to have that as your website logo in your HTML page so it's better to optimize it. This is what Sketch spits out. It's a bit better. It gives you a title and a description by default which is great. It's still got a lot of its proprietary sort of code in it. And there's also Inkscape. I know I haven't played with yet but it is meant to give you a better output as well. So Inkscape is an open source vector program if anyone's not familiar with it. And then this is that same file just optimized through SVGO. So it's much cleaner. Nicer to use, makes more sense. Browsers. This is probably the most difficult part of using SVGs but you just kind of need to play with it and work out what's going to work best. Basically IE 9 to 11 do support SVGs but they have some issues with how they display them. IE 8 down has no support of SVGs. There are fallbacks and stuff I'll talk to a bit later. One of the ways you can add an SVG is just in line, just sticking the SVG code into your HTML and not adding any CSS or anything to it. I don't recommend it because it won't scale in those IE 9 to 11 browsers either isn't consistent or it doesn't maintain its aspect ratio. It's just not very great. In line with CSS is much better. So you would set a height and width in the CSS but not on the SVG file and then that'll be pretty consistent across all the browsers. There is a sort of this HTML5 canvas thing which I haven't actually played with yet. I only found it researching for this talk but it's promises to scale the SVG sort of maintaining its aspect ratio when only one of the dimensions changes. So basically with auto, height, auto that sort of thing will give you that power even in IE 9 and up to 11. So I'm going to go play with that afterwards. Sounds cool. So this is your in line HTML with the corresponding CSS that would be needed to make it look the same in every browser. So you've got your general responsive images, SVGs, the same code applies and then you're setting the actual height and width. You don't need to use pixels. You can use any measurement. And just to note here that there is no height and width on the SVG itself. There's only the view box which is used to maintain the aspect ratio of it. This is the same in line icon. It's just using the sprite instead of putting in the path straight into the HTML. So this is how you reference the sprite you put in the file and then just the fragment identifier that you specified on that particular icon in your sprite file. CSS backgrounds are the other way to include SVGs into your website. With this you would put the height and width on the SVG and then you can use something like background size contain or any other background size rules to size that SVG based on the elements it's been added to. This would be sort of an example of that code. So you've got the SVG file somewhere on your server and you've got the height and width specified in it and then you're loading in that file onto your HTML element. This is sort of not the best approach because we've got a separate HTTP request for every icon that we're adding. So there are better ways to do this. Sort of two approaches. You can reference the sprite by the ID in the CSS. It's not got the greatest browser support yet but it will be the future sort of approach to take. The other one that does work at the moment is URL escaping the SVG. So this is just the first one, using the sprite and referencing the fragment identifier and this is escaping the SVG. So we're basically putting it in line and this looks familiar if you've used base 64 encoding on an image. It's the same sort of thing. They've found that just URL escaping it instead of using the base 64 optimization is better because it makes the smaller output and this works in all the browsers and reduces that need for having any separate HTTP requests. So you sort of have two versions of your icons. You have the source icon which is the individual files which you would use in your CSS and then you have the sprite which you would use in your HTML as an inline code and then the sprite doesn't have the image dimensions on it and the source files do have the image dimensions in them and then as I said there are gulp and grunt tools to optimize creating that sprite as well from those source files. You can just point it to the source files and it will make you a sprite file or you can use something like ICO moon to create your sprites. You can also just do it by hand. So to the Drupal part, the biggest issue with SVGs is security. If you're having people uploading SVGs because they are a code file they can have executable scripts in them that can be harmful to your CMS or to your server. So there's a big sort of, this is probably the primary reason that Drupal hasn't been supporting SVGs so far very well. You just need to make sure that you have the ability to upload an SVG into your CMS. You're going to need to be more rigorous around who can upload them as well as where they've come from. So trusting the source of the SVG and making sure that there is no harmful code inside them. In Drupal 7 you cannot upload an SVG to an image field. They are not supported as an image type even if you add the SVG file extension but they are supported in file fields. So you can go home and upload an SVG into a file field in your Drupal 7 site and it will work. You probably need to have a look at the template that it's outputting and make sure it's not adding any sort of additional stuff around the file and that it's just rendering the file but it's pretty simple. To do sprites in Drupal 7 I've always sort of just made a list field where you put in the IDs of the icons in your sprite and just let the editors choose from that list of icons which one to load and then you put the sprite code into the file field template and that works pretty well. But it sort of lacks the visual cue of what icon they're adding because you've just got the limited text description of what the icon is. Drupal 8 is pretty much the same. There's still no support for images in the image field but there is still in file field. So the same thing. And then for the sprites I can sort of give a quick plug to my colleagues that previous next who have put together this awesome module SVG icon which lets you upload the sprite file and see the icons that you're adding into a page. So just still sandbox at the moment but we have used it on one production site so far and it's gone pretty well. So just go back. If you want to jump onto that and give it a test that would be great because it's sort of pretty early in its days and needs some more testers and some more input into it. So this is the file, the field that it gives you. It's a file field. You can upload the SVG sprite and then you can also choose from any previously uploaded sprites so you can have one sprite for the whole website and just select it wherever it's being used. And it gives you this pretty visual representation of what's in the sprite and you can choose which icon you want to use on any page. And then you just sort of theme it as you would normally. So I think it's a pretty cool module. Going a little bit quick but we've got Drupal's SVG guidelines are in this sort of issue that they've been discussing for a little while now and it explains some of the reasons they've made the decisions to change over to SVGs in core and also some, a lot of information about how you structure your SVGs and optimizing and all of that sort of stuff that I've discussed. If you do have to support IE8, I feel for you. You can do sort of things like a ping fallback where you have a ping replacement for the SVG file. There are polyfills. There's one called SVG for everybody which gives you, so it gives IE8 its sort of SVG support. I haven't had to do any of that so I couldn't tell you much more about it but at Google there's a lot of information online about it. The other really cool thing about animations which I can't get into at the moment because I haven't really played with it either is animation. So SVGs can even replace all of your animated GIFs, your loading icons, all of that sort of stuff because they can have really cool animations in them. And it's a huge sort of thing that I highly recommend you play with because it's really fun. But yeah, you'll have to Google it. And that's it. So I guess questions for anyone? Just for the Q&A session, if you can just raise your hand if you have a question, I'll come around in turn with the mic and if you just hold the mic up to your chin so we can hear you all. So any questions? Thanks, Ricky. Do you know of any tools that will scan an SVG file to sort of strip out JavaScript or anything like that? No, I haven't seen anything like that yet. It would be great. Hey, thanks for the session. I just wondering if there's any tools that would help you to convert Bitmap icons to SVG? No, I don't. That would be great. Inkscape can do that? Okay, cool. Yeah, Inkscape. Yeah, that's what I was wondering because as a developer sometimes we need to we want to convert it and we not necessarily have all the tools like Photoshop or something to recreate. All right, thanks. Thanks, Ricky. That was great. Is the edge of the line like anti-aliased or can you make it softer or harder? On a vector file? Yeah. There is no anti-aliasing. It's just a straight line, yeah. Cool. Any more questions? In theory, can Drupal generate the SVG? Say if you want to have placeholders for that text, is it possible to generate it through the theme function or something? Or a template or a twig file to push the SVG? Yeah, yeah. So with that list example that I had, I was also putting in pre-processing into it the title of the SVG and all that sort of stuff. So all the list field was adding was that ID at the end of the sprite section. And then you can add in anything else, yeah. Thank you for that. Just on Illustrator, is it possible to make it output reasonably small files? Yeah, there are plugins you can get for Illustrator and Sketch as well that give you better outputs, yeah. Cool. I'll tell my designer. So for external SVGs, how can we make them accessible? Like you have shown some PHP code for accessibility, right? Yep. So for external files, external SVGs, how can we do that? So you can have, in your external sprite, I'll just find that. One of the great things about the sprite method is, so this example, in that sprite.svg file, you can include the title and the description where you have the icon code and then this use it, understands all of that and your screen reader will still read it out to you. This is probably a new question. But with the previous slide, you had Viewport. Explain a bit about what that does. And then this one doesn't have Viewport. Sorry. The Viewport. Yeah. So when you use it as a sprite, you don't need Viewbox, but you do the other one. Or is that just like, can you explain what the Viewbox does? Yep. Yep. That's right. The Viewbox is sort of the aspect ratio is the easiest way to explain it, but it's basically the height and width and then the left and top coordinates, which is the 0, 0. So it's at the top left position and then it's that wide and that high. So that's the Viewbox. And then with your sprites, you include it where the icon is. If I just find that code. Yep. So you can see here, we've got the Viewbox on the icon and the title and its ID. And then the... Yep. Yep. Yep. So you can... Yeah. Yep. So you can lay out your sprite a few different ways. You can have it visually. So you can put in the Viewbox, the top and left coordinates as well and you can map out your sprite in a grid. The way is they're just on top of each other. So there's a few different approaches you can take. And if you do like doing the background position, then you would use that approach as well. Yep. Yeah. I think it's cool. Alrighty. Any more questions? On the floor? Yes, in the front. So, Ricky, you sort of covered over lots of awesome stuff here and you sort of touched on a couple of the points where it gets a little bit ugly and some of the challenges around it. Can I kind of talk a little bit more about the challenges you've come across and how you've either worked around them or resolved them? Yeah. Or have you just thought it doesn't work in this instance? No, no. So I've... Could you actually loop back to when you first seriously tried to use SVG on a project and maybe talk to Donna's points? Yep. And maybe with a bit of an example? Yeah. So it was a fairly big site and it took a little while to get... I'll just find this one. Yep. Took a little while to figure it all out but basically I started making some JS fiddles, putting all the different versions of SVGs into one thing and then just browser testing that and seeing which ways worked, which ways didn't. So there's slides. I've got a few different versions of the JS fiddles where I've broken them apart to demo the different methods. So you can go on to those and have a play with yourself, browser test them, see how it goes. Yeah. That's my recommendation for getting started. Yeah. Yeah, trial and error. Yeah. That was last year in January. Yeah. Yeah, fairly recent. Any more questions in the room? I've got a quick one. Rear your little module which picks the sprites. Is that intended for clients, like website administrators or is that for the front-ender only? It's intended for the client. Yep. So we've given the client access to that code and they can choose from the sprite that we've created so we know the sprite's safe and then they can insert those icons into any page. Yeah. It looks like a great module there and I think we'll be using it. Yeah, cool. Any final questions? Oh, yeah, over here. I hope you don't mind me asking just slightly off topic but I was thinking about some of the frameworks, Bootstrap and Material Design in particular and I know that they use font icons and various methods to get graphics into the page. Yeah. But yeah, what are your thoughts about Material Design? I'm not sure if they use SVGs or not but I'm asking more broadly. Yeah, I haven't. I've looked at it. I thought it would be cool to make a Drupal 8 theme based on Material Design. I thought that would be a cool project. I haven't had time to look into it in a more detail but I do like the principles of it, yeah. But if I did do a Drupal 8 theme with it, I would use SVGs instead of their icon fonts, yeah. This is more of a comment. I think that we need to have a cool conversation in Drupal around SVG support and actually get serious about solving the security issues rather than just saying, no, you can't use them. Do you have any thoughts on that? Yeah, Lee does behind you. Sorry, it's a bigger problem than Drupal. If you Google like SVG, Injected Script and Security, it's not like there's people who've done like their whole PhD. I mean, Drupal community is great but I don't know that we can solve it on our own. Any final questions? No? All right. Well, I think we might wrap it up there. So please big round of applause for Ricky. All right. So please look out if you want to share that talk with any of your colleagues who are not here. Of course, I believe that the recordings are going up online later, so please do look for those. Okay. So now a quick break before your next talk. Thank you very much.