inline svg not shown in ie11?

shikelong commented 6 years ago

Next is The inline svg 👍


.img {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cstyle%3E.st0{fill:%2323619d}.st1{fill:%237fd89b}.st2{fill:%23fff}%3C/style%3E%3Cpath class='st0' d='M13.7 1.7s-.1 0 0 0L9 5.2l5 3.7V1.4l-.3.3zM.3.4l.8.6 5.6 4.1c.1 0 .2.1.3.1.1 0 .2 0 .3-.1l4.4-3.3 2-1.5c-.1-.2-.4-.3-.7-.3H1C.7 0 .4.1.3.4zm7.8 5.4l-.2.2c-.5.3-1.3.3-1.8 0l-.2-.2L.2 9.9c.2.3.5.4.8.4h12c.3 0 .6-.2.8-.4L8.1 5.8zM1.5 2.6c0-.1 0-.1 0 0L0 1.4v7.4l5-3.7-3.5-2.5zm0 0'/%3E%3Ccircle class='st1' cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath class='st2' d='M14.3 6.6s-1.5.8-2.7 2.5c-.7 1-1.8 3-1.8 3s-.4-.8-.6-1.1c-.2-.3-.6-.8-.6-.8l-2 1.2s.8.4 1.6 1.1c.8.7 1.7 1.7 1.7 1.7s1-1.7 1.8-2.5c.8-.9 2.6-2.2 2.6-2.2s-.2-.5-.2-1.4c0-.8.2-1.5.2-1.5z'/%3E%3C/svg%3E")
}

shikelong commented 6 years ago

I also use postcss-assets. . I don't kown the inline function is postcss-url or postcss-assets's inline

sergcen commented 6 years ago

@shikelong can you show postcss-url options?

shikelong commented 6 years ago

It's my postcss-loader options.

{
                loader: 'postcss-loader',
                options: {
                  plugins: function () {
                    return [
                      require("postcss-import")({ path: ['./app'] }),
                      require("postcss-assets")({loadPaths: ['app/']}),
                      require("postcss-url")({}),
                      require("postcss-cssnext")(),
                      require("postcss-browser-reporter")(),
                      require("postcss-reporter")(),
                    ];
                  }
                }
              }

shikelong commented 6 years ago

Seem postcss-url use directory-encoder' SvgURIEncoder to encoded svg to dataUrl, And not use base64 to encode svg, instead of the optimizing encoding due to (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)

But In ie11, the optimizing encoding not work when the svg has style tag.

The online demo: https://jsbin.com/rapucof/edit?html,css,output

postcss / postcss-url

inline svg not shown in ie11? #115