Practical SVG

BEYOND DRAWING and animating shapes, SVG has several features that can alter how the image ends up looking. We’ll review four of them.

FILTERS

You may already know that CSS has filters. For instance:

.grayscale-me {

  filter: grayscale(100%);

}

SVG probably looks at those and is like: “Cute, kid.” SVG filters are the original gangsters of filters. A similar filter defined in SVG would look like this:

<filter id="grayscale">

  <feColorMatrix type="saturate" values="0" />

</filter>

You can then apply that via CSS like so:

.grayscale-me {

  filter: url("#grayscale"); /* space separate   multiple filters */

  /* or in an external file */

 filter: url("filters.svg#grayscale"); ...