Być może słyszałeś o filtrach CSS? Możesz je zastosować do dowolnego elementu z CSS, takiego jak:
.apply-css-filter ( -webkit-filter: grayscale(0.5); filter: grayscale(0.5); )
Możesz nawet zastosować to do elementu HTML lub elementu SVG.
Ale są też filtry, które możesz zdefiniować w SVG, a kiedy to zrobisz, masz więcej opcji. Oto przykładowa definicja:
Następnie możesz zastosować go do elementu bezpośrednio w SVG, na przykład:
Lub z CSS, odwołując się do identyfikatora w podobny sposób:
.apply-svg-filter ( -webkit-filter: url(#pictureFilter); filter: url(#pictureFilter); )
Istnieje wiele filtrów SVG. Znajome, takie jak rozmycie, i dziwne, które nakładają efekty malarskie. Oto specyfikacja.