Use hexa color code for background image as stroke instead of RGBA

Question

I am facing 1 problem while assigning color to the background image. Basically the background image is hamburger menu.

If I assign the color as RGBA format then it's working fine in development environment. But when I build the application then it's automatically changes the color code in Hexa format.

I tried assigning hexa color code directly but its not working. Can some one please suggest a solution to this.

#keyword div {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(4,71,87,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

<figure id="keyword">
  <div></div>

</figure>

What I want is to assign stroke='##044757' instead of stroke='rgba(4,71,87,1)'

Sample fiddler example

score 2 · Answer 1 · answered Oct 21 '21 at 18:15

2

The character # is reserved in URLs as the start of a fragment identifier. You must encode this as %23 for the URL to be valid.

stroke='%23044757'

answered Oct 21 '21 at 18:15

Musabbir Mamun

251
3
6

Thank you, this works. would you please let me know Why the rgba value is converted to hexa when we build the project. One more thing some times it's not converting the rgba value eg: rgba(255,255,255, 0.9) this works, but if I give rgba(87,166,186, 1) then it's converting the value to hexa – Hemant Oct 22 '21 at 11:12

score 0 · Answer 2 · answered Oct 21 '21 at 18:10

0

'#' needs to be url encoded so it becomes stroke='%23044757' where %23 is the code for '#'.
Also in your fiddle nothing shows even in the first example with rgba because you forgot to set the width for figure.

answered Oct 21 '21 at 18:10

FurrySenko

549
3
12

score 0 · Answer 3 · answered Oct 21 '21 at 18:17

You can save your svg file with the hex-value and load it as external file:

background-image: url(your-svg.svg);

or inline:

#keyword div {
  width: 100px;
  height: 100px;
}

#keyword svg {
  width: 100%;
}

<figure id="keyword">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path stroke="#125478" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 8h24M4 16h24M4 24h24"/></svg>
    </div>
</figure>

or with your method with replacing '#' with '%23' for encoding purposes:

#keyword div {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23125468' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

html {
        font: 1em/1.5 sans-serif;
}

figure {
        padding: 0
}

figcaption {
        margin-top: 0.5em;
        max-width: 80ch
}

figure>div {
        width: 100%;
        height: 4em;
        background-repeat: no-repeat
}

* {
        box-sizing: border-box
}

<figure id="keyword">
    <div></div>
    
</figure>

Use hexa color code for background image as stroke instead of RGBA

3 Answers3