Why can't all svg files be rendered via css?

Question

css

Hello.
I noticed such a thing that not all svg files can be displayed through the style sheet.
There is an example .
In this example, there are two svg files, one is displayed correctly, the second is not, what is the reason?

Answer 1

the phone.svg file is not an svg per se, but a base64 image with a fixed size. It will not scale like svg.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="25" viewBox="0 0 18 25">
  <image width="18" height="25" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAZCAMAAAAL146mAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA2FBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABX8LpaAAAAR3RSTlMAH83VwKprcQu2/QEH9Os62T77ujG/mOZsCTZN7QOjmxT2PYPQIfNd0ov5MxJqeBnX73ON/rzbExbeHswc5KEKRvJgkb4iJo76fccAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAAq0lEQVQY013Q5RaDMAwF4M6FuRsbc4O5u9/3f6NRoKPZ/ZfvNGlOGHPj8fr8gSCTEwJPWKYIl6giSSzOKSE/Slp9KZnSGU5ZMj6XN6nAaIpAiUrZbK1QqgI1lVIdaFDRmkCLUhvoUOn2gD4R1dxqQIcPgdFYFLqh2ZeZCJnOMF8sV8BadcXOZuvITsj+INoMR46n30f62ZLLVfr8Zg6+P+jWT7zef3dTPwqpv974IUFiM2PJAAAAAElFTkSuQmCC"/>
</svg>