Почему не отображаются иконки svg через css?

Question

[timtimIT]

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

Почему не отображаются иконки svg через css?

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

Comments

[Максим Тимофеев]

Дайте ссылку на Вашу страницу

[timtimIT]

Пример

Answer 1

[Дмитрий Александрович]

в css в функции url() указывается либо абсолютный путь до файла, либо относительный, причем относительно именно css файла. например если структура такая:

css/style.css
img/icon.svg

то в css будет

url('../img/icon.svg')

Comments

[timtimIT]

я знаю как указывается путь. иконка сначала была в png - все отображалось, поменял на иконку svg -не отображается

Answer 2

[Михаил Чирский]

Можно пример в студию, что вы делали и что получается, SVG можно вставлять как фоном, так и управлять через стили, его элементами, а именно path, stroke, fill и многими другими

Comments

[timtimIT]

background-image: url("../img/mail.svg"); - не отображается,если в разработчике навести на ссылку картинки то она почему-то показывается пустая,если открыть ее в новом окне то отображается.

[Михаил Чирский]

timtimIT: Вы отказываетесь выложить пример, того что есть и чего не получается, и просите помочь, или вы хотите, чтобы выложили пример сделанный за вас, где все работает?

[timtimIT]

могу выложить если скажете куда залить картинку чтобы добавить ее в jsfiddle.

[timtimIT]

Есть пример

[Михаил Чирский]

Способов куча, вот 1 из них
https://jsfiddle.net/zquoLv2z/

[Михаил Чирский]

еще 1 пример реализации SVG
https://jsfiddle.net/f9cv3fe4/

А вообще если поискать можно найти много интересного
тут, тут, тутhref="css.yoksel.ru/svg-fill-and-stroke"> и тут

[timtimIT]

привет. можешь подсказать как лучше обрезать какртинку которую трансформируешь через perspective (вращение и т.д) , как лучше?