background-svg-without-width.html (477B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <style> 4 .bgsvg { 5 background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat; 6 background-size: contain; 7 width: 100px; 8 height: auto; 9 margin: auto; 10 position: relative; 11 } 12 .bgsvg::after { 13 content: ' '; 14 display: block; 15 padding-bottom: 200%; 16 } 17 </style> 18 <div class="bgsvg"></div>