Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rendering of '#' Characters In Inline SVG Data Started to Cause A Chrome Deprecation Warning #2379

Open
muratgozel opened this issue Apr 21, 2018 · 2 comments
Open

Rendering of '#' Characters In Inline SVG Data Started to Cause A Chrome Deprecation Warning #2379

muratgozel opened this issue Apr 21, 2018 · 2 comments
Labels
t: Enhancement

Comments

@muratgozel
Copy link

This is a new warning raised by Chrome recently.

I have the following stylus content:

brand-gray2 = rgb(232,232,232)

input[data-numeric]
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 5 14.263' width='5' height='14'><polygon fill='"brand-gray2"' points='0 4.327 2.5 0 5 4.327 0 4.327' /><polygon fill='"brand-gray2"' points='0 9.936 2.5 14.263 5 9.936 0 9.936' /></svg>")

Stylus renders it as follows:

input[data-numeric] {
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 5 14.263' width='5' height='14'><polygon fill='#e8e8e8' points='0 4.327 2.5 0 5 4.327 0 4.327' /><polygon fill='#e8e8e8' points='0 9.936 2.5 14.263 5 9.936 0 9.936' /></svg>");
}

Stylus automatically converts the variable inside the fill attribute in the inline SVG data from brand-gray2 to #e8e8e8 which is a great thing.

As Chrome published a new update, the # characters will no longer accepted in data URI body:

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M67, around May 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

As mentioned in the deprecation notice, if i change the attr value from fill='#e8e8e8' to fill='%23e8e8e8', warning goes away.

You can see the details of the deprecation notice here: https://www.chromestatus.com/features/5656049583390720
@rockboom
Copy link

rockboom commented May 3, 2018

@muratgozel there are other problem! those are my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <svg id="box" width="1000" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" >
        <g class="paths">
            <path d="M499 313, A80 50 0 1 1, 500 313" id="a1" stroke="none" stroke-width="3" fill="#ff33aa"></path>
        </g>
        <text class="textPaths">
            <textPath cursor="pointer" startOffset="27%" letter-spacing="5" xlink:href="#a1" stroke="#ff0000">let's do something</textPath>
        </text>
    </svg>
</body>
</html>

I want to show the svg in browser with .html file，it's right! And then I want to render svg into canvas element. I got all elements included by svg with js code var data = document.getElementById('box').parentNode.innerHTML.
Use the method: CanvasRenderingContext2D.drawImage(data, 0, 0) to render data into canvas element. Absolutely warning was triggered. according to your illustrate, I changed the # symbol into %23, my .html didn't work as I expected! everything is wrong.
So I thought about the other way. in my .html file, svg's code didn't change, butI processed data like this: var data = document.getElementById('box').parentNode.innerHTML.replace(/#/g,'%23'). Well, the warning goes away, however the picture in canvas element isn't my expected. So do you have any ideal to solve this problem?

@muratgozel
Copy link
Author

You may try rgb or rgba format for the fill attribute. Something like fill="rgb(0, 0, 0)" should work.

@MikhailOkhrimenko MikhailOkhrimenko mentioned this issue Aug 28, 2018
Closed
3 tasks
@nayuki nayuki mentioned this issue Mar 9, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
t: Enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@iChenLei @muratgozel @rockboom