Unfortunately, I can't get dev.to to display the SVG output images, so you'll have to read the full article over on my website ioroot.com to see the example images and code...
Full post over at: https://ioroot.com/svg-effects-for-instagram-like-filters/
excerpt: The power of SVGs is astonishing. Simple image-manipulation tools to create Instagram-level filter effects.
TL;DR. Skip all the chatter, show me the SVGs!
🎛 The Adjustments
- Saturation
- Brightness
- Contrast
- Sharpening
- Hue rotation
- Overlays & Blend modes
- Chaining filters
- Black & White
- Full Instagram filter
Note, this article is going to try to be as simple as possible. I'm not going into the depths of SVG functions and elements... more just a reference on how to do specific things. It's a cobbled collection of information I've found from other people rather than any critical-thinking on my part. Check out the links for more in-depth info on each topic.
Just some background info...
There you are, developing away on your latest project and CSS is kicking ass. It's allowing you to do all of those cool blend-modes and effects but you want to combine it with some SVG goodness.
This was what I was trying to achieve on my latest project for my company website LondonParkour.com
What I also wanted to achieve was Instagram-like adjustments to images - in SVG. So that's what this article is all about - how to get those effects. I'll link to all of the posts I used to help me figure this all out too, but essentially, this is how to do the basics of image adjustments on bitmap images using SVG filters and shapes.
Main Links of where I found this information are:
- https://vanseodesign.com/css/filters-to-adjust-brightness-contrast-opacity-and-inversion/
- https://una.im/CSSgram/
- https://webplatform.github.io/docs/css/functions/hue-rotate/
- https://yoksel.github.io/svg-gradient-map/#/
- https://yoksel.github.io/svg-filters/#/
- https://github.com/jorgeatgu/fildrop/blob/master/demo.html
- https://github.com/una/CSSgram/tree/master/source/scss
- https://pleeease.io/play/
- https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/
- https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFlood
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
Big thanks to all of these people and their efforts. I've just copied their hard work and tweaked it a little to do what I needed, these are the real innovators who figured out how the filters worked.
This is a short snippet of the full post over at my website at: IORoot.com
Top comments (0)