#cceef3 - will be converted to: %23cceef3 <div class="snippet-clipboard-content no

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Incorrectly escapes # in style-element about svg-url-loader HOT 3 CLOSED

bhovhannes commented on May 29, 2024

Incorrectly escapes # in style-element

from svg-url-loader.

Comments (3)

bhovhannes commented on May 29, 2024

In case of UTF-8 encoding all # characters should be encoded.

For example, if we take the following image:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 60 60">
  <style type="text/css">
    circle { fill: #FF0000; }
  </style>
  <style type="text/css">
    circle { stroke: #000; }
  </style>
  <circle cx="30" cy="30" r="25" />
</svg>

it will be encoded as:

data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'%3E %3Cstyle type='text/css'%3E circle %7B fill: %23FF0000; %7D %3C/style%3E %3Cstyle type='text/css'%3E circle %7B stroke: %23000; %7D %3C/style%3E %3Ccircle cx='30' cy='30' r='25' /%3E %3C/svg%3E

Everything works just fine when we put that string in html (you can just copy/paste the code below to codepen).

<html>
  <style>
    body { 
      background-image:url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 60 60'%3E %3Cstyle type='text/css'%3E circle %7B fill: %23FF0000; %7D %3C/style%3E %3Cstyle type='text/css'%3E circle %7B stroke: %23000; %7D %3C/style%3E %3Ccircle cx='30' cy='30' r='25' /%3E %3C/svg%3E");
      background-size:200px;
      background-repeat:no-repeat;
    }
    </style>
  <body>
    this works
  </body>
</html>

@joacim-boive can you create a repo or codepen illustrating your problem?

from svg-url-loader.

bhovhannes commented on May 29, 2024

@joacim-boive your case seems to be similar to #111.

In case you are using image inside your css file, as url(), you need to specify noquotes loader option.

from svg-url-loader.

joacim-boive commented on May 29, 2024

@bhovhannes
Hmmm... I don't remember where I actually had the problem now. :)
Maybe you're noquotes option solves it - I'll come back and respond if/when I find/solve the problem.

Thanks!
/J

from svg-url-loader.

Recommend Projects