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

Inline SVGs fail to display in latest Chrome Canary #29

Closed
sbstnmsch-zz opened this issue Mar 1, 2016 · 3 comments
Closed

Inline SVGs fail to display in latest Chrome Canary #29

sbstnmsch-zz opened this issue Mar 1, 2016 · 3 comments

Comments

@sbstnmsch-zz
Copy link

The latest Chrome Canary (Version 51.0.2663.0 canary (64-bit)) fails to display postcss-svg-generated inline SVGs. Using postcss-svgo (SVG Optimiser) after fixes this issue.

Try out:

<html>
    <style>
        body {
                display: flex;
                justify-content: center;
        }
        div {
            margin: 1em;
            padding: 1em;
            width: 8em;
            height: 8em;
            background-color: orange;
        }
        .notworking { /* plain postcss-svgo output */
            background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22ei-chevron-right-icon%22%20viewBox%3D%220%200%2050%2050%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22fill%3Ablack%3B%22%20height%3D%22%22%20width%3D%22%22%3E%3Cpath%20d%3D%22M22.7%2034.7l-1.4-1.4%208.3-8.3-8.3-8.3%201.4-1.4%209.7%209.7z%22%2F%3E%3C%2Fsvg%3E");
        }
        .working { /* after applying postcss-svgo */
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z'/%3E%3C/svg%3E");
        }
    </style>
    <body>
        <div class="notworking">Plain postcss-svg output: not working in chrome</div>
        <div class="working">Plain postcss-svg output + applying postcss-svgo: working in chrome</div>
    </body>
</html>

screen shot 2016-03-01 at 10 05 53
@in-in
Copy link

in-in commented Mar 7, 2016

I think this is due to the fact that the plug-in does not add this line «charset=utf-8». You can try https://github.com/TrySound/postcss-inline-svg that does the same thing without failure.

@weblegko
Copy link

still do not work ...

@weblegko
Copy link

weblegko commented Jun 3, 2016

Realy cool stuf, ei-icons from box - super!
But with Google Chrome 50.0.2661.102 m - do not work :(
Is it posible to fix?

@Pavliko Pavliko closed this as completed in 3b324a0 Jun 6, 2016
Pavliko added a commit that referenced this issue Jun 6, 2016
@Pavliko
Merge pull request #32 from Icewild/master
3093ae4 
fixes #29. added charset=utf8 and set default image sizes to 100%
@sc0rp10 sc0rp10 mentioned this issue Aug 10, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@weblegko @sbstnmsch-zz @in-in