 Well, let's start here. I titled this presentation Next Generation Graphics because it's catchy, but the fact that this is going to be much, much more boring. We're going to talk about Mathematica Expressions in XML. Please lock the doors. You can escape anymore. Did you know that SVG was created in 1998? Yeah, so it's pretty old technology. It's nothing new, next generation thing. So I will present myself. Me llamo David Corbacho. I'm from Malaga. I moved some months ago to London, but I have been living in Finland for seven years. I'm happy to see here some familiar, thin faces. And at this climber, I'm not a designer. I'm talking here about SVG code. I hope if some of you who here is designer, oh, yeah, like 20, 30%. So I hope that you can take something out of this presentation, but mainly it's going to be about code and not so much about designing tools or I can talk closer now better. Thank you. This is a structure I'm going to follow. First I will start presenting a bit of SVG for if someone is not familiar with it. Then the past, the present, and the future, and in the middle a bit of how Drupal and SVG are working together. Well, this is a basic SVG element. You can see that it's just XML, line element with XML attributes. It draws the line from the coordinate 0, 0 to 100, 200. So I think you can say that it's human readable and it's pretty easy. So I'm going to skip all these SVG basic concepts because, I mean, you can read this on Internet. It's not anything. And let's go through this very interesting element, the path element in SVG is the most powerful one. The rest of the elements I just passed through, they are just shortcuts. But under the hood, everything is a path. So the path element, the D attribute basically are commands and coordinates. M means move to, so it moves to 100, 100. Then it draws a line, L is for line, to 300, 100. Then another line and set means that close the path. So it finishes the element. This can be a bit compressed because, I mean, if we are repeating commands after commands, just drop the L. You don't need it because it's repeating again the same command. And another interesting thing is that when the command is uppercase, the coordinates are considered to be absolute. And when it's lowercase, it's relative to the previous point. So this one is equivalent to the other ones. You see that L is lowercase, so then it moves relative to the previous point. The commands are line, move, curve. And there is some basic, some other ones, but pretty much everything is like that. Okay. With these instructions, I give you, you should be able to visualize what is this, in your head. It's not that difficult, just imagine. Yeah, it's a basic droplet cone. I saw this tweet some months ago. I mean, yes, you can hand code SVG. I imagine myself hand coding circle, polygons, but that thing that we saw, I don't think that's... But then this guy posted this some days later. I thought, oh my God, I cannot believe how amazing is that. Someone writing hand code path elements. I mean, I cannot do that. So I suppose that the rest of us, we just use SVG editors. You need to use a designing tool because this is complex SVG paths. So probably you are already familiar with these tools. InScape is open source, and they aim to support fully SVG, like is there native file format? They try to support everything except animations. Then Adobe Illustrator, probably most of the people use this tool, has great user experience and sketches the new guy. But the problem is that you export SVG from Illustrator and then suddenly it's bloated. It has a lot of metadata. Things are not needed. It's a pain from the point of view of a coder that, hey, you can skip all that crap and just leave the neat SVG code that is needed to represent the graphic. So I recommend you. The first one is an online tool. It has these settings. If you leave the default settings, normally it will reduce the size of the SVG, like 35% or 40%. It's pretty good. But of course, if you use a lot SVG, then at some point you want to automate it. You don't want to do this manually. So the second tool, you have many types of ways to automate it depending on your workflow. So why SVG? Why you don't use... Why you would like to use SVG? I think the main reason is that vector graphics are always crisp. It's not only when you use a phone, a smartphone that has high density screen, it's also when you use a normal screen and you zoom in the browser, also the graphics get blurry with GPGs. So I know that that's not an ice cream. I don't know who put the label. But if you go to that path, you will see that. I don't understand it. Why SVG? SVG is scriptable. That means that you can put scripts in your SVG. SVG has a SVG DOM. It's similar to HTML DOM, but not totally the same. And that's the part of SVG that makes SVG interactive. You can attach events to SVG elements. You can say when user clicks this, when hovers, etc. You can play with JavaScript. At the same time, SVG DOM can be the bottleneck of your... It can be a performance issue if you draw thousands of SVG elements. And some people prefer... I prefer to use canvas because it's more performant. But you lose the ability of using something like... You know, like normal events that you're used to do in HTML. SVG can be animated. You can use CSS, JavaScript, or Smile. That is something... It's like animations in XML. It doesn't sound so fancy, and it's a bit... Only you can apply to SVG. So... Some browsers supported by Internet Explorer are not, and Chrome decided some months ago, even they have implemented Smile, they have decided to drop it deprecated. They are aiming to something more universal, like web animations that you can apply not only to SVG, but also to HTML. This is something I found interesting. Most of the tools use XML attributes to style it. For example, fill is the color, but also you can use just CSS because SVG supports CSS. So... This is equivalent. You can drop the fill and put it in a CSS class. And this is a way of optimizing also SVG files that these automated tools, they don't do normally. Imagine SVG with thousands of blue circles. If you put in every single circle, fill, fill, fill, fill, so it gets bloated. So you just can put a class and put the styles in a way. So the same way with HTML. Another reason to use SVG is accessibility. It has a title tag and SVG support text. So that text is going to be selectable. It's going to be readable by screen readers. And you can add area attributes, like HTML. In that blog post, it's really good analysis of what accessibility how it's compared from browser to browser. So if you are interested in this topic, please read more there. For performance issues, SVG is really good compared to normal PNG or GPG files because it really has a small size. When Google released the new logo, someone said, hey, let's try to make the smallest possible SVG. And only 300... almost 300 bytes, they squeezed. It's possible to represent the Google logo. And then SVG, as you saw, it's code, it's just text, it's instructions for the browser how to draw it. So it's text, so it can be g-shaped, like HTML, so that even reduce farther the size. So it's a win-win. Okay, now I've explained a bit the basics. Let's go... I will try to explain a bit the past of SVG. SVG, like any other web standard, has been involved in a lot of politics. I think that understanding the politics and the history of SVGs is going to allow you to understand better SVG and how to use it now, et cetera. SVG started... It's a funny start. Six... The W3C standard, they received six competing submissions. All of them, they wanted to do vector graphics on the web. And they said, well, we have six, let's just create a new one from scratch, trying to take the best parts of each one. And especially heavily inspired on the Microsoft standard, VML. They tried to put everything together. And one of the specification writers, he said like, well, in that time, it was a lot of pressure from the companies like, no, I want to include this, and I want to include... So finally, SVGs became quite a monster. It's quite bloated. There are so many features that it's almost impossible. I wouldn't have time to go through everything, single thing that SVG can do. After SVG 1.0 is released, let's say the SVG fall in a cryogenic tube. I mean, the SVG specification hasn't changed much in all this time. 19% of how you write SVGs is the same than 15 years ago. When SVG was born, browsers didn't support it. The only way that was possible to use to see SVG on the web is by installing a plugin by Adobe. And it was really nice because implement, I think, almost 90% of the standard already. And many people were excited. Okay, this is going forward. SVG looks cool. It's based on XML. In that time, it was like super hype. I remember for a second that Internet Explorer had 90% of the browser market during those years. And Internet Explorer didn't want to implement SVG. So almost the only possible way to reach the audience, it was installing the plugin. Chrome didn't show up until 2008. Almost at the end of the graphic. A bit later, the SVG workgroup tried to adapt to the new trends and they released a SVG 1.1 that didn't introduce anything new. They just split some parts of it and they say, okay, let's create the tiny SVG and the basic SVG. And they are for mobile phones. But of course they were for mobile phones of that time. Smart phones nowadays, they implement the full specification. They are much more powerful. Let's say that we can forget about this, that this happened because it's not useful anymore. All the devices are powerful enough to bring SVG. So still, from my point of view, SVG is frozen. Still it's the same. The competing technology in the time compared to SVG was Flash. Adobe bought Micromedia and turned their back on SVG. They stopped the support of the viewer and they focused on Flash. Internet Explorer didn't support SVG, so let's say that these are the dark ages of SVG. Other browsers were starting to implement the SVG slowly, but if you are a developer and you cannot, you want to use SVG but it's not supported anywhere, why you're going to support? You cannot do much. Most of the browsers that were focused on these browser wars are trying to compete and they have to pick their battles. SVG always has been a second citizen on the web, so people just, browsers just focus more on the HTML, CSS and JavaScript and trying to make that performant and so SVG sadly fall behind. Again, more politics. A revolution happened to HTML the web developers and browsers, they started to work on HTML5 and CSS3 and although the W3C was trying to push XHTML, you remember that time, well formatted HTML and all that. By SVG was still frozen in their own bubble. SVG was still XML. The only sign of light in that arc was probably the library that lets you render SVG in browsers that are supported and VML in Internet Explorer. So it was a way of starting to make SVG across browsers. And finally, Internet Explorer started to implement part of SVG. This is huge news. A second edition is released but just small erratas and clarifications, no new features. And let's say that Apple has made the biggest impact on SVG in these recent years because first it blocked Flash and iPhone iPad and second they released this retina display and most of other manufacturers started to do retina displays and Android that was a mistake from Google. They intentionally left SVG out of Android 2 because they wanted to save one megabyte storage space on the device. And it was and they didn't implement it until SVG 3 and 4. So luckily today Android 2 is just a tiny portion of Android market. Let's say that almost all Android supports nowadays SVG but in that time it was like it slowed down the adoption of SVG. So we are in a time where we need graphics for high density screens that works in all modern browsers. So here is SVG. Suddenly SVG was born again. Now everybody finds SVG is perfect for this situation. So almost every browser SVG is not perfect still. But let's say, let's see how it's used today. This is the today's support in the browser. If you've seen Kana use you see that 95% of the people support the browser support SVG. So SVG 1 is like a new old thing. So, you know, it doesn't matter if they try to sell you as it's the new shiny thing. No, it's old. It doesn't behave as expected sometimes. So I like to use this analogy is SVG is both markup and image. And it depends how you use it you get one feature or another and this probably is how you want to see SVG. You can use it as an image with the tags image or like a background image in CSS. But it's in the way that you cannot you can access to it through scripts or it's not the full potential. And then if you want to use it the full potential then you use it with this especially object it's quite popular to use it. And when HTML5 arrived they bring SVG as like a first citizen of the web. Now you can put SVG in line on the markup and it will work before you have to use some kind of strange tags to it and now you don't even to put the XML namespace just put it there and it will work. So SVG is a parallel I'm talking from my experience some months ago I started to work with SVG and at the beginning I thought well it looks like HTML it has CSS, JavaScript so it looks really familiar but then little by little many other people they discover like glitches or well this doesn't work as suddenly as so it's a bit of a pain sometimes for example if you have two circles one on top of each other you might think okay I will use the CSS set index to see which one overlaps the other one but you cannot do that it's not supported the only the way that you can define the order is by the order of the tags if the circle is declared first behind but they fixed this in SVG too I will talk more about this in the later in the SVG future so in CSS you cannot declare every single property that you might think you only can do colors or style properties but not structure properties so it's a bit you cannot declare width or height or many other parameters that you are used to do them in HTML but SVG consider two different properties styles like one for structure another for so it's a bit limiting this only happens when you actually open the SVG as a standalone file on the browser you see the G is uppercase XML say no you have to put it on you have to case sensitive like that there is many you have to produce perfect XML that's not very you want to use SVG a bit like HTML it doesn't matter it's perfect you don't want to break suddenly there but this is not a problem SVG markup you embed it on HTML but anyway it's worth it to check it the same with the CSS also JavaScript has this kind of glitches for example I would like I want to make it a bit interactive I add a class to SVG and then changes for example the color but you cannot do that the SVG DOM is different than HTML DOM so jQuery is written for HTML not for SVG and they are not planning to support it but in this case they are going to fix it in jQuery 3 because it's just a tiny change for them so but it's a pity that you cannot use the normal tools that you are used to in HTML to do it in SVG the same with commands like a pen or this is not working you will see there is 3-4 workarounds but they are not pretty this is funny well I think the image explains as you see this in Internet Explorer CSS transformations are not still supported on SVG so from my point of view every month is like a new technique of combining how you can combine SVG HTML plus CSS and if you add this JavaScript it's like SVG adds a new dimension of how you can combine things so I mean sometimes we have in the front end so much possibilities of how to do things SVG adds a new way of doing things in every single way so it's really and can I use it's just a bit of the basic of SVG this browser supports SVG but what about this technique what if I use this CSS with this background image with this fallback node so it's too much I think that thanks God there is a small group of SVG experts that are out there trying to spread best practices they made real research they they have they fill bugs against browsers so they can fix all these little glitches and funny thing is that most of them are women and I think I find it is very interesting like how much diversity is in the SVG community and I think that's something that many other communities can learn from also the SVG working group they are really nice people they are they want to SVG to succeed and I've actually mailed with some of them and they are really nice they try to push SVG forward and they are listening to developers and a special mention to Chris of course you know him from CSS but he also tries to push SVG forward he has a lot of really good articles on SVG and he has this platform CodePen where you can play around with SVG and many people have cool animations and I think that if you see SVG like from the boring point of view like okay XML this is boring it's difficult to learn it's overwhelming if you see SVG as a fun thing to do you try things you try to do animations you will learn it faster this is just a couple of demonstrations of CodePens where people is trying to make fun things with SVG this is with using another library as I said the smile was deprecated so it was one way performant way of doing animation as SVG and it was already implemented in 1998 when we were downloaded websites with our 56 key modems these guys are already implemented this and Chrome implemented Safari but sadly Chrome decided let's deprecate this because let's trust on web animations and let's forget about the smile so from the point of view of SVG Chrome has been a lead okay this is a backstab but let's think about the rest because the smile after all you can only apply to SVG but if you want to apply animations to HTML so they wanted to to expand animations to every single thing HTML and SVG so as I said before Internet Explorer doesn't support CSS transformations and some things that you can animate so most of the people say okay then I will use a javascript library but javascript libraries normally are quite big because they have to support this SVG DOM and it's complicated so normally they can add almost 100 kilobytes to the page alone but still it's a great way to learn SVG if you need a lot of animations it's fine so what people do now is use SVG for the log of the website because and forget about the the scriptable just use SVG as a dead cat for icons and also it's being used a lot for charts, infographics and a new trend javascript journalists New York Times probably you know they have really cool animations and graphics at the same time that you read the articles and these are three a couple of libraries that they led you to to make animations as I said jQuery is trying to support just HTML HTML DOM but SNAPJ SVG tries to support just SVG this is done from Dimitri he's from Adobe as I told you before Adobe turned their back to SVG but after flash being dying they have again trying to support SVG and they are trying to create tools and frameworks to to make easy again work with SVG it's a bit more simple way but you see how easy it is the top graphic is created with these instructions it's one of the smaller libraries that you can find and of course the 3GS is really cool I actually started with D3GS to learn SVG so it's a very nice way to learn SVG playing with it and it's the really library that you should use if you are planning just to use that you don't have to imagine that you have to create manually all those elements so they have this kind of layouts for you that you just need to fill and they have their own way of supporting events instead of jQuery you use D3 for what happens if user clicks here etc yeah try to do that manually it's really cool Drupal 8 as you know they drop support for Internet Explorer 8 so then it means that we can use SVG in Drupal because Internet Explorer 9 already supports SVG so that means that the Drupal front and people started to look into SVG as an option to load graphical assets you know the toolbar that you see in the Drupal 8 is is using this library of a Drupal developer and this there is about 70 SVG icons from this library in Drupal 8 core you can use them and another place where we are using SVG is in the logo of in the first row you can see the SVG logo and the second row the old Drupal 7 PNG logo you can see how it's more crisp the image in the top I was really happy that I could contribute this is probably my biggest contribution to Drupal to create this SVG logo it's a bit different from the normal Drupal Drupal logo because you need to put certain transparency opacity to the background because it needs to work well in every single background you know that you can customize the color background in the theme more than and other people contribute this okay let's switch to SVG the feed icon and the discussion okay what could be a good SVG standards for like we cannot just accept what Adobe Illustrator outputs because it's a lot of crap so we started to discuss about what is a good SVG guidelines for next contributions like everybody follows certain guidelines still this is a document on work but I think it's very interesting not only for Drupal people but how a set of rules of how is a good SVG from the code point of view and the second one is a similar project and you can learn a lot about I don't have time to explain every single thing here but if you go there you can see okay if you're sporting from Illustrator you can use these two to simplify the path so the size is smaller and many interesting techniques so Drupal 7 didn't have SVG and now we have 79 most of them as I said they are from the toolbar so when you install Drupal 8 load the front page you will see these there are about 17 requests and I feel that that's a bit ugly it shouldn't be like that of course this is only for administrators but the images are going to be captured by the browser but I think we should start to look into including SVG as alive cats let me say so in a way that you include only one and you can use certain techniques like SVG Sprites and use the full potential of SVG I would like to work on that if you want to join me during the sprints to try to make Drupal 8 support better SVG new techniques please join me the guys are real life digital they told me yesterday this really cool sandbox module that you can use nowadays for Drupal 7 it's an image formatter and provides automatically PNG fallback so maybe you are interested to use it I would like to highlight something SVG is like a mini application it has scripts so it's safe when it's used as an image but I wouldn't trust you shouldn't trust users to upload whatever SVG files because it's like a Pandora box if you put that SVG they can use it in malicious ways so this presentation is really nice to see how SVG can be used in the wrong way by attackers nowadays Wikipedia is one of the only few sites that let users to upload SVG files and they pass the SVG through Sanitizer but still it's not 100% safe always there is bugs and this and we are very used to sanitize HTML but SVG is a new thing so still well, it's not a new thing but we are not used to use it in this way so still there is work to do there and always that you use you let users to upload SVG you should be really careful SVG the SVG working group they have realized ok SVG now it's alive again people is using it and we need to adapt it to the new times has been 15 years in the fridge to get it out and let's try to make it easy to work so at the same time CSS has been taking inspiration from SVG they have filters so they have started to work together and they have decided to split SVG if a part of SVG can be useful for CSS then they work together most of the cool new stuff of CSS 3 many of them they came from SVG and people say this is a new thing, no someone invented in 1998 so it's kind of eye-opener so all these specifications are independent SVG is not anymore one single thing and SVG 2 are working really actively to get this out of the door very close and browsers are not waiting that this SVG 2 is ready they are already starting to to implement it so it's difficult to track what is implemented what is not so I would recommend you to follow best practices and keep reading SVG news to see what's the best standards but definitely SVG is changing now in these three years much more than what has been in the first 10 years of the of the market yes so they are trying to put all together and make it easier to work this is a document where someone said they start to accept SVG wishlist so people can put their this is a bit old document and most of this is being implemented already but it's interesting that you can see there all these little glitches that they don't work as expected if you are hardcore fan of SVG you can follow the specifications in all these places the editors actually they are working on Github so maybe it's even easier to follow through the Github commits and see what is going on so as you have seen during this presentation not pretending SVG's rainbow and unicorns working with SVG for me has been both a pleasure and a pain so I hope that you find SVG interesting and SVG is here to stay let's not I don't want that it comes another new private thing like flash now we have SVG it's open standards and it's in every browser so let's get the best part of it and let's use it and if you find ways of how to do cool things with SVG then share the knowledge if you find a problem fill bugs in the browser implementations and here you have some resources I found useful Dimitri is really funny guy and say if you don't know SVG you can call yourself a web developer call yourself a web enthusiast and Saraswajdan publishes a lot of really good articles she has been a reference on SVG during this last year and couple of days ago she earns the net awards best developer of the year it's really inspiring the way she's passionate about SVG and share all the knowledge and helps everyone so please remember to vote this session please if you don't vote the sessions then they cannot improve Drupalcon in the future so to give a bit of feedback always helps to get Drupalcon better thank you questions? could you go to the microphone here in the middle are there any tools to help with automated testing of SVG for example if you had a hierarchy of taxonomy view done in SVG where you could drag it around can you write a B-HAP test that says are my taxonomy elements in the SVG XML? I haven't heard anything even remotely similar so I think that this is a situation where you can see that SVG we're starting to use it like a new thing and support almost anywhere so you have to come up with how do I do this and try to share the knowledge but I never have something like that so I can help you it will be interesting to have it two questions one about icon fonts and SVGs is it better to use an icon font in terms of performance or SVGs and the second question is spriting is it already supported because I tried it a couple of times but it just didn't work really good questions both are especially pain points in CSS tricks there is a really good article that is icon fonts versus SVG and the conclusion was SVGs much better it works better across browsers you don't have problems of fonts maybe the font is not loaded or can have suddenly a strange character instead of the actual graphic so SVG especially nowadays is so well supported that there's no reason to use icon fonts but I understand that has been so much libraries of icon fonts that is almost easier to use icon fonts because there are more maybe but the new the best way is to use SVGs and your second question was SVG Sprites I'm really excited about that idea because SVG lets you to say it has like an element that is called definitions and there you put your SVG but it's not displayed and then in the actual outside of that definitions then you start to say use this element that was defined so then you don't have to repeat yourself it's quite trick quite clever trick so answering your question internet that's so difficult because it's one of those points where there is so many ways of doing it and you cannot see basically anywhere like okay what browser support this technique it's like you have to do it yourself and you cannot test every single browser except especially the mobile browser so so again I will try to find some really good article of Sarah Swaydan or CSS tricks where they are all the time trying to find out what's the best practice and hopefully that answer your question some other question this tiger was created I think in 1982 and later on was converted to SVG it's used many times as a symbol of SVG alright thank you