Skip to content

Created:

Last modified:

(MORE) SVG Filters - From a talk by Sara Souedian

To start with at least this is just going to be a quick and dirty, get the code on the page with little to no explanation.

feComponentTransfer - Discrete

Posterise the kitty

<svg width="400" height="600" viewBox="0 0 400 600">
	<filter id="discrete-kitty">
		<feComponentTransfer result="COMPONENT">
			<feFuncR type="discrete" tableValues="0 0.5 1">	</feFuncR>
			<feFuncG type="discrete" tableValues="0 0.5 1"></feFuncG>
			<feFuncB type="discrete" tableValues="0 0.5 1"></feFuncB>
		</feComponentTransfer>
		<feMerge>
			<feMergeNode in="SourceGraphic"></feMergeNode>
			<feMergeNode in="COMPONENT"></feMergeNode>
		</feMerge>
	</filter>
	<image 
		xlink:href="..." x="0" y="0" 
		width="100%" 
		height="100%" 
		filter="url(#discrete-kitty)">
	</image>
</svg>

Duotone 

<svg width="400" height="600" viewBox="0 0 400 600">
	<filter id="duotone-kitty">
		<feColorMatrix type="matrix" values="
							.33 .33 .33 0 0
							.33 .33 .33 0 0
							.33 .33 .33 0 0
								0  	0		0	1 0">
		</feColorMatrix>
		<feComponentTransfer result="COMPONENT">
			<feFuncR type="table" tableValues="1 1"></feFuncR>
			<feFuncG type="table" tableValues="0.09803921568627451 0.0784313725490196"></feFuncG>
			<feFuncB type="table" tableValues="0.0784313725490196 0.5764705882352941"></feFuncB>
		</feComponentTransfer>
		<feComponentTransfer result="COMPONENT2" color-interpolation-filters="sRGB">
			<feFuncR type="gamma" exponent="1.25" amplitude="1.29" offset="0"></feFuncR>
			<feFuncG type="gamma" exponent="1.25" amplitude="1.29" offset="0"></feFuncG>
			<feFuncB type="gamma" exponent="1.25" amplitude="1.29" offset="0"></feFuncB>
		</feComponentTransfer>
		<feMerge>
			<feMergeNode in="SourceGraphic"></feMergeNode>
			<feMergeNode in="COMPONENT2"></feMergeNode>
		</feMerge>
	</filter>
	<image xlink:href="/assets/img/kitty-4d78a576ae4d0524-400-600.jpg" x="0" y="0" width="100%" height="100%" filter="url(#duotone-kitty)"></image>
</svg>