 works for me. Alright you go on. Hi everyone, my name is Ted Gould. Um I've been working on Inkscape for one of the longest time. Um but here I'm going to talk about SVG filters which is a feature of SVG and thus uh in Inkscape. And so to talk a little bit about it, what SVG filters are is they were actually part of the SVG spec in 1.0. Um they weren't implemented by a lot of renders including Inkscape when the SVG 1.0 spec came out. Um but it is an old standard. It's uh everything should support it. Um not everything does and some of the SVG filters aren't the same. But basically what the SVG filters are is they're a way to modify the rendering pipeline of the graphic. So you've got a vector graphic and it's got to get out to the um the actual display. And SVG filters allows you to modify that. Which gives you a lot of artistic control that isn't normally associated with vector graphics. And it can be just a powerful way to just make your designs pop. Make them more exciting. So let's learn a little bit what that looks like. So we've got traditional vector graphics. And uh we've got a friend Homer Simpson here and he's kind of a traditional vector. In the fact that he's got flat areas, yellow flat areas. And the way that they've got depth and they create depth for this character is they put little dark areas in. And now that isn't real depth. They've just put another graphic on there and created a visual effective depth. For the most part that's great. I mean I don't want to criticize the Simpsons. Uh they've made a lot more money than I have. But the the reality is that's not sort of realistic. So when we look at the right side this is the uh about screen for Inkscape 45. Which was the first version of Inkscape that supported um SVG filters. And you can see here we've got a set of balls. And there's four balls that go across there. And what they've got is they've got a depth of field effect. Which creates uh blurs as things move away from the focal plane. And so this is created in a vector graphic that has this photo effect. And so what you can do is you can start to create this more photo realistic vector than the traditional vector of Homer Simpson. So that's really what we're trying to do with SVG filters. So when I'm talking about modifying the pipeline we kind of have to go back to how vector graphics work. In essence you take a vector graphic which is the definition of the schematic of what things look like. And we render it to different outputs. And so what's neat about vector graphics is we can start with the same vector image. We can go to a phone screen. Which is tiny. And create one image. And create it exactly for that phone screen the way it should look. Or we can go to like a billboard or a large sign. And we can also make it so it's correct resolution for that sign. And so we go from the same schematic over on the left of the vector image. And we can have different bitmaps. And that's how we render a vector graphic to those different display outputs. And so that's kind of the same process that actually happens inside your vector editor or your vector renderer. And so what happens is you start with a blank image. You start with zeros on all your graphics. And so we take our first object. Here I've got two objects. The blue circle and the red square. And so internally we take the blue circle. We turn it into a bitmap for the resolution. And then we add it to the blank. So we come to start with a blank image. We add in the blue circle. And then we go to when we say okay we've got the red square. We go through the red square. We render it to a bitmap. And then we overlay that onto. And so then we get our final image which is this bitmap that has the blue circle and the red square. And so what SVG filters do is they add another part of this overall rendering pipeline where we get to modify that bitmap before it gets overlaid. So we start again with our blank image. We've got our blue circle. It's a vector object. It gets rendered into a bitmap. Then we run a filter on that bitmap. And then we put it onto the blank image. And so what that allows us to do is to modify this pipeline of the object as it's coming through and getting rendered and to do different things. And so in this case we've got our same blue circle as before but we blurred it after it became a bitmap. So we created the original bitmap that wasn't blurred. We applied the blur filter and then we could pose it onto the images. So what we have is a filter element. We call them filter elements in SVG that is a blur. So we take the import bitmap, we go through the blur filter, and then we get an output bitmap. And that's just the same image kind of explained how we're doing it with the SVG element, a filter element. What's cool about us the way they've implemented SG filters is that a filter can have more than one element. And this is very similar to Tom's note editor. It's how kind of SVG filters work. And so you have inputs that go through elements that each generate their outputs from those inputs whether it be blur and we'll talk about a lot of the different elements you can have. And then we all combine down to the final output which gets actually put in your graphic. And so we can create really, really complex things from just a set of elements, a set of toolboxes that are given to us by the SVG committee. So what are some of the inputs? First we're going to talk about inputs. Here I've got a source graphic on the left. It's a blue circle with a yellow stroke on a red plane. Romantic, I understand, you know, but we take that image. It's beautiful. Yes, art. And so we've got one of the input choices is the source image. And in this case, the source image, we're just applying the filter to the blue circle. So the source image is a blue circle with the yellow stroke. We also have a choice of the source alpha, which is basically the transparency component of the source image. Because we're only applying it to the blue circle, everything else is transparent. And so that becomes black. And so it creates a grayscale image of the original source based on the alpha channel, which is basically the blue circle is white, everything else is black. And so if you had something that was like a gradient or transparent, that would come through also into the alpha channel before it was a transparent gradient. And then we have the background is the one. And here the it's real simple. The background is just the red square. It could be it could be you don't anything it could be an image. It could be, you know, anything that is the background could come through. But in this case, was just a red square. So it's pretty simple and straightforward. Also, just you know, I actually uploaded the presentation this morning. So I'm actually like an hour ahead of the game. So if you don't want to take pictures, you can just grab the presentation. It's on my website. So last background alpha, which is the same as the other alpha channel, but this case, we'll only have white because it's just a red square. It's not very exciting. And then there's two that are kind of interesting, the stroke color and stroke fill color. These are used to if you want to recombine images, you can get those. It's not really interesting in this case, because it's just a color is just yellow and blue. But if you're instance, your stroke was a gradient or your stroke was a pattern, these could be really, really complex. And you'd want to integrate those back in your filters. Not nothing we talk about today is it really going to use those, but I wanted to have them on here for completeness. In inkscape, we have a filters dialogue. And this is what you're going to start using to build and edit your filters. And so the filter we've got now is just a Gaussian blur. We just to put a blur on a circle. That's all we did. And so voila, we've got a Gaussian blur. And so then on the right side, we have all of your different inputs. And you can't see on this screen. So you'll have to trust me, you'll see on your display that there's an arrow that's coming from the source graphic here to the Gaussian blur. And so we have a set of arrows in here that connect the different elements together to create that graph. It's not as beautiful a graph editor as Tom's, but it kind of works in that we get to bring in the input to the different outputs, and the outputs of the filters as you see, we'll start building up filters at the end, connect into each other. But right now we just have the Gaussian blur. Inkscape hopefully gives you a name for it filter 825. And then you can edit the parameters down here. So here we've got the standard deviation, which is the amount of blur. And we'll talk about some of the parameters for blur. But this is the standard deviation of how much blur it is. And so we can edit and modify the different elements of each of the different parameters of each of the elements. The other thing that's in this dialogue and we'll show it in the dialogue in a second is that filters apply to an area. So in SVG, you have a bounding box or most vector graphics have a bounding box for the graphic. And here we've got a bounding box, which is just the line that encloses all of the pixels that are drawn in the image. And so in our blue circle, it's just a box that goes around the blue circle. It's not very exciting. But for filters, we also have the area that the filter modifies. And so by default, in Inkscape, and most, and it's actually recommended in the spec, it's 10% larger than the bounding box of the object. So 10% larger, you get the filter area. The number one mistake I see people making with filters when they go and try to use them is they turn up their filter more than this bounding box. What happens is if you get out of this bounding box, it just clips. And so this is an optimization mostly for SVG renders like for webs, for browsers and stuff like that. Because they have to render quickly, they have to do animations, you're doing JavaScript to edit them. They need to be able to restrict how much filtering is going on. So they use this bounding box to make sure that the image doesn't get crazy and slow down the browser overall. But for most of the time when I see artists using it, I haven't seen anybody use the bounding box artistically. Let's put it that way. Most of the time it's in error. So you need to watch this. And it is on the dialogue in the filter general settings. So we've got the filter general settings. What happens in the filter general settings is that 1.0 is the width of the bounding box. Then any value of that, oh, anything over one is bigger than the bounding box. Anything less than one is smaller than the bounding box. So in this case, I've got the coordinates set up to just some effectively random values. So I created the box that is negative .54, so it's to the left of the bounding box, and negative .49, which is to the top of the bounding box. And its width is two bounding boxes. So you'll see that the width of the outside square is twice the size of the one on the interior side square. That's a little bit bigger than 10%. But that's what I wanted there for this filter because it's kind of blurry. So you could edit that and modify that. And if you find a way to use the clipping mask successfully in art, that'd be cool. But that's something how it happens. So next, I want to go through the different elements. I want to stress for this part because I struggle with how do I talk about these because the reality is you're not going to remember any of them at the end of this presentation. But what I want is I want you guys to have some experience with them and kind of know what there is available so you get the ideas in a toolbox. Because when you start breaking down and working on your projects, you're going to need to have ideas of what's possible. And so I'm going to blow through these. But don't feel bad like I don't even know what multiply is. But I want you to kind of just get experience and kind of see how they work. I tried for the most part to use the examples that are in the SVG spec when showing these so that you could go back to the SVG spec and they'd be familiar to you and seeing what the different parameters do and stuff like that. No difference to the W3C guys but some of the examples kind of sucked. So I placed them with things that I thought were more illustrative. But I tried as hard as I could, I promise. So the first one we just talked about the border is FE blend which stands for filter effect blend. And this is just about blending two inputs together. And so we're here we've got a background that is a gradient that has different colors and then we do different types of blending normal blending, multiplicative blending, screen blending, darkening and lightening with the different text. So they just create a different way for you to mix two inputs. So whether it be a image or the background and you could just do different compositing and blending these two objects together. There's also FE color matrix. The color matrix filter. What this allows you to do is to edit the color channels based on a set of matrix parameters. Excuse me. So we've got unfiltered at the top which is this crazy gradient. We can do a matrix which is the absolute most flexible. You can set all the parameters. You can make your linear algebra teacher happy. But that's probably not as useful for most people as saturate and rotate which allows you to set a single value for saturation or doing a rotation across the entire image. This is where you start to get to like your Instagram type effects. This one and the next one was the component transfer, FE component transfer. I don't think it is useful for most graphic artists using Inkscape. I think they're more useful for the web because the reality is if you're a graphic artist you have a lot more control over the rest of your color set. So you don't need a filter to adjust color as much. But on the web you've got your Instagram graphic that you upload. But you can do really cool things with the mapping of these filters. Component transfer is the same. It allows you to do basically color mapping but you define a function. So like a programmable function for how the color mapping goes across. You can do table lookup linear functions, gamma, you can do curves, all kinds of fun stuff like that. Compositing is a little bit like blend but allows you to mix the two images in a more straightforward way. You can do in and out or XOR or arithmetic. So it's at the opacity. Here we've got the blue rectangle and the, what's that purple rectangle? Cyan? Magenta. That works for me. Magenta. I've got big words. We mix those two together. They're just placed over each other. That just means they're laid on top of each other. There's no real blending. We can blend them in different ways and create different effects as we start to build this pipeline up. The color matrix is convolution matrix. This is, you're going to have to Google the matrixes, convolution matrices if you are not familiar with them. But one of the big effects and the one we're going to use later in the talk is edge detection. So it allows you to set a matrix that gets applied to all the parameters and you can do different effects. You could do bigger ones, edge detection, but you can also do horizontal edge and vertical edge, all kinds of fun stuff like that. But if you're not familiar with those, you're going to have to, it's pretty high level math, but you can look it up. It's fun. There's different lighting modes. You can do different lighting ones. On the far left is ambient lighting, which is just flat. Then you've got diffuse and specular lighting. And what I liked about this one, actually from the SVGM, or the Inkscape book, is that you combine them at the side to show how you can combine the diffuse, the specular, and create what you'd expect. This looks like a 3D object at the end with the different lighting effects on top of it. Displacement map is very cool because it allows you to use a mapping with another image and create effects. And so you can do like the magnifying glass effect that moves around, or you can do here the ripple effect. You can actually move the pixels based on another image. And so you can take a gradient or a ripple or whatever you want, really. You can do noise and cause that to ripple through the actual displacement of the pixels on the screen. So here's a ripple. Effy flood. So I couldn't figure out an example for Effy Flood. Effy Flood is just about putting a color into your pipeline. So it's about, yeah, I need an initialization value for this input. And so you can assume that my example here is I flooded this with white. Yeah, exactly. There's a cat. This is the signature example. They use it for three of the filters in the SVG spec. But you can see what we did is we did a drop shadow on this SVG icon. And so you see the back is the same actual outline as the SVG icon. Dropped in the back and blurred for the edges. We'll go a lot more into blurs. Effy image allows you to take a image source so you can grab any graphic. Here's a smiley face and place it in. The really cool thing you can do with this is actually you could do like an element that is off screen and apply that into your graphics. And so you could do some sort of texture or an object that you're editing that doesn't necessarily visible and have it affect the objects inside your canvas. And so it's an interesting way to create a controllable source for your filters. Merge is just put things on top of each other. I haven't asked anyone on the SVG committee but I'm guessing it was just optimization for browsers because you can do exactly the same things with compose but merge means you won't do any blending and so therefore it makes it faster. So I think it's a optimization. Morphology is dilation and erosion. There's a lot of math behind this but basically for the most part it means make it bigger or make it smaller. Erosion means that you take the empty areas and you try to expand those. Dilation means you take the empty areas and you try to make them smaller. We'll use this a little bit later. You can see how it creates an effect because sometimes you have a bit map and you just want those lines a little thicker and you just can't adjust the stroke width. And so we can use erosion and dilation to get those kind of effects. The problem is it's a mathematical way so you're used to on vector graphics. It's you know I've got their straight line. It's real sharp and I make it bigger. It's still really straight. Well erosion and dilation don't do that. You get kind of a blurring or a curvature when you expand. So if you can I would always say make it bigger on the vector side rather than going through filters. That's not always the case. F E offset. This is an interesting one I wouldn't have thought of if I was on the committee. But it basically just shifts the pixels off by a little bit. And so that's how they get this gradient, this drop blur to be often to the right as they add a little effect where they just take every pixel and they move it over to you know a few pixels to the right, a few pixels to the left and drop it down. It's really simple but it creates it gives you a lot of flexibility when you're designing your pipelines. Specular lighting we kind of did lighting before but this is the example with specular lighting. There's tile which allows you to take a smaller image and tile it throughout your image. Here we've got the stripe image and it's tiled throughout the text. So the filters are being applied to the text. The text is the object for the filter here and it's got a F E tile that refers to another object which is the stripes. And so you get an effect where you've got the fun stripes. Turbulence turbulence is just turbulence and it's just it's just effectively random noise. It doesn't necessarily seem at first glance you'd want to use this but a lot of effects like especially wood grain effects or frosted glass effects need some source of noise and I think Tom said that actually in his talk where you know we've got to make it look human. Computer graphics make things too sharp and so the turbulence effect is how we can add some human in there. So it creates random effects that you can start to mix into your pipelines. So you'll see how to use these as we start moving through it. So next up I kind of wanted to go through building up a filter that could be useful and kind of see how that starts to go together and how we start to build the actual full filter from the different elements. So I got an image of grass. It's great because it's a relatively busy image and I really wanted to label it. Grass. So we've put text on an image. You guys are all expert designers. You can do anything on the Internet now. Is this what the whole Internet is? Course over. So I wanted the grass to show up a little bit and be a little bit nicer and kind of blend in with the image. And so the first thing I want to do is I want to be able to blur the background because if I put that noisy, noisy, noisy grass into my text you're not really going to see it. And so I just ran a blur over the background and this is the effect of having the blur in the background. It kind of comes out like that. And so then I applied the blur. Oh, I've got a graphic. They're same graphics. Don't read the text ahead or you'll know what's going to happen before it happens. But we've got the blur and it's happening to the background image and that's what's creating our blurred background image. So now we're going to apply that filter to the text. I'm hoping this comes out on the screen. You can almost, I don't know if you can see it in the back for sure. But what you can see is that the grass text, the background's blurred where it says grass, but it's not blurred where it doesn't say grass. So we've now taken the the effect and only applied it to the text. So we took the foreground of it and then we applied it composite it with the background and we now have the text as the blurred background. So now we can start to play with that because we only have that area for the blurred background text. But as we mentioned, you couldn't see it in the back. So we need to do something to make that come out more a little bit better. So I wanted to lighten it. So we're going to retake our original image. We've got our original white grass text and we're going to mix it back on top. So now you can kind of see it better. We still have the blurred background so you don't lose the edges on the text because otherwise you'd have the high noise grass and you couldn't really see it. So you remove the, we filter that out and then we blend it back in with the white and we've got to have something. This is not, not unreasonable. We're getting there. I see what that looks like in the filter effects editor. We did a blend. So we have the Gaussian blur, we have the composite and then we did a blend where we pull back in the source graphic. The source graphic was the white text and we were blending it now with the original background we had and that creates our grass text at the end. So I was reasonably happy with that but I felt like it really still didn't pop. So I'm like, well, it's okay, but let's, let's get some edges on there so you're not gonna be able to see that but too well. But what we're doing right now is we're actually highlighting the edge, we're putting white edge, white to kind of give us some edge between the text and the background. So what I did is I put a convolution matrix to find the edge. Here's a convolution matrix. You can look this up online, that's a pretty standard edge detection convolution matrix. The fun part, the key with those matrices is if you make them all add up to zero, things work out really well. You don't have to worry about devisors and stuff like that. So just, you know, all negative, big number in the center, you're pretty good to go. So we put the convolution matrix and so we took our original blend, which is our blend that came and we put our lightning in, and we're now putting in a convolution matrix on the original image, and now we're blending that again. So you see how we've got one blend where we're coming in with the lightning text, then this is an entirely different channel. So I've got just coming from my source graphic into the convolution matrix, and then I'm blending those two together at the end. But that didn't really stand out. You couldn't really see it in the back. We just really needed a thicker edge. And so normally I would say, hey, just modify the stroke. You can do a mask. That's how you do it in vectors, right? But we're doing a filters class today. So we're going to do filters. And so we've got to do this with our filter in the specifically, we're going to take that edge, that thin line, and we're going to do a dilation on it. So we got them, the composite convolved matrix, which gave us our edge detection. So we grabbed all the edges from the edge of the text. We throw it through a, a dilation here. So there's a pretty small dilation, a couple of pixels, and that created the thicker edge. And then we blend the thicker edge in. So I have this grass image. There's grass.svg. That's also on web page. And what I've done is I've taken each of these steps and I've put it as layers in that image. And so you can bring it up an inkscape. You can grab the layers and you can just turn them on and off and kind of see how they are. I recommend if you want to play with this more, you grab that image and you pull it into inkscape and you just, you know, change it, change the parameters, thicker edge, but larger dilation, smaller dilation. That, that svg is available and you can start to play with it. So the really cool thing I, I like maybe because I wrote the code, but this is the coolest feature to me. And so I got to talk about it. So we take this grass image and so I can make a directory and this is a Linux conference. So I'll give you the Linux instructions. In your configuration directory, you can have a filters directory. And in that filters directory, you can put as many svg files as you want. When inkscape starts up, it'll read every, every svg file in that directory and it will pull the filters out of those svg filters. So if you find something online, you're like, Hey, this is a really cool image. You can use their filters. So, but this is also a great way to share. Like if you have a design team and you need artists to be able to use the same filters, it becomes a really nice way to share between all the artists that are working on the project. They can just do one filters. And so you'll notice I spend some time naming my filters really nicely on the previous slides. And the reason is because those names end up in the menus. So what happens is you in the filters menu in inkscape, you'll come down, there's a personal sub folder and you'll have, you know, the same image names that we have before. So now if I select an object in this document, whether, you know, be my blue circle or anything else, I can apply those same filters directly to those objects and reuse them and play with them. And then generally, that's what everything is in the filters menu. And the filters menu is all svg filters. And there's an in we're distributing escape, there's a filters dot svg that just gets distributed with it. And these are all filters within that image within that svg. So you want to learn more about filters. You had this, you saw this really great presentation at scale. And so you want to start playing with it. There's a lot that we've packaged in inkscape. There's a lot of good filters. And probably some of them are things that you want to do or a source image for what you want to do. So what I'd really recommend doing is, Hey, this is close. Apply this to my graphic and then start editing it and modifying it. Don't necessarily start from scratch for your first few filters. Just take an object, apply one of the filters that comes in inkscape and work with it and start playing with it. This is actually an old graphic. I've realized it was out of date when I pulled it. But that's all the svg filters that we shipped a couple of releases ago. I think that was 090 was last time I was up to date. And it's got a, in the very left hand corner, you can barely see it. It's a source image. And then this is what happens when you apply each of those filters to that source image. There's even more now, but this isn't up to date. The folder structure is actually wrong. Because we redid the folder structure in 91. Excuse me. But you can grab this in the examples directory and you can see what the different filters do. Open up, play with them, adjust the parameters, change how they lay out, reorder them, do whatever you want. It's a good way to start to learn and get a feel for svg filters, especially in inkscape. Further information, the svg spec. The svg spec actually goes into this. It's got the examples. I tried to show those so you felt comfortable going to the svg spec. There's lots of good info in the svg spec about how filters work. If you want the specific math of how they work, all the math is there. I found this smashing article, a magazine article really good. He goes through, he has a lot of text examples. I find that a lot of times people who are using filters are trying to fancy up their text, make it a little bit nicer. It do something like an effect on text. And the smashing article has a lot of great examples of how to modify text. So I'd recommend that article to go through. He also has a section on not all the filter elements, but a lot of them and how they can be used. So I really enjoy that article. Tav is one of the inkscape developers. He's our representative of the svg committee. And he has a book. It's free online. Of course, I know Tav and I like him. I recommend you buy a copy. But you can also see it online. And he has a filter section. I grabbed a few of the examples from his book on for the filters examples. It's a really great book. It really goes into all the details of inkscape. There's probably no question that's not answered in that book. It's really nice. And last but not least, is there any questions for me? Microphone, I guess. Yeah. Yes, it is live preview. As you edit them, they will adjust. So there's no anything you need to enable. Actually, it's actually the other way. If you go to the view menu, you can disable filters. One of the problems is that if you have a lot of filters, like you got just a really complex design, you'll start to slow down your machine. And so you can actually go view and disable filters to get rid of some of the blurs as you're editing your objects. So assuming browsers as a primary viewing medium, is there any advantage to using vectors over OpenGL primitives that do similar things? Vectors versus SVH. So the question is about SVG vectors versus GL graphics in browsers. I guess it probably depends on what you're doing. I think the SVG graphics are going to be faster vector graphics. It depends on what effect you're going for. I guess it would also be compatibility. More browsers, especially mobile browsers support SVG. I don't know there's a clear answer there. It probably depends on your use case. If you're doing like a lot of lighting effects, I don't think there's a reason not to use 3D. But if you're doing just a lot of text, you probably want to be using vector graphics or even HTML. Because the HTML does text flowing a lot better than SVG does. Any other questions? Going once, twice? Awesome. Thank you, everyone.