Wrong SVG inline

[borodean]

Very nice, that we has special method to inline to reduce size.

But escape create unvalid CSS.

[ai]

First case:

.promo-sticker {
    background: inline(promo-sticker/sticker.svg);
}

.promo-sticker {
    width: 102px;
    height: 100px;
    background: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 102 100"><g fill-rule="evenodd" fill="none"><polygon stroke="#fff" points="51 94.462 43.884 99.491 38.474 92.661 30.229 95.482 26.962 87.404 18.257 87.787 17.398 79.116 8.9373 77.032 10.556 68.47 3.0254 64.087 6.9909 56.328 1 50 6.9909 43.672 3.0254 35.913 10.556 31.53 8.9373 22.968 17.398 20.884 18.257 12.213 26.962 12.596 30.229 4.5184 38.474 7.3393 43.884 0.50893 51 5.5383 58.116 0.50893 63.526 7.3393 71.771 4.5184 75.038 12.596 83.743 12.213 84.602 20.884 93.063 22.968 91.444 31.53 98.975 35.913 95.009 43.672 101 50 95.009 56.328 98.975 64.087 91.444 68.47 93.063 77.032 84.602 79.116 83.743 87.787 75.038 87.404 71.771 95.482 63.526 92.661 58.116 99.491" stroke-opacity=".4"/></g></svg>);
}

I think we should add quotes if user miss them (for example, PNG inline works without quotes).

[ai]

Second case:

.promo-sticker {
    background: inline("promo-sticker/sticker.svg");
}

.promo-sticker {
    width: 102px;
    height: 100px;
    background: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 102 100"><g fill-rule="evenodd" fill="none"><polygon stroke="#fff" points="51 94.462 43.884 99.491 38.474 92.661 30.229 95.482 26.962 87.404 18.257 87.787 17.398 79.116 8.9373 77.032 10.556 68.47 3.0254 64.087 6.9909 56.328 1 50 6.9909 43.672 3.0254 35.913 10.556 31.53 8.9373 22.968 17.398 20.884 18.257 12.213 26.962 12.596 30.229 4.5184 38.474 7.3393 43.884 0.50893 51 5.5383 58.116 0.50893 63.526 7.3393 71.771 4.5184 75.038 12.596 83.743 12.213 84.602 20.884 93.063 22.968 91.444 31.53 98.975 35.913 95.009 43.672 101 50 95.009 56.328 98.975 64.087 91.444 68.47 93.063 77.032 84.602 79.116 83.743 87.787 75.038 87.404 71.771 95.482 63.526 92.661 58.116 99.491" stroke-opacity=".4"/></g></svg>");
}

I add quotes manually, but SVG contains quotes too. So we need to escape quotes.

[ai]

BTW, postcss-url uses directory-encoder/lib/svg-uri-encoder.js to escape SVG.

[ai]

@borodean this issue is very important, because SVG now is broken :(. I can’t use postcss-assets in our project.

[madyankin]

Base64 might be much better.

[ai]

@Outpunk base64 is not better, because SVG is text format and there is a better solution for them http://css-tricks.com/probably-dont-base64-svg/