CSS gb SVG firefox+chrome

by Nikolay Petrov

HTML

<div class="box"></div>

<div class="box2"></div>

CSS

.box {
    width: 160px;
    height: 160px;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> <path d="M11 1l-5 5h-3l-3 4c0 0 3.178-0.885 5.032-0.47l-5.032 6.47 6.592-5.127c0.919 2.104-0.592 5.127-0.592 5.127l4-3v-3l5-5 1-5-5 1z"></path></svg>');
    background-size: cover;
}


.box2 {
    width: 160px;
    height: 160px;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="898" fill="red" height="1145" viewBox="0 0 898 1145"> <path d="M239 0l420 0c132,0 239,107 239,239l0 420c0,70 -30,134 -79,177 -43,40 -357,309 -372,309 -14,0 -323,-268 -367,-308 -49,-44 -80,-107 -80,-178l0 -420c0,-132 107,-239 239,-239z"/></svg>');
    background-size: contain;
    background-repeat:no-repeat;
    background-color:#ddd;
    background-position:center center;
}