search

Pavliko / postcss-svg

PostCSS plug-in which to insert inline SVG to CSS and allows you to manage it colors.
http://pavliko.github.io/postcss-svg/
Creative Commons Zero v1.0 Universal
124 stars 23 forks source link

Inline SVGs fail to display in latest Chrome Canary #29

Closed sbstnmsch-zz closed 8 years ago

sbstnmsch-zz commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

still do not work ...

weblegko commented 8 years ago

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?