32: Filtros SVG em elementos SVG e HTML - CSS-Tricks

Talvez você já tenha ouvido falar de filtros CSS? Você pode aplicá-los em qualquer elemento do CSS, como:

.apply-css-filter ( -webkit-filter: grayscale(0.5); filter: grayscale(0.5); )

Você pode até aplicar isso a um elemento HTML ou SVG.

Mas também há filtros que você pode definir no SVG e há mais opções ao fazer isso. Aqui está um exemplo de definição:

Você pode então aplicá-lo a um elemento direto no SVG, como:

Ou, a partir do CSS, referenciando o ID da mesma forma:

.apply-svg-filter ( -webkit-filter: url(#pictureFilter); filter: url(#pictureFilter); )

Existem muitos filtros SVG. Os familiares, como desfoque, e os estranhos que aplicam efeitos de pintura. Aqui está a especificação.