Transcription
[Digital music]
[Applause]
Sara Soueidan: Guten Morgen.
Audience: Guten Morgen.
Sara: Schon dass ihr hier seid. Es ist schon hier zu sein. Yes, I do speak a little bit of German because I lived here for eight years when I was a kid, so it’s always really nice to come back here because there are a lot of memories involved.
It’s been 23 years since the last time it snowed on me, so I’m very much looking forward to tomorrow.
[Laughter]
Sara: I’m a front-end developer. Over the last three years, I’ve been doing a lot of work with SVG because SVG excites me. It is both an image format and a document format. There’s so much possible with it.
I’m not a designer, but I wish I were. Particularly, I do like Web design, but the kind of design that excites me the most is print design. As a kid, I always used to grab magazines and browse them. I still do that today with digital magazines. I rarely ever read the text in them. I just like looking at them. I love the layout. I love the imagery. I love the effects included in it.
When I started with the Web, I wished I could do on the Web or, actually, I expected to be able to recreate certain print designs on the Web, but it wasn’t really that possible before. The gap between what’s possible in print design and editors such as Photoshop and what’s possible on the Web has been getting a lot smaller over the last few years. In fact, this gap has always been very small. It’s just taken us an awful lot of time and years to realize it and to pay attention to the parts of the Web that do make that gap small.
Now, when it comes to CSS, over the last few years, mostly three or four years, it’s been getting a lot of features that make the gaps smaller. It started with print. It was CSS Shapes, which allow you to create content that wraps around and inside irregular shapes. As you can imagine, I got extremely excited when I saw this back then. I was even one of the first people to write these articles on them.
Then, with the introduction of CSS Blend Modes, which also enable us to do a lot of color compositing and blending to create really nice effects that are also part of what you always see in poster design and print design. Then there is CSS Filters that enable us to do more image editing right in the comfort of our code editors.
There are 11 filter effects possible that do a range of effects from blurring to changing color to contrast and saturation and all of that. One particularly interesting function is the URL function, which enable us to import even more complex functions and new functions into CSS from SVG.
Now, it’s true that CSS has made this gap smaller over the last few years. But, SVG has always had a lot of features that have been around for a very long time. In fact, these CSS filters and most of what’s possible in CSS, when it comes to graphic design, has been imported from SVG. The CSS versions here are optimized, fairly optimized versions of filters that are currently available in SVG and that are even more capable.
For example, it is currently possible to blur an image using the CSS blur function. Okay? In the image above, I’m blurring it using six pixels, so the blur is applied uniformly over the entire image, both on the horizontal and the vertical direction. But, this function is merely a simplified and very limited shorthand for the blur function that is available in SVG.
SVG allows you to blur an image either uniformly, just like you do with CSS or, if you provide two values, two numerical values, you can blur the image on the X-axis and the Y-axis separately, differently, or at the same time. You can imagine. You can use this effect, for example, with the horizontal blurring. You can create a motion blur effect if you combine it with other filters as well.
Now, I know that, for me, I did it too, so at some point, I did wonder, “Why would I want to use these effects on the Web? Why don’t I just create an image and just embed it on the website?” Right? It’s just one image. You create it, and then you embed it.
Well, the first problem is, if you’re building responsive websites, then you’re not just dealing with one image, if you think about it, because you have multiple resolutions. We have picture resources and other resources that enable us to embed different image resolutions for different screen sizes. We have to do that. If you want to change anything about your effect, you have to jump back into Photoshop or whatever editor you used to create it. Then you have to edit it, and then you have to edit all of the versions of that image, and then you have to re-embed them.
Now, in addition to that, there are other reasons. Now, the ability to apply filter effects on the Web helps us maintain the semantic structure of the document instead of resorting to images which, aside from being fixed resolution most of the times, they tend to obscure the original semantics of the elements that they replace. This is particularly important when it comes to text. If you want text that has a specific filter or effect applied to it and you create it as an image and then you embed it, you lose the semantics of that text. It’s no longer searchable. It’s not selectable. It’s not accessible anymore. That is not right.
The content semantics are preserved. This is the most important point, personally, for me. The content is editable and dynamic, so if you want to change that text, you can do that in the comfort of your code editor. You don’t have to jump into the graphics editor, change it, and then re-embed it.
It’s easier and faster to tweak the change, either the content or the effect itself. If you’re applying it with code, you can change it again. You don’t have to resort to the design editor anymore.
The effects are animatable. If you create an effect as an image and then you embed that, you can’t animate it. Even if you have multiple versions of that image and then your animating between those images, it’s not really a transition anymore. It doesn’t look good.
For example, with CSS filters, you can create an effect that is as simple as this one here, which just fades an image in and out. You can change anything about it. You can play with the contrast, with the colors, and you can do that using just a few lines of CSS.
Using filters on the Web can also be a really nice addition for progressive performance. Una Kravets has this really nice technique. It’s called Contrast Swap where you create an image in Photoshop, and then you reduce the colors in that image. Then you embed it on the website. Then you re-increase the colors, or you edit the colors using CSS filters.
The image that you’re embedding is a much smaller size than the original image, which would contain all of the colors. You have a smaller image. You are embedding a smaller image. It’s better for performance. Then you get the benefits, or you reapply those effects on the Web using CSS.
Now, there is a lot of controversy around that issue. Like, if you want to download the image, it’s going to be downloaded without the filter effects and stuff like that. But, it’s still a really nice effect if you want to do it.
Now, filter effects in SVG are defined using filter elements, a filter element. Filter elements are never rendered directly. Their only usage is as something that you can create, and then you reference and apply later on certain elements. It could be images. It could be text. It could be anything.
Such elements, elements that are only defined and then reapplied or referenced, are usually wraps and defs. Defs is short for definitions and some element in SVG. Whatever you put into a defs element is not going to be rendered on the page. But, when it comes to filters, whether you wrap them in a defs or not, it doesn’t make any difference because it’s not going to render. The reason it’s not going to render it anyway is because the reason for that is that filters require a source image to work on. Unless you explicitly define that source by calling the filter on that source image, then it’s not going to have anything to render, and so it’s not going to render. You can put it in a defs element or not. It’s up to you.
Now, a filter effect to create an effect, whatever that effect, it’s made up of a series of operations. Each operation is created or is done or is applied using a filter primitive in SVG. All of these primitives are prefixed with FE. FE is short for filter effect. You have FE blend, which is the blend filter effect. Then you have FE composite, a compositing effect.
Each filter primitive performs a single fundamental graphical operation on one or more inputs - one or more. An effect can be applied to either one input or it can take two inputs and apply the effect using those two inputs. This input can be--
It’s going to get very technical from now on. Okay?
The input can be the original image, the source graphic. It’s called the source graphic in SVG. It could be the results of another primitive, so you can chain filters together. The result of one primitive can be used as an input to another primitive, or it can also be the alpha channel of an element, which is essentially a “black version” of that element.
This, in turn, means you have more than 19 filters in SVG. Each one, they can all be changed. They can be chained. You can take an input from one of them and use it for more than an input for more than one other filter primitive. You have almost an endless combination of filters and, therefore, an endless combination of primitives. The sky is the limit.
Now, before diving into the examples, and we’re going to talk about some of these filter primitives and create some real nice effects with them, I want to cover another topic really fast. It’s called the Filter Region. The set of filter operations need a region to be applied on. Okay?
Suppose you’re applying a filter effect on one of many elements in the SVG. How do you tell the SVG that you want that effect to be restricted to a specific area and not be applied on everything else on the SVG?
Maybe you want to do it the other way around. You have multiple images, multiple elements on the page, and you want the effect to be applied on the entire SVG. You can do that by specifying the filter region or editing the filter region.
Each element has a small region. Every element in SVG has a small region whose boundaries are defined by the borders of the bounding box. A bounding box, the short version is called B-box, in SVG, it is the smallest fitting rectangle around an element. If you have text, this is what the smallest fitting rectangle could look like. It could also have some padding on the top and bottom because the line height also counts here.
The bounding box of an element is, by default, the filter region for an element. If you apply an effect to this text, for example, it will be restricted to that small rectangle of the text. However, some filters affect pixels that are outside of that bounding box. For example, if you apply a blur effect and you look at this image here, on the right side and on the left side you can see the blur being clipped off, and that is very undesirable.
Now, according to the specification, it is often necessary to provide padding space in the filter region because the filter effect might impact bits slightly outside the tightfitting bounding box. For these purposes, it’s possible to provide; you can change the value, or you can change the area of the region by changing the position of the top left corner and the width and the height of that region. In order to expand it, you need to be able to provide negative values for the X and Y positions, and that is actually possible.
If we were to visualize the filter region area, we’d be able to see that this padding indeed exists by default. The filter region is the bounding box. But, if you look at it, if you really visualize it in real life, it’s not really just the bounding box. It is a little bit more than that.
Now, first of all, I want to talk about how I visualized it. I’m using a filter here. We have the FE, the filter effect, the flood filter effect. What the flood does is it literally floods the filter region with color. It just floods it. The color is going to cover everything in the filter region. But, when it does that, it’s going to cover everything behind it, so the text will no longer be visible. In order to put the text back--
I’m going to be using these filters in the rest of the examples as well, and that’s why I’m covering them right now.
In order to re-put the text on top of the image, you can merge both the flood color and the source graphic using the merge filter function. Each merge element has children elements. Each one of them is called merge node.
These are essentially just layers. The first one takes in the flood color and the second one takes in the source graphic. It puts them on top of each other.
The ones that come later are the ones that are on top. We have flood and then source graphics. The source graphic is going to be on top.
Each layer is called an emerge node, but you need to keep something in mind here. The units that you use to change the origin and the size of the filter region can be in percentages or they can also be in pixels. If you set them in percentages, they’re going to be relative to the bounding box of the element. Okay? If you want to move to extend it, you would use minus 5%, minus 5%, not positive here. Then you could extend it to 120% in width. if you use the “userSpaceOnUse” as the coordinate system, which is essentially the entire SVG, then you can specify the filter region and pixels but, when you do that, it’s going to be relative to the entire SVG.
These are a little bit of small technical details that I needed to cover. Now we can start creating some effects.
Now, the most basic effect that you probably, most of the time, find in tutorials about SVG filters is creating a drop shadow because it’s a very simple one. It’s very straightforward, and it gives you a clear idea of how chaining works, emerging layers, and stuff like that.
I’m going to create this effect here. I just have an image. I want to create a drop shadow. The drop shadow is a very light drop shadow. It’s not very dark, so it’s not really black. I’m going to have to change that color into grey. Sure. Okay.
You can start that by creating a filter element. Inside of that filter element, you use the offset filter primitive. The offset primitive offsets the input image relative to its current position in the image space by the specified vector, so a specified DX and DY. Then DX and DY will move the image on the X and Y-axis respectively. This offset filter is most important in effects like these, like creating drop shadows. This is why we’re using it here now.
Then the second one is the Gaussian blur effect. The Gaussian blur effect takes a standard deviation, which specifies the amount of blur that you want to use. You can specify one number only, which creates a uniform blur, or you can specify two numbers if you want to create only horizontal or vertical or different horizontal and vertical effects.
The in that we’re using in the offset, we’re taking the source alpha, and then we’re moving that - source alpha. If you have a JPEG image, then the alpha channel of that image is always going to be one because it’s fully opaque. And so, the alpha, source alpha, the alpha channel is going to be a fully black rectangle, which is the same size as the image. This is what we have here. We get the black rectangle, we offset it, and then we blur it using Gaussian blur.
Next, you flood. You want to color. You want to apply a color to that shadow, right? You don’t want it to be completely black anymore. You can use a flood, FE food. We’re flooding the area with a very light grey color, #bbb, which is going to give us the color result. Then you use the composite function.
Now, compositing is the combining of a graphic element with its backdrop. A backdrop is the content behind the element and what the element is going to be composited with. Using different compositing operations--there are 16 ones--you can specify which parts of the source and the backdrop are going to be visible.
You would have something like this. If you have two elements, one of them is blue and one of them is yellow, and they overlap in certain areas. Different composite operations are going to tell the browser which parts of that you want them to be visible. In our case here, the flood color is on top, so it is the source, and the backdrop, the shadow is the backdrop, which is the destination. We only want to show the part which is the backdrop itself, which is the shadow, so we use source in this case.
If we do that, we’re going to end up with only showing the parts where the flood color and the shadow intersection, which happens to be the shadow, and it’s going to be the color grey, which is the flood color. Essentially, we’re literally coloring the flood shadow, coloring the drop shadow with the flood. It’s confusing.
At this point, the only thing that is visible on the page is this here. We have a rectangle. We have it blurred. And, we have it colored. We have the drop shadow, but we don’t have the image. How do you combine them? Using merge.
You get the shadow. You put that in a merge node. Then you put the source graphic on top. You end up with this very small effect.
Offset the source alpha. Use that for input for the Gaussian blur. The Gaussian blur is going to blur it. Then you flood the area with color. Then you composite that color with the shadow. You have a colored shadow. Then you merge that shadow that you created with the source alpha. That’s how we create a simple drop shadow.
Another simple primitive that I personally really like is the FE morphology. Morphology: to morph an element. It means to transform the shape or the form of that element. The morphology filter effect operates on the form of the object.
It has two values. The first one is erode, and the second one is dilate. To erode an element means to make it thinner. To dilate means to make it thicker. This is literally what this primitive does. It either makes the element thinner or it makes it thicker.
Now, the amount by which you make it thinner or thicker is specified using a radius attribute. Even though we’re saying radius, which usually means a circle or an ellipse, the browser doesn’t really use a circle in order to make this erosion or dilation. Using the number that you specify in radius, the browser is going to create a matrix or a kernel, which is then used to do this kind of erosion and dilation.
This is a little bit technical jargon, but it’s necessary to know.
When applied to a JPEG image, to a photograph, erode and dilate have very, very predictable results. The image is going to be transformed into sort of an image that has been painted with really large strokes of color. This is literally what it looks like. If you were to animate the effect to see how it works, it’s the one on the top right. You start with the image, and the thicker you make it or the stronger the morphology--
Yeah, let me repeat that. Sorry.
--the thicker or the wider the strokes get and the less detail you have in the image.
The only thing that you might notice in this slide is that, when you apply these effects, you have erode and you have dilate. The difference between the image on the top right and the one on the bottom left is the color. One of them looks like it has lighter strokes and the other one has darker strokes. This is because, again, a little bit of technical stuff, erode sets each pixel to its darkest or most transparent neighbor, whereas dilate sets the channel to match the brightest or least transparent one.
Morphology, when applied to images, has a very predictable effect. The image did get -- if you look really close. The image, when you apply erode, it does get a little bit smaller on the edges, around the edges, whereas dilate makes it a little bit wider. One is dark. One is light. It’s a very predictable effect.
Now, this is all too much, again, gibberish. For single color objects such as text, for example, erode makes the object thinner or dilate makes it thicker. We can take advantage of this fact to fix something, fix something that we usually want to do and, in SVG, we get unpredictable results for.
If you want to add a stroke to text in SVG, you can do that using the stroke attribute. Okay? If you add a stroke, you can do that like this. Stroke deep pink, this is the color that I use most of the times because it’s the easiest. You add a deep pink stroke, and you give it a stroke width. You end up with the result on the second line here.
What happens when you add a stroke or an outline, you want to add an outline, but if you do it using stroke, you’re going to end up with a text that got thinner, so that stroke actually ate up part of the text. This is probably not the effect you want. If you want to add an outline, you want to preserve the size of the text and then add the outline to the text.
If you use stroke, this is the result that you get. You’re going to eat up some of the text. But, if you use SVG filters, you can fix that.
What do you have here? We have a source alpha. We have text. Okay. We take the source alpha of that text, and then we operate it. We specify the operator on the morphology filter to be dilate. We want to make the text thicker by three pixels. Then we flood the area with color--it’s deep pink again--which results in a pink flood area.
Then we composite. Remember compositing? You specify which part; you’re going to clip off something. In this case, if you use the operator in, what’s going to happen is, you have the color on top and then you have the text in the background. When you composite them together, the dilated text and the color, you’re going to end up coloring the text.
And then -- ugh!
[Laughter]
Sara: Then you merge the recolored text with the source graphic. You have the original text, which is in black. Then you have a pink version, a pink dilated version of that text. Okay? You have them on top of each other. Then you show them on top of each other with merge. You end up with the one on the bottom here.
Literally, right now, you have two layers of text. The one behind is the text itself, but it has been dilated and colored in pink. Then you put the original text on top again.
You can take this a little bit further and create something like this. You can create outline only text. For example, if you have this outline here, and you can put it on any kind of background, anything that happens in the background will be reflected inside of the text. This is also possible using the exact same technique, changing it a little bit, and then adding one filter to it.
We’re going to start with morphology again. We’re going to make the text thicker. But, what I’m doing here is, instead of taking the source alpha, which is black, and then I’m going to have to color it with FE flood and FE composite, which is a little bit too much, I’m taking the source graphic itself, which is my text, right? The text is going to be originally black or any other fill color that you want.
Then, you’re making the text thicker. Then you’re using the composite with the operator out. You have the thicker text in the background, and then you take the original text. You put it on top, and you cut it out. You’re creating sort of a hole in the thicker text by using the original text.
The most important part here is, because I’m not using FE flood to color the outline, the outline has the same color as the source graphic, so the same color as the text, which gets its color using the fill attribute, which you can specify using CSS. If you use this filter here, just these two steps, you can create outline text and then you can style that text and change the color in CSS, which is perfect for separational concerns.
The next thing here, this is the thing that I’m most excited about. I showed this demo to a lot of people, and some of them said, “Well, I thought this was created using 3D Max,” and another one was like, “Oh, my God! This is SVG?” I said, “Yes.”
[Laughter]
Sara: In this section, I’m going to talk about how you can use an image of a texture, any texture, and then use it to change the shape or apply a texture and change the shape of text. In particular, I want to create this effect that I borrowed from a Photoshop tutorial that I found on YouTube. Because I’m not a designer, I have no idea how to do things in Photoshop.
What I do when I want to experiment with SVG filters is I find a really nice Photoshop tutorial. I follow the steps that they make, and then I recreate those steps with filters.
Now, in the video, the designer created this effect by using what is known as a displacement map. A displacement map is an image whose color information is used to distort the content of another element. You have an image. It has colors. Those colors will be used to distort another element that is put on top of it.
In SVG filters, the FE displacement map primitive uses the pixel values from the input image that you give it to spatially displace the image from another input. Displacement map takes two inputs. One of them is the texture or the map and the other one is the element that you want to apply the texture to.
The steps to recreate that are, in Photoshop, you want to desaturate the image, turn it into black and white, according to the designer. Then you want to reduce the amount of detail in it by blurring it by just one pixel because, the more detail you have on an image, the less realistic the effect is going to be, so you blur it by one pixel, which is just enough. If you blur it more, it’s going to be too little detail, and it will also be very unrealistic.
You save that image, the black and white, slightly blurred. You save it as a displacement map. Then you reuse that image. You open it again but use it as a displacement map to distort some text. Okay. The text now has changed, but you don’t see a background image. You take the original image again, you use it as a background, and then you composite the text with the background to make the effect even more realistic.
In SVG: Fill the region area with an image that will be used as a texture. We have an image. We’re going to fill the region area with that image. We’re going to desaturate it using color matrix, which is another filter primitive, with the value saturate. Just like saturate in CSS. If you set the saturate to zero, the image is going to be desaturated.
You apply a one-pixel Gaussian blur to the image using FE Gaussian blur. Use the image to distort the text with displacement map. Blend the text into the background image using blend and apply a translucent effect to it just to make it a little bit more realistic by decreasing the opacity using component transfer. Then we display the text on the image behind it by merging the two layers again.
This is the code. We’re going to start with FE image literally just gets an image and puts it in the region area. It’s going to fill the region area with it. It even comes with a preserved aspect ratio. So, if you want to preserve the aspect ratio of the image or if you want to just fill the area regardless of the aspect ratio, you can do that.
Then you desaturate the image with color matrix. Color matrix takes many types. One of them, saturate, which is just a shorthand for a specific color matrix. It’s just for convenience, and it’s available for us. If you use type saturate value zero, you’re going to desaturate the image. Then you decrease the level of details by applying a Gaussian blur on the image itself. In this case, I’ve used 0.5 because I found that to be even more realistic than one pixel. That result is a map, and this is what it looks like. Okay?
Then you use that map as a displacement map to displace the text, which is our source graphic. The displacement map takes in a source graphic, and then it takes the N2. You can only have N and N2, no N3, no N4. The N2 is the map, so the map here is going to be used to displace the text in N.
The scale is 15. The scale allows you to specify the amount or the scale by which you want the effect to be applied. The larger the scale, the more dramatic the effect is going to be.
The channel selector is, you’re essentially telling the browser which colors you want to use to apply the distortion. Then there is a result, which is a textured text.
Then, using the color matrix on that textured text, you can reduce the opacity. A color matrix has a matrix for RGBA plus an offset at the end. That’s why you have five columns, and then four rows for RGBA. The 0.9 there, that’s where the opacity is. It’s initially one in the identity matrix. I just turned it into 0.9.
This is what the text now looks like. It has been changed, displaced using the texture.
Now, I want to show the texture. No, first I want to decrease the opacity. Okay. I didn’t decrease opacity.
I add now the image again back in the background using FE image again. Then you can change the gamma. What I’m doing is just a little bit of tweaking, just like the Photoshop guy did. I’m adding, increasing the contrast of the image using component transfer. The component transfer is very similar to matrix. But, instead of using a matrix, you can have a channel for each one of those components: R, G, B, and even A. Then you can use functions to change the values in those channels.
Now, the type gamma, the component transfer type gamma, literally works on the gamma of an image. It manipulates and changes the lightness and the dark areas of the image. If you make the dark areas darker, you’re increasing the contrast. If you make the light areas lighter with the darker dark areas, you’re increasing the contrast.
This is what I’m doing here. Changing the amplitude and exponent is going to make the dark areas darker and make the light areas lighter.
We have this displaced text. In the background, I re-added the original image and tweaked the contrast a little bit on that image. This is the background now. Then you blend the text with the background using the blend primitive.
Again, the blend takes two inputs that you want to blend together. The mode can be multiply screen, one of the many blend options that you have in CSS, except that we only have, like, four or five in SVG. You can definitely recreate the others on your own. I’m multiplying the text with the background, and then I’m merging the two on top of each other to get this result.
Now, the color could be made even more realistic. I just didn’t have the time to do it. Instead of using multiple, you use a linear burn, I would have to recreate the linear burn effect and then apply it. Then it becomes even more realistic, similar to this here. This is the original tutorial.
This is how you displace text with SVG filters.
Thank you.
[Laughter]
[Applause]
Sara: Now, in addition to getting an external texture and applying it to an element, SVG is even more cooler. It allows you to create your own texture that you can use as a displacement map later.
Filters can generate rich textures. You can create fire textures, cloud textures, marble, stone, paper, and we’re going to create paper, shortly. We can do that using the turbulence function, the turbulence filter. Whenever I say “function,” I mean “filter.”
The turbulence filter primitive generates and renders Perlin noise. This kind of noise is useful in simulating several natural phenomena like clouds, fire, smoke, and in generating complex texture like marble or granite. Just like FE flood, when you use FE flood, you flood the entire region with a color. If you use turbulence, you flood the entire region with a noise that we’re going to see shortly.
Now, in this section, I’m going to go over how you can create noise with FEE turbulence and how that noise can first be used to distort images and text. Then we’re going to see how the noise can be generated with this primitive in combination with SVG lighting filters.
We have a texture, and then you apply some light to it. You turn that into -- you have noise. You apply light to it. You turn it into a texture. The more different the noise, the more different the end result is going to be.
This is what FE turbulence looks like. You will usually only have to worry about three attributes. The base frequency, it specifies the grain of the noise. Very low values, such as 0.001, will produce larger patterns. You’ll see an example shortly. Very high values such as 0.5 will produce tiny patterns. Values in the range of 0.02 and 0.2 are a useful starting point for most textures.
There are also two types of noise: fractal noise and turbulence. The fractal noise is the more smooth one. It gets you closer to clouds and those kinds of effects. Then there is the numOctaves, which is the number of octaves which, very similar to music, is just the number of levels. The higher the number of octaves, the higher the number of layers you have and, therefore, the higher the detail level.
These 12 images represent 12 different results of noise created with turbulence with different types, base frequency, and numOctave values. Just to quickly go over them, an image, you have a base frequency of 0.04. This is a standard noise. We’re not playing with any of the other values, just a base frequency of 0.04.
B is the same as A, but we increase the level of details with numOctaves too. So, if you look at it, B is exactly the same as--
Is the contrast good enough? Can you see them?
Audience member: Yes.
Sara: Okay. B is the same as A, but with a little bit more detail if you look inside of it. C is the same as B, but we changed the seed to 2.01. Essentially, what the seed does, it affects the shape drastically, just not in a way that’s understandable. It’s just that to generate the turbulence, you need to generate a bunch of random numbers. That’s random noise.
If you want the same randomness, the same randomness in multiple places, for example over multiple elements that are next to each other, you can start the generator from the same seed multiple times. The seed is sort of like change. It’s a random number that the browser is going to use to start the randomness from.
D is the same as C with the number octaves 5, so we’ve increased the level in D. E shows that noise is continuous. If you have A and E that start with the same seed, and you put them next to each other, you’re going to see that the noise is continuous from A to E. It’s the same noise.
F is decreasing the base frequency to 0.01. That will create larger patterns. If you look at F this is a larger partner. Then you have the smaller patterns. Each one of these can be used to create different textures.
G and H show the difference in the number of octaves, again between G and H. I and J is noise, but that is using fractal noise, not turbulence. If you look at all the ones like A, E, B, C, D, G, H, all of these are intricate noise. Then I and J are more cloudy, more vague, and more blurred. These can be used to create clouds, for examples.
K and L show you that you can change the size of the noise, the size of the turbulence along the X-axis and the Y-axis. If you look at L, for example, you can create that effect, and you can create some really nice effect with that.
An example that I have now, this is a demo online that shows you how you can apply an effect. If you choose turbulence, and you use the turbulence as a displacement map on this image, this is what it looks like. Then you can change the scale to make it more dramatic or less dramatic. Then you can also apply the same texture to text, which will give you that warping text effect.
Derek Webber used FE turbulence as a displacement map on text to create this water splash effect, which is available in Smashing Magazine. Then Code Drops, they have this really nice button effect that are also using noise, and you’re animating that noise because all of the numbers, all of the values in the noise are animatable. If you animate those, you can end up with these effects.
I like this one the most. It’s the music one. This is vertical noise, like the one shown earlier, but you’re just animating it.
Now, what I want to talk about now is how you can use this noise, this turbulence, plus light effects, to create texture. More specifically, I want to create a very simple rough paper texture, which I borrowed from Michael Mellini, by the way, online.
This texture requires literally two steps, two functions, two primitives, and then you can do anything with it. You can use it as a displacement map or whatever you want to do. First, we’re going to start by creating the base for this whole effect with the turbulence primitive. We’re not specifying a type on the turbulence at this point, so we’re getting turbulence, not that cloudy effect.
Yeah, we’re creating the base frequency at 0.04, which is a fairly good start. Most of the times I just experiment, so I just change the values to see which one gets me closer to my goal.
Then I have a rectangle that I’m applying this texture to. This is what I have. This is what you start with.
Now, we need to shine a light on that surface. Shining a light on a graphic provides additional depth and texture. To create a lighting effect, you need to specify three things: a light color specified by the lighting color property you’re going to see shortly; a light type, which is specified using a light type.
There is diffused lighting and there is specular lighting in SVG. The diffused lighting indicates indirect light from an outside source and is best used for sunlight effects, something to simulate sun. You use diffuse lighting.
If you want something to simulate more of a lamp or a light inside of a room, you use specular lighting, which specifies secondary light that bounced from reflective surfaces.
Both these primitives shine light on an object or image by using the alpha channel of that image as a bump map. Transparent values remain flat while opaque values rise to form peaks.
Let me rephrase that. A light source filter uses an input alpha channel to provide depth information. You have an alpha channel. You take the alpha values of that channel, and then you use those as a bump map for the light.
How does the light know that this part of it is high and the other one is low? How do you create shadows and hills? It uses the alpha channel to do that. The more transparent, the lower and flatter it is. The more opaque, the higher it is.
Because FE turbulence generates an alpha channel full of noise and values, so red, green, blue are noisy and random; so is alpha. It comes with a lot of different alpha values. It produces a nice variable Z terrain that creates highlights when we shine our light on it.
Now, there are two. Yeah, so there are two types of light, and there are two sources of light. To create a light source, you nest the light source inside of the light type, so you have type and source inside of it. Then you finally specify the lighting color.
To light the noise we generated earlier, we will apply a white diffused lighting, which is the sunlight, emanating from a distant light source. This is what the code looks like. Both of these primitives accept an attribute called surface scale, which is the Z index multiplier. If you increase the scale, the Z index is going to be higher, and you’re going to get more steeper, steeper visual slopes in your texture.
Then you have azimuth and elevation on the light source. As you can see in this graphic here from the specification, azimuth and elevation, both of them specify where the light source is coming from, essentially. You also need to play with that because the closer you make it to the texture, the different the effect and the lighting is going to be.
We have here turbulence, and then we have lighting applied to that turbulence. This is what we get. There is too much sharp edges here, so we need to smooth the noise out. We can do that by using fractal noise to start with instead of using turbulence.
Switching the type to fractal noise gives us a better base, which is this. It is smoother, a little bit more like water in this case. It’s not really rough paper. Rough paper has more detail, so we need to increase the detail, and we can do that by increasing the number of octaves.
Five octaves is usually the highest you will need for most of your effects. If you have six and more, the effect is not very visible. If you have a very sharp eye, you can notice a little bit of difference. I do. But, most of the times it’s not really that big of a difference.
If we increase the number of octaves, it gets a little bit more grain. It looks much better, generally. You can change the effect a little and tweak it more by playing with the source and the distance of the light, maybe even the color. If you change the color, this is going to colored rough paper. Decreasing the elevation on the light source, for example, is going to make it look like this. It’s a little bit darker, which brings us a little bit more to sandpaper, which is not what we want. We want rough paper. I think the previous version looked just fine.
That’s all you need to create a simple texture. You need noise, and you apply some text to it. Then you can use this texture to use it as a displacement map. If you want to simulate writing on paper, you can do that. You can do pretty much anything with this.
Now, you can also create a myriad of different effects if you take that noise and you apply different other filters to it. This is an example here. This is FE turbulence. Some of them might look more closer to bokeh effect. Others, like fireworks or something. What we’re doing here, and the ones on top, we’re blurring, we’re changing the colors using color matrix. Then, in the ones at the bottom, we’re changing the sharpness using convolve matrix. That filter primitive, I’m not going to talk about that because that one requires an entire hour, and it’s the most complex of all filters because it allows you to create your own filters - a filter to create filters.
You can do a lot of things if you have noise. If you delete colors, you’re going to end up with a different texture. You can do anything, essentially. The sky is the limit.
Now, before we end this talk, I want to give a short overview of two primitives that are also the most used that enable you to manipulate the colors of images. We talked about thinning and thickening of text or of images. We talked about blending, compositing, turbulence, textures, displacement maps. There is a lot more.
I want to cover image color manipulation, just like the ones you can find in CSS. More specifically, I want to cover poster effects, something that would create a poster version of whatever you have.
Unlike Chris Heilmann, I do draw a little bit, so the image on the left, I drew that using pastels and then I turned that digitally into a poster version. We have the real pastel with all of the color gradients. Then, on the right side, you turn that into a poster effect.
Now, this effect can be created using discrete component transfer function. I’m going to go over that shortly. But, when you use this function here, it’s called component transfer, again, RGB, a lot of control. You can use different functions. We used the gamma function earlier to control contrast and brightness. Then you have the discrete function.
The discrete function has different attributes, which is called table of values. It reduces the number of colors in an image and shows more sudden color changes, which look more like the image is made up of color bands or color clusters. Again, if you look at this, instead of having a gradient of every single color, every color -- you have less colors. The browser does this by doing some sort of mapping. If you have, for example, table values set to zero, 0.51, you can have as many values as you want. The more values you give, the more ranges you have, and the browser is going to map the color to these ranges.
If you have a red color, for example, between the range of zero and 0.33, the browser is going to map it to just zero. All of the shades between zero and 0.3 will just be one shade, less color; 0.3 to 0.66 will be mapped to your 0.5, so you only have three shades of red. You’re decreasing the number of colors and, therefore, getting that poster effect.
This is what you get here. All I did here is I used discrete. I used three different colors. Then the browser is going to take the whole shades of red and green and blue, and it’s going to map the shades into the ranges I specify here.
Another thing is I want to create a duotone effect with contrast control. To create a duotone effect in Photoshop, you usually do two steps. You turn the image into greyscale, and then you map the greyscale range into a new range that, instead of having black and white on the edges, so instead of a range from black to white, you map that to a range from pink to yellow or whatever color you want to do. In other words, you will need a gradience map that the browser will use to map your greyscale image to.
Now, this is the tutorial that I found on YouTube, again. You had this black and white. Then you’re going to do a little bit of mapping. You change the black to some color that you want, so all of the shades of black will be transferred to this or mapped to this color, and then the white, you change that into your other color, and you get a duotone effect like the one from Spotify.
How do you do that in SVG? You need to create a gradient map using component transfer. But, instead of using the discrete value, which limits the number of colors, we’re going to use a table value. In order to map your colors into a new range of colors without losing any colors, like we do in discrete, you can use the component transfer type table.
Suppose you want to create the duotone image using these two colors here, you have a pink color and then you have another color. For every one of those colors, the two colors, you get the RGB values, which you have on the right. Then you divide that value, the R-value, the G-value, and the B-value. You divide that by 255. You get a small decimal value, and that’s what you’re going to use in the function here.
These three here--R, G, B--are the RGB of pink. The other ones here--R, G, B--are the values for the other color. Red is going to be mapped from black and white to this range. Then G is going to be mapped to this range and B to this. That gives you the duotone effect.
This looks nice, but it does look like it’s missing something. If you increase the lightness of the colors, increase the lightness of the yellow, and increase the intensity of the pink, the effect becomes a little bit more realistic. You can do that, again, by using the gamma function of component transfer, increasing the amplitude, decreasing the exponent, a little bit of tweaking, you get a better result.
Now, you may have noticed an attribute on the component transfer filter. Here it’s called color interpolation filters. This attribute is used to switch from and between the linear RGB space and the SRGB space.
It is useful to get more desirable results when applying certain effects, for example, if you want to apply an inversion effect, if you have an image and you want to invert the colors of that image. If you use the default linear RGB space, you’re going to end up with a result on the right, which is not very desirable. The one you want is the one of the left with the more intense colors.
Now, the reason this happens, this is not really wrong. The mapping is happening. It’s correct. Everything is working as expected. But, because of the way the human eye perceives colors, lighter tones always look more like just white to us. We have all of the tones we need in the right one, but our eyes are seeing it in too light way.
In order to change this and get more darker shades and less lighter shades, you can switch the SRGB space, and you get a more desirable not more right, because both of them are correct. You get a more desirable effect.
Yeah, before the thank you, just a quick note.
If you use any kind of coloring effect in SVG and the colors are not really just like you expected, the image is too light, most of the time the solution is going to be to switch the color interpolation filters to SRGB.
That is all I have. Thank you so much.
[Applause]
Marc Thiele: Thank you, Sara.
Sara: You’re welcome.
Marc: Thanks a lot.
