Skip to content

Created:

Last modified:

SVG Filters - From a talk by Sara Souedian

I was watching an "An Event Apart" video SVG Filters: The Crash Course by Sara Soueidan, and I was so excited and intrigued to try out these SVG filters that I stopped the video part way through and decided I wanted to give the ones already shown a go. There is especially a part about creating dialated text to in essence create an outline to the text that doesn't eat into the width of the text.

Drop Shadow

First off Sara starts with the drop shadow, which, yes, in CSS is suuuuuuuper easy and basic to set up. But the SVG has some interesting aspects, even when just scratching the surface.

SVG drop shadow filter applied to embedded image
<svg class="svg-filter drop-shadow" width="600" height="450" viewBox="0 0 750 650">
	<filter id="myFilter">
		<feOffset in="SourceAlpha" dx="20" dy="20"></feOffset>
		<feGaussianBlur stdDeviation="10" result="DROP"></feGaussianBlur>
		<feColorMatrix type="matrix" in="DROPSHADOW" result="FINALSHADOW" 
			values="1 0 0 0 0
							0 1 0 0 0 
							0 0 1 0 0
							0 0 0 0.3 0"></feColorMatrix>
		<feMerge>
		<feMergeNode in="FINALSHADOW"></feMergeNode>
		<feMergeNode in="SourceGraphic"></feMergeNode>
		</feMerge>
	</filter>
	<image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#myFilter)"></image>
</svg>
CSS drop shadow filter on HTML img element
CSS drop shadow filter on HTML img element
HTML:
<img class="img drop-shadow" src="..." width="600">
CSS:
filter: drop-shadow(20px 20px 10px hsla(0deg, 0%, 0%, 0.3));

Morphology Filter

Erode and Dilate are the two types of effects the feMorphology filter has. The Erode option 'crumbles' the neighboroughing pixels at the edge of the item being filtered by the radius value passed in, and Dilate option expands the filtered items pixels into it's neighboroughing pixels.

Apparently the erode filter sets the 'eroded' pixels to it darkest or most transparent neighbour and the dilate filter sets the dilated pixels to the brightest or least transparent pixel from it's neighbour. This is what makes an eroded image darker looking and a dilated image lighter looking.

Test image with no filter
Erode filter applied with radius = 2
Dilate filter with radius = 2
Erode & Dilite filter both with radius = 2

It's text time

Hello World

Hello World

Hello World

CSS test 
p {
	font-size: 8rem;
	color: black;
	font-weight: 700;
	line-height: 1.2;
}

p.stroke {
	-webkit-text-stroke: 3px deeppink;
}

p.shadow {
	text-shadow: 3px 3px 3px deeppink, -3px -3px 3px deeppink,
		-3px 3px 3px deeppink, 3px -3px 3px deeppink;
}
Hello World
SVG Text element with stroke-width = 3px; the stroke eats into the width of the text itself
Hello World
SVG Text element with a filter applied which dilates a copy of the text, floods it with another colour, composites the original image and the colour together using the 'in' operator (only the overlapping areas show with the destination, or flooded, colour showing). Then the two are merged

To change the colour of the outline, the 'flood-color' of the feFlood property inside the SVG would have to be changed, so only controlled via the HTML itself or with a Javascript call.

Hello World
SVG Text element using filter applied with dilates a copy of the text and creates a composite of this result with the original source text using the 'out' operator which cuts out any overlapping sections of the two. Leaves an outline only.

To change colour of the outline the 'stroke' property of text can be changed, meaning that it can be controlled via CSS, unlike the example prior.

"This is where the interesting stuff starts" - Sara

Like... really? I thought it was already plenty interesting. But Ok!

A write up on this is to come in the future...

Hello World
Text "Hello World" overlayed on image of pastel leaves