 Yeah, hello. I have to apologize for my voice. I'm sick till a few days. And so if you don't understand me, just ask me to repeat the sentence. Yeah, I'm talking about scalable actual graphics or SVG. And as I have in the subline, it's not just images. And I will show you where you can use SVG. And they are not really images. A quick overview. My name is Bernard Kau. I'm living in Berlin, Germany now. I'm a PHP developer. Since a year I'm also like professional WordPress developer and I develop some plugins myself. And why do I give a talk about something front end like as I'm a PHP developer. I'm quite good transferring an image like from Photoshop to CSS and HTML. And that's why I learned many things also about SVGs. I'm also the organizer of the Berlin WordPress meetup group and I have a block in two languages on Cowboys and that's my Twitter handle. Okay, let's start with scalable vector graphics. What is it? As the name says, it's a graphic, at least most of the time. It's a vector format. And it's scalable. So at last, without any loss of quality. Technically, it's an XML file. So it's code, actually. And that's why I like them. To be honest, most of the time when I work with SVG images, I'm using a text editor to change the color of something like this. It's way easier for me and also like my text editor starts in milliseconds, whereas illustrator takes a moment. And I also don't understand anything about illustrator. So how does a SVG image looks like in code? It looks something like this. You have an SVG tag, an opening tag, and then you have some namespacing, things that you have a size. And here you have a rectangular with a color, a fill color, and some height and width. And you have a circle with another color. Can anybody tell me what that might be from seeing the code? It's a wide rectangular and that's a red circle. It's the flag of Japan. So quite easy. And that's only those few lines of code is a scalable image of the flag of Japan and you can scale it up to any size. And it doesn't grow if you show it like 5,000 by 4,000 pixels. It's still those few lines of code. Okay. Let's have another example. Maybe someone can guess what this is. It's three rectangles, two whites, one red. And that's somehow like opposites in width and height. Any guesses? No? No one from Swiss here? So sometimes when you look at the code you can really tell, okay, which part of the image should I have to change to change, let's say, this rectangular. Okay, a little more advanced, someone? No. Okay. Here we see something different. It's a path. So it's not like a circle or a rectangular. It's a path. And this is very weird stuff. So I don't know how to write that myself. So then I use something like illustrate or escape to deal with path. And that's like so the one from Funkin, they know what it is. So how can you use an SVG? You can use it as an SVG image. And the easiest thing is to just use an image tag, as you would do with a PNG or JPEG or a GIF or something else. So even some developers don't know they can just use an image tag. But an SVG is just an image format. So you can just use an image, which also has the ability to add an alternative tag or a title or some other CSS inline slides. Then you can also use an object tag to include it. That has the need feature. If you have to have some backward compatibility, then you can just use an ordinary image tag inside of the object. I just realized that should be PNG, not SVG, because otherwise the fallback, let's say you have an old browser and you have to support some fallback. If it doesn't support an SVG, then you can just have something inside the object. It can be an image. It can be a text saying your browser does not support SVG or something like that. But in this case, it shouldn't be an SVG. You can also use a picture element, which also has some fallback features. So usually with the picture element, you can use multiple sources, source tags. And then you can also have an image tag. So usually the browser takes the first thing he understands, and even if a browser doesn't understand the picture element altogether, it would fall back to the image tag. You can also use it as a background image in CSS. So you just reference it as any other image. Then with using it as a background image, some of you might know the technique using data UIs for including images into CSS, so that the browser doesn't have to download the file, but instead only gets like a base 64 encoded string. But actually because SVG is a text format, you can just use the SVG in the data UI. But because an SVG might have some brackets and colons and things like that, you should probably URL encode the SVG. And some of the libraries you might use for pre-processing CSS like less or sus, they have functions to turn an image or an SVG into such a data UI. So you don't even have to produce the code yourself. And it's a very neat feature to include many images into your CSS without having the browser to download additional files. And we come to why that's important on some of the other sites. The last thing you can do is just include the SVG into the HTML straight away. Because it's an XML format, you can just put the SVG code into your HTML. So in this, I just use a diff and then I drop the code inline. You have to be aware, you should not include the XML version. And for accessibility reasons, you can also add a title which describes the image when you inline. Because you don't use an image tag, you can use alt attribute. So in this case, you can use a title or even a description which has a longer description of what the image chose. So why should you use SVG? I hope it's clear from this picture set. Like this is what the flag would somehow look like on a device with a pixel ratio of three if you don't have a larger size of the image for those devices. And SVG is just as clear as on any size screen. Also, WordPress now has those responsive images features producing something like this which is pretty much code. And with SVG, it's just one image tag without any source sets and no additional images. And all the browsers that understand SVG, they only download those this one file. So it's much less code. So speaking about browser, how is the browser support of SVG? That's probably one of the things you want to know. It's not easy to see. So this is EA8. And this is Android 2.3. So if you have to support some of those browsers, you need some fallbacks. And there are different fallbacks depending on which technique you use to include the images. So there's a fallback for almost all of them. Most of them don't require any JavaScript. Some of them require JavaScript, especially like the picture element. But most of them just work with plain HTML. But then you have to produce those images as a pixel graphic in a program. So as I said before, an SVG is not just images. So usually, you think of images. It's also a web font format. So you have the Vof, TTF, OTF format. And also SVG is one of the formats you can use for web fonts. That's also quite neat because when you have something, let's say like glyph icons or like font awesome, you can just take the SVG format of the font and just open it up in a text editor. And then you see all the glyphs as a tag. And you can just copy paste the SVG out of the font. And then you might use something like Illustrator or other programs to just re-format the thing or colorize the things. I won't go into detail how to use it as a web font format because it should be obvious. It's also a very good replacement for web icon fonts in general. And I come to that in detail in the next slide, why it's superior to using an icon font. It's also a way to create image maps. So some of you might know from the old days there was something like a map tag with area text and you can have a picture and have some click of the areas. For that you can use SVG as well because you can link individual parts of the SVG. And they are also responsive and very sharp. And I also explained this later. And also you can use it as a container for CSS filters. That's something I only learned like three weeks ago and it's really weird what you can do with SVG images as CSS filters. So SVG as an icon font replacement. Why should you use images in an SVG format rather than an icon font? Which also like a font usually is a vector graphic. So they are scalable. But there are some issues with icon fonts in general. So the one thing is rendering. Because an icon font is a font, the browser might do weird things like anti-analyzing. Or like something like, yeah. Sometimes some browsers show fonts larger than others. So like surviving browsers, they used to make some text more bold than others, things like that. That doesn't happen with an SVG because it's just an image. And it just shows as it is. Then also CSS control. I mean, what can you do with an icon font? You can change the size. You can change the color. But that's it usually. You can't just say, okay, I want to have this part of the icon in this color and this part of the icon in that color. But you can do that with CSS and SVG. So you have those standard font properties. But you also have CSS for SVG. So every like on the previous slide, I showed you like the rect and circle and things like that. And you can just use a CSS file and using the rect or circle as your selector in your CSS file. And you can add classes to those tags in the CSS file and then style those things with CSS. And you can also do things like animations or hover states or things like that. Because it's just an XML file, you can add CSS properties to it. You can do very crazy things. And also like coloring different parts of the image in different colors. It's quite easy. Or having like a hover state with a different color, usually with an icon font, that's not easy to do. Then also positioning. When you want to position an icon font, you have to deal with things like line hate, vertical alignment, letter spacing, word spacing and things like that. So everyone who ever used an icon font and having issues, having it like vertically aligned to the text next to it, they know what I'm talking about. And SVG is just an image and you can just align it quite easily. Then there are also loading issues, which can really be a problem. Like there's the so-called cart headers. And that's when you have like the images from another domain, then your browser might block them if the headers in the response are not set correctly. They just block the thing because it might have some malicious code in it. So even like a web font can be malicious to your site. And like the content type is an issue. So if you don't have the right settings in your Apache or engine X and you send a web file format and you doesn't have declared the content type, then the browser might not be able to read the file. And then usually you use something like font awesome from a CDN. And when the CDN is down, your images won't run up. And with SVG it's just an image file and you usually host it on your own site. Then also like some weird issues like proxy browser such as Oprah Mini, they might not load it or users might have some overrides for fonts. Let's say some users, they don't like all those fancy web fonts. They're saying I always want to use Helvetica or Times on every website I see and then they would also overwrite your icon font and they wouldn't see an icon. And then, yeah, some might just block custom fonts because with an icon font you usually want to produce your own custom icon fonts if you don't want to have those 500 glyphs and you only use five of them. So then you produce your own custom fonts and they might be blocked as well because the browser doesn't trust them. Yeah. And with SVG even proxy browsers, for them it's just an image so they just load it or pre-render them. Then also semantics. So usually when you use an icon font, you use like a span or an eye attack as like font awesome suggests or you use some pseudo elements in CSS and that's really bad. I mean, semantically that's not what it is. It's not a span. It's not an italic text. It's an image. So it should be an image. And also that comes to accessibility. So let's say you have an eye attack with some text in it. So one symbol and a screen reader might read or might try to read it. I mean, there are some utf-8 spaces where you usually put those glyphs but you might put them in some other spaces and then a screen reader might try to read them, which is not nice. And as I said before with an SVG you can use things like a title or description or even like those area labeled by attributes to really make them accessible and even complex things like image maps. That's really nice. Then also the ease of use. So with an icon font you can produce your own icon fonts. There are some great online platforms where you can just produce your icon font but usually you use a very big icon font with hundreds of glyphs and just take some of them because for most users it's so hard to produce online. And then also when you have to add new icons you have to recreate the icon font and have to download it and upload it again. And with an SVG, especially when you're using data, your eyes are just adding another line of code. And also like changing something, like a color. It's quite easy. The browser support might be an issue. With web fonts, even IE6 supports web fonts. Maybe not all formats but they support web fonts, funny enough. And as I mentioned with SVG, it's not working in IE8 or in Android lower than 2.3 so you have to have some fallback mechanism if you really have to have those browser support. Like with image maps we once had a project. They want to have an image map but they had to have IE8 support because like it was a German governmental thing which not the newest versions. And so I had to produce a fallback regular map with areas like the old way and using a PNG as a background image. Which I found a script that auto generates from the SVG the area map which was quite nice. But it's more worked to be done. When you want to know more about SVG as an icon font replacement, last week I was in London at the WordCamp and there was a very good talk about SVG as a replacement on icon fonts and all the extra things. Like also things like animations and all that stuff. So let's see how you can use SVG for something like an image map. So here you see a German map and here you see some part of the SVG. So you have the SVG, the star, the viewbox. And then you have a G tag with an ID and then inside it you have a path that's like two ring and that's like the path. It's very long. And like here the stroke and stroke width and things like that. And then you just surround it with an A tag. You all know. But you can't just use ref and title. You have to use x-link colon ref and x-link colon title. But that's all you have to do. And then you have something like this. When you hover during it, you see the title and when you click it, you refer in this case to the sub page Turing. It's as easy as that. So when you have any SVG and you want to make some areas clickable, just surround that by an A tag using the x-link ref and maybe x-link title and then it's clickable. You should, like when you want to do it correctly, you should also add the x-link namespace. I think most browsers would still work if you don't add it, but just for completeness at the namespace also. And then to the last point, which is really, really awesome what you can do, you can use them as SVG filter containers, I would call it. So you have an SVG and you have maybe many filter tags inside. And you have an ID for every filter. And in this case, I'm having a color matrix. I don't know exact how the math behind the color matrix works. It's really complex mathematics. But you can use an SVG for many of those filters. There's also like Gauss filters or things like that to make something blurry. And then you can use them like in two ways. You can either use them when you add the SVG inline into your HTML. You just use like this selection. So you have the ID and you just select the ID. Or you can use an external SVG file and just reference it like the filter you want to use. And then what does it look like? So that's from one of the example pages. You have an image of a person and then you add some chromatic, monochromatic filters with some colors. And then you might have something like this only with SVG methods. So we had a project and they asked us to add like a blue scale over all the images when you don't have them. So I didn't know gray scale filters in CSS, but I was not aware of a blue scale filter. So my first intention was that's not possible in CSS. I mean, yeah, you can do it in Photoshop and you can send me this Photoshop file and tell me, just do it. I use this filters and I clicked here in Photoshop. It can be that hard in a web page. And my favorite was, no, that's not possible in CSS. There's no like filter or anything to do that kind of things. And then I found out about the filter in SVG images and then it was pretty easy. And you can almost do any like image manipulation you can do with some graphic programs. Maybe not all the things you can do with Photoshop, but really a lot. But then still you have to ask yourself, is this really something you should do on the web? So it might look nice, but yeah. But that's another story. And that's also why I called it, it's not just images. It can be something different. One thing I didn't mention, as it's an XML, you can also add like inline style attributes, but you can also import a CSS file. So it's not a link attribute. I don't know exactly how it, I think it's, they usually have this XML and I think there's something like XML style sheet. And then you can like import a CSS file. So you can just use a CSS file inside of the SVG. So if you have an external file, you can just load a CSS file. And you can also load a JavaScript file. And that's where you can interact with the SVG with JavaScript. So you don't have to use something like a canvas and paint something, you just use an SVG. Oh yeah, and by the way, I also learned you can, let's see, here you have like a German map with an image map and it's an SVG image. But let's say you have a satellite image of something. It's not an SVG, but you can still use an SVG for having the path and the clickable areas and just have the PNG file or the JPEG of the satellite picture as a background for the SVG. And then you define the clickable areas with an SVG and not with a like old map and area because they're not as easy to create as like an SVG with illustrator or things like that. Like here for the clickable areas. As you can see, it's a path. So like this path here, like the borders of Turingen, no, the ATEC doesn't have any like size, it's just defining something you can click. So like even in a normal page, now with CSS3 you can have shapes. So you can have a round shape in CSS3, which is not an SVG, but it's a round something. And when you add an ATEC, this round shape is clickable and it's only like this shape and not the spaces around. So the ATEC itself doesn't have any shape. So you just make this thing clickable. You just add like the x-ray graph to the path directly. You have to wrap it into an ATEC and then it's clickable. But it has the clickable shape as you see in it here. Like with the standard map and area, you can also create those shapes, but it's really hard and you don't have all the flexibility, like really tiny details. So it's really not as fun as with SVG. Yeah, as I mentioned a minute ago, you can include JavaScript into an SVG. So you can inject some JavaScript into another site. So you can have a cross-scripting attacks through an SVG, which can compromise your site. So that's an issue. No, it's there. As like with any, yeah. When you allow the user to inject some JavaScript, then he can compromise the site. So when you produce SVGs yourself, there's not really a big security issue. Yeah. If you control the SVG images, then there's not really a new issue you have to deal with. Yeah. I also find it hard, like in contact with designers, they usually give us a Photoshop design. And I always have to ask them for the logos as a vector graphic. So like an illustrator file, something like that. Because they don't know why I need them. And then I have to explain them, okay, I want to have a responsive website. I want to support retina display. So I need an SVG image. Just give me the SVG image. Or the illustrator file or the InDesign. Just any vector format. Or at least like a PDF. Something I can extract an SVG out. Yeah. Yeah, me neither. Yeah, for the data matrix, I don't really know how to calculate that. I read them a large article. I also have it in the sources. I didn't take the time to really read it. It's something like a blue, red, and green column. I think that's the transparency. But I didn't know what the fifth column was. And I also didn't understand sometimes they have it just in one column. Sometimes they have a diagonal. So I don't really know how to calculate it. But maybe there's some, like when you do something like that in Photoshop, then you can just export the settings. I don't know. There might be a way. Because I don't think that they just change the numbers and see how it looks like. But I can really tell you how it works. Yeah, they might do that. Like with the path and things like that, I also don't understand things like Photoshop or Illustrator. I know how to change little bits. But I also don't have a license on my personal PC. Like for Windows, I'm using Inkscape, which is okay to do some little things. But as I said, usually I use a text editor. So especially for cleaning up. So when you export an SVG out of Illustrator, it has a lot of comments and tags you don't need and attributes you don't need. So you really have to clean up those files because otherwise they are quite big. But also like an SVG is a text file and text files are really good in using G-SIP on them, making them even smaller. So when you have G-SIP enabled, you should also enable G-Sipping for the SVG extension. And then you have really small sizes. And you also can just delete all the line breaks and tabs and things like that. So as you would do with a CSS or JavaScript file, you can just use the same minification techniques to reduce the size. And on finding images like the German map, the best source is Wikipedia. Because also like the flags I used in the first slides, they are from Wikipedia. And most of the things that can be shown as a vector graphic, they have an SVG image. So usually when you go to the Wikipedia side of a country and you click on the image and then you usually come to an attachment side and there's a link original SVG file. And you just click on the link and you have the SVG file. And they're usually creative comments because like flags, they can have copyrights. You can just download the SVG. And they're really minified. There's not any additional comments or tags or things you don't know. They're really good quality. And then when you want to change some things, you use something like Inkscape or if you know Illustrator and how to use it, you use something like that. So even like when we have a company we work with and they don't have a logo as a vector graphic, I just see if they have a Wikipedia website and I just take it from there. They usually have the vector file. Yeah. Here I have some sources. I use for the presentation. Two are on accessibility. Two are on like fallbacks. And there's one about like base 64 encoding and how you could do it. And one is for icon fonts and the other one is for color filters. And yeah, that's it. And you can find the slides on my blog maybe tomorrow. So any more questions? Yeah, the question was if I have found any tools for creating image mess. I do have found some tools. I might add them to the sources. Yeah, you can just upload an image and then you click some points and it produces a path which is usually not as good as using something like Illustrator. If you know how to use Illustrator, I would recommend that. And also if you know how to vectorize an image. So you might have some image and you just vectorize it and then you have a shape. And then just we know of all the things like background colors and things. And then you just separate the shape and you have like a good shape of the thing you want to have an image map for. Yeah, but there are tools to do that. And usually when it's not something like a map with borders, it's usually okay to have some additional padding around. So at least as long as you don't overlap those clickable areas too much, it's okay to just have a rectangular clicking area over maybe a city or something like that. So don't overcomplicate the path. Yeah, the question was on filters, how you use them, how you group them, and how you address them. So I've seen some examples and it's just like also with icon fonts when you create an icon font replacement with SVG, you have a large SVG and you just have some different like tags and you like just define a filter. So let's say here if I have monochrome filter, then I might have another filter calling ID blue scale and things like that. And then you reference it like this. So you can have a large SVG file defining many filters and using them is just with when it's in line just referencing the ID or referencing an external SVG file plus the ID and it doesn't have to be on your own side. So you can reference an SVG defining filters from some external resources. No, the inline filter would be added to like the containing diff or something like that. So you have a diff and inside the diff you have this image and I'm defining the filter on the surrounding diff and the filter is applied to all the content inside of the diff. So it's not only directly on the image, it's all on the whole container just as any other CSS filter. And you can also chain them like filters are chainable in CSS. So let's say you want to have this blue scale I talked about. We added a blue scale to an image and it really doesn't look nice because it was like a real picture with colors and then we used the grayscale filter comma and then the blue scale filter and then it looked it had better contrast. So we can even like chain those filters and having some very fancy effect. Yeah, if they don't overdo it, yeah, any other questions or has anyone has experienced with SVG on client projects and issues? Yeah, that's quite easy. The example I show you here is responsive. So all you have to do is you have the thing called view box. It defines the size and then you just have width and height 100% or 100% in author auto and then it's just resizable including the clickable areas. So this image map is fully responsive. I mean, I don't know if it's usable on a mobile device because the clickable areas might be too close to really click them. So in this case, we also have a link list of all the of all the states. So you can just click the links instead. But it is responsive. Yes. Usually, I mean like in the in the first examples, I defined a rectangular. So I have an SVG with 900 by 600 pixel and that's like the size of the individual parts. But that's on like normal scale. So every SVG image has a default size, but then you can just scale them. That's also an issue with WordPress. So I showed you how to use SVG and that will all work when you use them inside of your theme and just upload them with your theme. The problem is you can't upload an SVG file into WordPress straight away. It's not allowed. So the SVG extension is not allowed to be uploaded because it might contain JavaScript and it might compromise the site. There's a filter to add additional extensions so you can upload an SVG, but then there's a problem. You can also see them in the media library, but when you insert them into your post, it has a size of one by one pixel because it can't determine the size of the SVG itself. And so you have to change the width and height attributes to fit the original size. There are some plugins to fully support SVG inside of WordPress. I haven't really tested them a lot. They might work, but usually you use them for your theme. So using them inside like posts, there's some more work to do. But because there's the issue with JavaScript, I don't see it in core natively in the future. Maybe with that, if they have some sanitizing, stripping out all the JavaScript as they do with the post content, that might be something they add, but I'm not really sure if it's happening in the future. I mean, I added a filter which allows uploading it through the media library, and then I added just as regular, and then I changed the one by one pixel to the actual size. If I really use an SVG inside of a post, usually I don't use them in a post. When you write a blog post and you say insert image and then you pick the image and say insert into the article, then usually it adds the size of the pixel graphic, but it can calculate the size of the SVG. So it sets it to one by one pixel so you don't see the image. So you have to go to the text modes and then change the attributes. Yeah, then it works. But it's also very important for themes and logos and things like that, and usually you upload them through FTP or whatever or Git, and you write the code anyways. But you can also use them for the post featured image and things like that, but then you have to have some workarounds. Because the function that renders the thumbnail also doesn't know how large the SVG images. So it's not as easy as it should be right now to use them in the content of your website. But for the theme it's easy. It was like the text on the street, or the street, or the street. It was a typography on top of some other part of the text. Yeah. There are also some few cases where using an SVG is not the best thing to do. Like when you have social icons, and they are smaller than let's say 20 by 20 pixel, then using like a blurred PNG file, they might look better on a desktop PC. Because an SVG, the browser has to decide, do I show the pixel or don't I show the pixel? So they don't like blur round things. So like for us, I have a mix in saying, okay, when is the pixel ratio of one, use a PNG file, if it's a pixel ratio of two or more, use an SVG. So for very small sizes of the image, with very like the Twitter logo, which is not a very easy thing, like WordPress or, yeah, no WordPress is more complex. Like the Facebook F or things like that, they are quite simple, but like the Twitter bird is quite complex in the path. And there might be cases where the PNG file looks better on a desktop PC than the SVG. But usually when it's like a little bigger than it's perfectly fine on desktop, and it's awesome on like regular displays. Any more questions? Yep. Yes. Not necessarily. I mean, you can not only add like pixel graphics, you can only add text, just plain text. And you can also then use web fonts on the text. I mean, it depends. It's not as clear when you upscale because it's a pixel graphic. But if you set the width and height and inline styles correctly, and they, I mean, it's just an XML file. So just as you put an image into an HTML file, having it responsively scaling, when you do the same, including them into the SVG file, it's also like responsive. You mean when you upscale with some JavaScript VR? Or you can use like an image tag with a source set, and then you have different sizes. So it's just an image tag inside of a SVG. That's perfectly fine. Yep. Yes. Yeah, usually when you have an SVG file, as every XML file, it starts with this declaration. And a file should only have one of these declarations. And usually you have the declaration if you're using XHTML, you have the declaration in the HTML file. If you use HTML5, you don't have it because it's not an XML format. And when you add many inline SVG images and you add the line, I mean, technically the browser shouldn't break, but you just, yeah, should remove it. And instead of that, just add something like a title tag to add a description. So you shouldn't just copy, paste the code of the SVG and just put it inline. But I don't think that browsers would care too much about it. Okay. Thanks for your attention. And if you have any more questions, just leave a comment on my blog or ask me today.