AshKeys

Confessions and Confusions of a Freelance Fullstacker.

Ashok Mannolu Arunachalam, How toSVGCSSTools
Back

How to convert SVGs to desired color

Most of us encounter a situation where an SVG is pixel perfect for re-use but there is one slight thing is missing. The color of the SVG has to be different >_O. I have recently encountered this situation. Instead of just duplicating the SVG file and editing the color to desired one (I knew that was the easy one >_<), I spent some time looking for options to do it in CSS only because duplication did not feel right. Vola! \O/

I found it and I want to share it with you guys. Using this online tool, we can create a filter property value that will convert/transform an SVG to our desired color!

Css Filter Generator

CSS filter generator to convert from black to target hex color

This helped me to transform the SVG icons into desired colors ^_^

Hope this helps you guys too!