Почему не все svg файлы можно отображать через css?

Question

[timtimIT]

Здравствуйте.

Заметил такую вещь, что не все svg файлы можно отобразить через таблицу стилей.
Есть пример.
В данном примере два файла svg , один отображается корректно , второй нет, в чем причина?

Answer 1

[Пётр Попов]

файл phone.svg не svg по сути, на картинка в base64 с фиксированным размером. Она масштабироваться как 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>

Comments

[timtimIT]

спасибо, подскажите а в чем суть, то-есть как оно так сделано и как нужно сделать, через какую программу или какой параметр изменить или убрать? не могу объяснить это дизайнеру...

[Пётр Попов]

timtimIT: Если изначально иконка не svg, то ничего "быстро" не сделаешь. Если иконка изначально svg была (в макете), то открыть в иллюстраторе (или другом редакторе векторных изображений) и сохранить как svg. Можно самим ещё отрисовать в векторе (хардкор). А лучше просто в гугле ввести "phone svg", выбрать раздел поиска "картинки" и скачать понравившуюся.