 OK, hi all. My name is Fran. I'm a Spanish from Elizabeth. I'm a Drupal developer. I started to work with Drupal 5, so it's been a lot of time. Yeah, I work for 1x, an internet company. You can find me in Drupal or in France, Eva. OK, my Twitter is Fran, please. You can download the slides from there. And also the link is in the previous slide. You can download from Twitter. Yeah. So hello, welcome, everyone. I'm Alinda Kovac-Stankovic. I'm Hungarian, but I live in Frankfurt with my husband and our baby is all the way, also. I'm a front-end developer. I was formerly an accountant, but I found out that actually coding is much more fun. So since it's really true. So since three years, I'm working at 1x Internet as a front-end developer. You pass. OK, we work for 1x Internet. It's a digital agency based on Drupal development, but that's not all. We also do react development, IT, maintenance, online marketing, strategy, all the things. We're based on Frankfurt, but we are working from different countries, Spain, Brussels, Germany. Also, where else? Yeah, I think that's all. And the difference here is, OK. What are we going to cover here? Can someone tell me here what means SVG? Scalable vector graphics. Yeah, we're going to cover that topic. To go through three main parts. We're going to do a brief introduction to SVG images. We're going to explain how to use SVG images and then show three examples of how to use SVG much with Drupal and do some blazing in animation things. But first, I'm going to show you an example. With the goal, I think we're going to get at the end of this session, and you're going to be able to think how to do that. I'm not going to go through this directly, but you're going to have the basics to do this thing. OK, let me show you. Where is the mouse? Yeah, here, sorry. OK, this is an example. OK, so it's hard. So yeah, in this example, you can see a guy with a... Oh, I had to move it. Yes, here, sorry. Did you see now? Yeah, OK. So yeah, in this example, you can see a guy. OK, he looks really bad. But yeah, you can see a guy with a teacher, a background, whatever. So yeah, you can change the color of the teacher. OK, did I change it? Yeah, you can see. So yeah, we are changing dynamically the SVG field color of the teacher. OK, and we got also our raster image in the background. OK, and we're using SVG here. OK, this is a pretty simple example. But yeah, you could do these cool things. OK? Can you do it louder? Sorry, is this better? Yes. OK, sorry, thanks, thanks, buddy. So yeah, we're going to be able to achieve these kind of things. OK, you will see more cool something later. OK, going back to the presentation. OK, let's start working with SVG. So yeah, we're going to start comparing SVG images with raster images. OK, so yeah, the advantages of SVG images are, I think, the most important three. They are scalable, they are resolution-independent, so we can increase and decrease the size without lose resolution as we have with raster pictures like PNG. If we increase the size, we're going to lose the quality. OK, and we got the pixelated images. So with SVG images, we don't have that. OK? Also, it's human readable. That means that we can easily read the markup. OK? Yeah, I think that will happen with PNG file, in some way. OK? What else? They can be manipulated in the browser. That's also because we can change, we can do things before at the final version only. OK? So yeah, I think everybody in this room opening by mistake the PNG file, I'm pretty sure. OK? You get this thing, but comparing with SVG images, you got this. It's nice. OK? I think it is pretty good. You can understand what we got more or less. In this example, we are showing a smile face. OK? I would like to comment one, I think, the most important attribute here is the view mode. OK? It's composed of four numbers. The mean, x, mean, y, width, and height. I define the coordinate system of the whole SVG image. Image, OK? So you can also see that we got other object, like circle, path, whatever, that also are using coordinates. But those coordinates are based on this main coordinate system. So they are, the whole thing is the view mode attribute. OK? So in this case, the first one, the cycle. Let me point it here. Oh, awesome. You can see here, this is the coordinate system, OK? We're defining. Here, we're using a cycle where we're defining where we put the cycle in the middle of the whole thing. It's 200 by 200. In the center of the circle, it's in the middle of the whole SVG here. And we are getting a radius of 78. So we got, shoot, this cycle. OK? It's filled with yellow, as you can see here. OK? The other cycle are the eyes. OK? By the four, they are black. OK? And the mouth is the path. OK? The path also is based on the day. The attribute is also based on the coordinate system. But it's hard to see how it's related. OK? It's easy with the cycle. Next one. OK, we can also style SVG images. OK? There are many attributes we can use. But here, I'm commenting only four. I think they are important. They fill, stroke, stroke width, and opacity. We can use X code, color, gradient, patterns, whatever you want, like CSS. OK? So in this example, we are creating a gradient here in the top. And then we're using it to fill the outer circle, as you can see here. OK? We're defining, we're using it here to fill the stroke with a width of 10. OK? And then in the inner cycle, we are filling that with an orange color. OK? As we can see here. So yeah, this is a good example of how to use attribute. But that's not all. We can also use a style attribute, as we use with HTML tags. We can use there the fill, the stroke, whatever we want. OK? Yeah, also, we can target objects with classes and IDs. OK? The same as HTML things. OK? Here, we have an example where we are setting. We are filling with blue, this cycle, and this one with whatever we want. This could be something strange, but it doesn't matter. OK, now it's my colleague's turn to continue. So we can also animate SVG elements. There are different ways to achieve that. One is that we are just targeting the elements with the by classes or IDs. And then we are just manipulating them with CSS or JavaScript. The other option is to use the SVG animation elements. For example, the animate or set. Or there are also several other ones. The disadvantage of this is that they are not supported in Internet Explorer. So it depends. I'm worried. I'm worried. It's OK, because if your project you have to support Internet Explorer, then you can bridge this gap using CSS and JavaScript. So with JavaScript, of course, you can manipulate every attribute of the SVGs. So we can see on the example that we are defining an animation inside the SVG shape. This is one way to define it. The other way is that we can define it also outside of the shape. But then we have to just add the ashref attribute to reference which element we are going to animate. Here you see that we are just animating the x coordinates from minus 100 to 120, and with some duration and an indefinite loop. Thanks. Sorry, I wanted to mention one more thing regarding the previous slide. So there are certain things that we cannot achieve with CSS. For example, there is the path element, and it has a data attribute and like this d attribute. And there are the numbers which are actually defining this d attribute. The numbers are defining the shape of the path. And this can be animated with the SVG animation, but not with CSS. So yeah, and there are also some other. Yeah, to fill the cap. OK, we got there. OK. So now we are going to use some examples about what you could do with SVGs. Wow, it's like not very good visible. Yeah, OK. You can like, ah, much better. So they are simply SVG icons, and the author of this code pen is using CSS animations to just animate the shapes inside. So we are already published this slide, so you can just check out the code and browse around how they are exactly done, so we don't exactly go into the details how these examples are implemented. Other examples is, for example, this nice menu expanding. So you can just implement something like this. There are different versions of it. It's pretty cool, I think, also to have some visual effects. This is also purely done with SVGs and CSS animations. The next one is some working shapes. So here they are combining the CSS animations with the SVG animations. So here you can see that here is the animate tag, and they are actually doing what I mentioned before. It's a path, and they are, whoop, what happened? Ah, OK. I don't know. No? I don't know. OK. So and then the paths are animated to achieve, like the values of the paths are animated to just achieve this working effect. And this example is very similar to the very first one we showed with the t-shirts. So we use a raster image. And then there is an overlay with an SVG for which we can change the colors. So it looks like the whole sofa is changing color. We can also use text in SVGs to actually achieve some nice effects and nice animations on them. So this is also just done with CSS animations. The other one is also a nice one with some video background. So basically, you can see here the markup how it looks like. And you just define the position where it should stay within your SVG. And you can apply anything like any colors, or masks, or filters, or anything you can apply to any other SVG element. We can also use filters. So you can define them within your SVG. And they are usually manipulating the colors, or for example, giving like blur to the element. And you can reference these filters by the IDs. So basically here we are applying the above defined filter to an image, a raster image, with the filter attribute. And below you can see that actually you can also apply filters with CSS. So you have to keep in mind that if your SVG is not inlining HTML and you are using CSS to apply it, you then have to add the pass to the file before the ID hash. OK. Sorry before I go to the next one, I have to say that after 20 years I found a useful example of any algebra in using a matrix I never used before. So also I can use it to draw. Somewhere. So next one. Yeah, so as I mentioned also before, and you saw in the examples, you can just use raster images within SVG. This is how you define it, so just like referencing the file. And then you can define, for example, attribute some filters. One thing we would like to mention just very quickly is that sometimes when you export the SVGs from the editor, you have a lot of metadata, some useless attributes. You just like actually you rather remove because if you have to work with it afterwards, it's quite difficult to read the file. So just make sure you check the file and you remove, for example, it happens that you move an element within the editor and it gets a transition instead of adjusting the X and Y coordinates. So just to make sure that it's easy to work with the file afterwards. So SVG is supported in all the major browsers, also in Internet Explorer, which is great. Well, it might happen that some attributes, some functionalities are not 100% working completely, but there are pretty good polyfills to apply to just solve this issue. So how do we include the SVG in HTML? We have several possibilities. One is to use the image tag and just reference our SVG image in there, in the source attribute. The backside of it is that then you cannot manipulate any attributes, cannot change colors or apply any animations to it. So if you have to actually do something like that, then you have to either hard code it in the HTML or there is another option, the objects element, where you can reference your SVG and then it doesn't load all your SVG into the HTML, but it loads the SVG markup into the DOM when it's loaded. So you still have the possibility to change the attributes with CSS and JavaScript. Yes, please. Sorry, could you please open the doors open, please? Thanks. Thank you. So how do we use SVGs in Drupal? We can either hard code it into the tweak templates or we can use the include function of tweak. So that's pretty handy and it's much more clean to use the include function. One thing to point out here is that the team name points to the team's template directory. So relative to that, you have to navigate them to your assets. So yeah, we're going to continue showing some examples. This step here is only for reading the slide but I'm going to comment in a live demo. So going back, we get a side. Let's meet with views. OK. In this example, I'm going to show how we got icons displayed in a content type, so we are adding animation to the icon and we get colors. So what we did was create content type, here, where we are referencing a paragraph. You can pick up an icon that is an SDG image. We can pick a color. This one is sample and we can set the title. Whatever you want, you can change the color. Let's pick up that one. We got it here, we got it here. So yeah, we get the color changes and this, how do we do that? Let's switch to the spirit stone. So let me move it here. Is the icon seen? It's OK. Maybe make it a bit bigger. Yeah, it's OK for you. Did you see? Can you read? Yeah, OK. So yeah, and here we don't have too much to say. OK, but yeah, we are rendering here the content. OK, the content we are referencing the paragraph. So yeah, if you go to the paragraph, do it. OK, we got here the magic. So here, what we are doing is including an SDG file dynamically using the paragraph entity fields. OK, so we choose, so let's, so when the user pick up an icon going to show, we load dynamically using the include, as I was playing before, we put it to the theme and we go back to the asset folder and we got the SPG loaded using the include. Yeah, and we also display the title and the text. The magic here is that we are using the entity here to load in the SPG file. OK, and what happened with the animation? We have to go to the SPG, this is my sample, OK. Please, here we are defining the SPG. We are defining the animation at some point here. You add it in by CSS. OK, so yeah, the more important thing is the color. OK, we are filling the icon with the color defined in the paragraph for the icons. OK, so here we are picking up, explaining here the color. OK, if you go back here, paragraph, yeah, that's it. You can see where it's passing the, get passing by inheritance, the value to the SPG. They're not running here, but they're passing through the tweet. OK. Yeah, so we wanted to actually mention that, for example, if you go to the SPG file from, then we are using here the variables. So the field values, and this is possible because we are including this SPG into the paragraph template, and it's done inheriting all the variables. Exactly, more examples. Yeah, so don't mind trying to read these slides. We're just there for further reference, but we are just going to explain those bullet points here in the code. So that's more for later on if you want to check the slides. So here in this example, we are having a content type with two fields. One is to upload an image. So here we already uploaded one. And then you have a list of filters. And these filters then get applied to the image. So you can just change them to change the effect. So you can do like black and white or sepia or, yeah. Let's just bring back. OK. Yeah. You can play around. Yeah, just to let you know, in the last slide, we will have we will have the repository, the GitHub repository to access this code. So you can just play around with it or look a bit closer if you just couldn't read everything now. So how it is done in the code? We have the node template where we are including a partial tweak template. We decided to just show another use case, like there are different ways to include SVGs. Here we created a partial template where we hard-coded then the SVG in there. And we are receiving actually like, OK, we are defining at the beginning all the possible filters that you can choose. The ideas of these filters have to be in sync with the Drupal list field, of course, because at the very bottom, if you can go to the bottom, yeah, please. OK. Here we see that we use a raster image and passing the link to where it is located, what you just uploaded. And then also we are applying a filter with the filter name they just chose in Drupal. And then we are including this partial in the node template with the values of these two variables. And then we have a last example that will be a city trip of our Drupal. So yeah, so it's FranceDoc's name. So we can give the name of the dog. And then we can choose, for example, the dog will be traveling in Amsterdam. What do you want, guys, by day or night? You should travel. I know, anybody say the same? Everyone says. No one likes daylight. No, because it's a bad color. Yeah, so you can pick up a color for the boat. And he's always picking crazy colors. Important thing is that something contrasting. And not so much like the party. This is the lighter? Yes, please add the light one here. Dark? Yeah, now it's dark. Something dark. I'm back. Wow. It will be a beautiful boat. And then you can also set the speed of the boat, because he has a boat, yes. And then we can also decide if it should be a classic pug, or a black, or a white. A young one, yeah. A little. And then you have our Drupal. Yeah, but the base, this is the base. Wow. Nice colors, Prang. And he always wanted to show the ninja pug. Yeah, he wanted to show the ninja pug. The best. Yeah, but it's cool the way we can. We can easily modify the SVG. I guess something cool. Let's show the daylight. The daylight, yeah. Yeah, yeah, you just did it. Just so that you see the beautiful colors. Yeah. So how it looks in code. I know it's cute, but. So we have a content type, city trip. And if you scroll up, not that much, yeah. Here you see that we are setting some classes based on the values you are choosing in the edit interface. So here we are setting if it should be night, then we are adding a night class, which we then later use it to style. And also we are adding classes for the speed. And down there you can see the markup. So we are including here like we have the background image a little bit not so wide. So don't wonder why it's included twice. It's because we needed a wider image to be able to then animate it because it's like moving. So that's why. And we didn't want to use CSS because we have to actually just apply some filters to the colors. So we have to have the markup in the DOM. So here you can see the file for the background. And you see that we are defining a filter here, which darkens and they saturates a bit the colors. And in this tile, OK, so it's like reading that beautiful code here. But yeah, so it's just for demonstration purposes. So here we are then saying if it's night, then all these colors should have this filter applied, which just darkens the colors. And yeah, as you see, this is, for example, a file that you don't want to have hard-coded in your tweak template. And for the dock, if you can open it, please. For the dock, we have, again, the SVG with some filters. So here we apply the same filter to the back leg, so the back leg, which is more far from us to have it a little bit darker. And you can also see that, OK, with this color, it's not full, visible, but it's OK. And then you can also see that we are applying, then, in these styles, the different colors we are picking. So this is, again, because we are inheriting these variables, so we are just using the value of these fields. Can you go back up, please? So I wanted to mention that we are also defining a default value, because if you don't define any fill for an SVG element, then it's black. So it's better if, like in this case, we just define a color, like a default fallback color for certain elements. And if you scroll down, then you can see that we are also using the text to just display the label of the node, which is actually the name of the dock. Yeah, well, this is a presentation, so yes, this is a bit free. So we would like to thank you to everyone who helped us with this presentation. We would like to thank you to Audrey Brokhaus. So she held a session in Drupalcon Seattle. You can find some links to her presentation and also some resources. So it was an awesome session, and it inspired us a lot. And she also allowed us to use some of her resources. So thank you very much. We also would like to thank to our colleagues, so to Yule and to Pablo to help with the graphics, the SVGs. And also Yule made our slides look much better than before. And also we would like to thank you to Christoph for the idea and the support for the proposal. Motivating, always. Yes. And all the company who listened to us and gave feedback and stuff, so thank you. For the Contribution Day tomorrow, please join to us and contribute. Community needs you. We have three different things. Metro Contribution, First Sign, Computing Workshop, please don't be shy and join. General Contribution, OK? There are plenty of non-code tickets. Come and contribute. Yes. Yeah. Remember you that there is also a way you can feel, yeah, look at feedback. Always good. Yes, please give us feedback. Thank you very, very much. Any question? GUI tools, if I want to trace an image or create shapes or... Is there a microphone? Yeah, there is a microphone there to come. Oh, someone can pass him. Thank you. So I'm just wondering if you can recommend any GUI tools if I wanted to trace an image like the T-shirt example and create some shapes. Yes. Make other measures. So basically what I personally always use is Inkscape because I use Linux. So I'm not a designer or so like usually I'm changing images and not really creating them. So I know illustrator, probably illustrator can also do something like that or a sketch. Yeah, but Inkscape for sure. Can you change the second example you showed? A microphone? Oh, yeah. You are making us work. So the second example you showed, you had an image in the background that you embedded in SVG and changed and applied effects to it, right? Yes. Can you change the image? Yes, sure. You can just go to the second example. Aha, yeah, refilter. Yeah, for sure. One second. Filter image. Oh, need to edit that. I don't know what you got here. But it's right. OK, let's see. Double click, maybe. Workpaper? Oh, this one. Oh, yeah. Now it's working, it's working. Yeah. Are you warm, Christof? It's too wavy. Yeah, but it's awesome how we can do it. Can you show the source code, please? Like on the rendered page? What? Show the source code like inspecting. Inspecting here? Yeah, yeah. But where's the wave effects? Sorry. Oh, there. So here, there are all the filters in the SVG markup. And you are just then, by ID, you are then referencing. So you can see in the image the filter and its reference in this API one. Yeah, it's right here. It's pretty easy. Can you take the microphone, please? Because we are recording, yeah, people will want to know the question. What year did you use for the filter? And how did you realize this? So in the examples, we used only field value module. Yeah, we were only using models to get easy the value, but for filter, then we are creating the filter by scratch. So yeah, so basically for the filters, you can actually just look around in the internet. That's what I did, because it's quite hard to get these matrices working nicely. So I always just pick, look for some cool effects and copy these matrices. So you can go to the filter image thing. Yeah, it's a partial. So here, you can see different ways to implement the filter. And this is using the matrix, but yeah, you can also use them for the Gaussian blue. Yeah, they provide different tools or things or attacks to top planning to create filters. You can find in the documentation like a lot of filter effects you can use. And also very nice examples then to just borrow them and use them one year. Can you show us the part again? Yeah. Yeah, I animated it, yeah. Then you made it, then you did. Are you sharing the code? Yeah, on the last slide, actually, we put the link to the repository where you can just get it's with DDEF. So there is also a database for it. The only thing when you import the database is that you have to upload a new image, because obviously, that's there. Yeah, when you see DDEF, you get the environment, so you only have to get it to start. And you get the site working and you can try. OK. And of course, here in this example, we could have done many other animations for like birds and the bikes and stuff. So for next time, we have more time for it, and we do it. But you can play around with it. Oh. I wanted to ask, how do you organize the communication between font and design? So let's say, for example, you have to have a configurable icon set. And all icons actually need to be done the same way. Otherwise, your filter variable might not work. So is it like a designer task? I have to do it a certain way. Or do you clean up in font and afterwards? Well, ideally, we get at least a clean markup from the designer. So Phil will always going to work. So there are certain attributes, which are actually just basic attributes for every SVG element. So the designer's job is only to, like if you have the shapes. For example, it happens that we want to use different variables. And we want them to unify, for example, two shapes to one. And then it should be a path and not a rectangle or whatever. Then we can also just ask for help. So for example, personally, I'm not very much into the creation of the SVGs. I'm more the frontender who uses it. So usually, if the designer is our internal designer, then it's perfect. If it's an external one, it's more difficult because the communication is just more difficult. But usually, if we cannot communicate with the designer, then we clean it up ourselves as good as we can. It usually works, actually, just cleaning up. But it takes time. So it's better to, I think, in most of the editors, there is an option, for example, to not export metadata or certain information, like branding information. Now, we don't have to be afraid of modifying the SVG markup. It's just XML markup. So we can just take a meta tag and delete, and nothing will happen. More questions? OK. OK. Thank you very much. Thank you.