Wanna see something cool? Check out Angular Spotify 🎧
All Articles

SVG fill color doesn't work with hex colors

Problem

Basically, this works fine with fill='red'

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='red' d='M 0,10 H 20 L 10,0 Z' /></svg>")

This doesn’t work as well with fill='#FF0000'

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='#FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")

Reason and solution

# in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #. That is the value of escaped # character. It works with fill='%23FF0000'

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='%23FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")

Wondering what is Fragment Identifiers, check this article

https://css-tricks.com/svg-fragment-identifiers-work/

Reference

https://stackoverflow.com/a/61099329/3375906

Demo

Published 17 Mar 2021

Recent Posts

Migrate Angular to ESLint

I'll show you how to migrate from TSLint to ESLint and using husky to run lint every time you try to make a commit

Convert Promise to Observable

You'll need those tips one day if you get used to RxJS 🤣


Follow @tuantrungvo on Twitter for more!