SVG Filters Crash Course

  • Post comments:0 Comments



When it comes to graphical effects on the Web, CSS has already come a long way in the last few years, with the introduction of CSS filters and blend modes a few years back. However, when compared to effects available in graphics editors such as Photoshop and the likes, CSS is still behind, by far. But SVG, on the other hand, is not that far behind.

SVG comes with a set of filter primitives that enable you to recreate Photoshop-grade effects in the browser, using a few lines of code. While the syntax and attributes of these filters may seem intimidating and not very friendly at first, once you get a grasp of how they work, you’ll have a very powerful tool in your arsenal, that allows you to push the boundaries of what is possible on the Web.

In this talk, Sara is going to give you a crash course on SVG filters — why they are awesome, how they work, and examples of powerful effects you can create with them, in an friendly, easy-to-follow approach. Brace yourself, and get ready to set your imagination free and expand your creativity for what’s possible on the Web today.

This talk was given at the beyond tellerrand 2018 conference by Sara Soueidan.

Checkout the beyond tellerrand channel for more great talks: https://www.youtube.com/channel/UCTmgiUv2MGSFy7Wt-cMDpOw

This talk is under the creative commons license. freeCodeCamp is not associated with this talk. We’re just excited to bring more exposure to to it!

Information about beyond tellerrand:
https://beyondtellerrand.com/
https://twitter.com/btconf

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

Leave a Reply