0

Can someone please tell me why the version of this svg doesn't scale unless it's base64 encoded? Is there some way to control the size of the icon without it being base 64 encoded so that it can be scaled up or down without getting cropped?

.svg-test {
  display: inline-block;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23ff000' d='M27.987 4.122L17.849 14.126l8.73 8.616-4.046 3.993-8.731-8.616-8.985 8.868-4.164-4.109 8.986-8.867-9.626-9.5L4.059.517l9.627 9.5L23.823.013l4.164 4.109z'/%3e%3c/svg%3e");
  width: 15px;
  height: 15px;
    background-position: center center;
    background-repeat: no-repeat
  background-size: contain;
}

.svg-test-base64 {
  display: inline-block;
  background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyNyI+CiAgICA8cGF0aCBmaWxsPSIjMDAwIiAgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjcuOTg3IDQuMTIyTDE3Ljg0OSAxNC4xMjZsOC43MyA4LjYxNi00LjA0NiAzLjk5My04LjczMS04LjYxNi04Ljk4NSA4Ljg2OC00LjE2NC00LjEwOSA4Ljk4Ni04Ljg2Ny05LjYyNi05LjVMNC4wNTkuNTE3bDkuNjI3IDkuNUwyMy44MjMuMDEzbDQuMTY0IDQuMTA5eiIvPgo8L3N2Zz4K) center no-repeat;
  width: 15px;
  height: 15px;
  background-size: contain;
}
<h4>Without Base64 Encoding</h4>
<span class="svg-test"></span>

<h4>With Base64 Encoding</h4>
<span class="svg-test-base64"></span>
Patrick D Rittenhouse
  • 105
  • 1
  • 2
  • Does this answer your question? [How can I make an svg scale with its parent container?](https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container) – Mehdi Nov 24 '20 at 00:09
  • Specifying `width='200%' height='200%'` in the inline SVG (e.g. right before `xmlns`) produces the expected result. – Mehdi Nov 24 '20 at 00:17
  • Adding a percentage width to the svg has no effect. https://jsfiddle.net/sop2kfbm/ – Patrick D Rittenhouse Nov 24 '20 at 02:12
  • The percentage width is missing in the linked jsfiddle. Demo with it in action, tested in firefox and chrome: https://jsfiddle.net/cs6z0tpq/ – Mehdi Nov 27 '20 at 01:03

0 Answers0