Easily Color SVGs via Code

Nate Byrnes
Apr 24, 2023
2 min read

Updated: Aug 5

Scalable Vector Graphics (SVGs) are just code-based vector drawings that are infinitely scalable.

They can be colored via CSS, or by special html for certain font packages (e.g. FontAwesome).

By default SVGs have no color specified so they relay as Black #000000 by default.

Many icon packages come in SVGs, so sometimes I have Developers asking me to give them an SVG that is already colored, if they cannot get some old software to dynamically integrate a color.

Best Practice: Add a color 'fill' code DIRECTLY in the SVG File - It is clean and easy!
Do NOT use an image editor!
- Most editors, like Photoshop, will convert the SVG to a raster image encapsulated within an SVG tag - which removes its scalability (gets blurry when enlarged) & makes the file larger.

How to edit the SVG File:

Right click the SVG file and open in a Text editor.
1. If you have Notepad ++ (free), Visual Studio Code (free), or any other code editor - use that for a better experience. Code editing software shows different types of code in different colors, for a more intuitive experience.)
2. Below info was pasted from Visual Studio Code, thus it shows the code in different colors.
Add the FILL attribute to the necessary tag.
1. fill=#______"
  1. The underscore area is the hexadecimal for a specific color.
  2. Color to Hex tool: https://www.w3schools.com/colors/colors_picker.asp
2. Most Common Method: Color the entire item one color -- add the FILL attribute to the <SVG tag.
3. Alternate Method: Color different 'paths' different colors -- add the FILL attributes to the respective <PATH tags, instead.
4. Do NOT use both - just one method ('Path' method would overrule 'svg' method).
Example of coloring entire SVG via SVG tag (using an SVG from fontawesome).
1. <svg fill="#767676" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" ><script>( function hookGeo() { //<![CDATA[ ----- This info cropped out to save space ----- //]]> })();</script> <path d="M0 48C0 21.5 21.5 0 48 0H336c26.5 0 48 21.5 48 48V207l-42.4 17H304 272c-8.8 0-16 7.2-16 16v32 24.2V304c0 .9 .1 1.7 .2 2.6c2.3 58.1 24.1 144.8 98.7 201.5c-5.8 2.5-12.2 3.9-18.9 3.9H240V432c0-26.5-21.5-48-48-48s-48 21.5-48 48v80H48c-26.5 0-48-21.5-48-48V48zM80 224c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V240c0-8.8-7.2-16-16-16H80zm80 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V240c0-8.8-7.2-16-16-16H176c-8.8 0-16 7.2-16 16zM64 112v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V112c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zM176 96c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V112c0-8.8-7.2-16-16-16H176zm80 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V112c0-8.8-7.2-16-16-16H272c-8.8 0-16 7.2-16 16zM423.1 225.7c5.7-2.3 12.1-2.3 17.8 0l120 48C570 277.4 576 286.2 576 296c0 63.3-25.9 168.8-134.8 214.2c-5.9 2.5-12.6 2.5-18.5 0C313.9 464.8 288 359.3 288 296c0-9.8 6-18.6 15.1-22.3l120-48zM527.4 312L432 273.8V461.7c68.2-33 91.5-99 95.4-149.7z"/></svg>
2. Here is the Result: 767676 is a medium grey

Easily Color SVGs via Code

How to edit the SVG File:

Recent Posts

Comments