3

I found this strange behavior, when using an inline svg as a background image, hex color inside fill attribute is not working:

div {
  width: 40px;
  height: 40px;
  border: 1px dashed #000;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.first {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><polygon fill='#F00' points='0 0, 0 100, 50 66.7, 100 100, 100 0'></polygon></svg>");
}

.last {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><polygon fill='red'  points='0 0, 0 100, 50 66.7, 100 100, 100 0'></polygon></svg>");
}
not working (fill="#F00"):
<div class="first"></div>
working (fill="red"):
<div class="last"></div>

As per SVG specs (https://www.w3.org/TR/SVGColor12/#Color_syntax) 3 digits hex colors are supposed to work.

Any idea what is going wrong ?

PS: I noticed rgb() syntax works fine, if you are stuck with the same issue

Apolo
  • 3,844
  • 1
  • 21
  • 51
  • 4
    You need to replace `#` with `%23`. Use `fill='%23F00'` instead of `fill='#F00'` [How to escape hash character in URL](https://stackoverflow.com/questions/5007352/how-to-escape-hash-character-in-url) – enxaneta Apr 26 '19 at 09:20
  • 1
    Genius ! You sir deserve an upvote, feel free to post this as an anwser :) Thank you – Apolo Apr 26 '19 at 09:23
  • This is a tool you may want to use to encode the svg you need to use in CSS: [URL-encoder for SVG](https://codepen.io/yoksel/pen/JDqvs). Also: I consider this article very useful: [Optimizing SVGs in data URIs](https://codepen.io/tigt/post/optimizing-svgs-in-data-uris) – enxaneta Apr 26 '19 at 09:32

0 Answers0