Почему svg иконки выводятся чёрными?

Question

[Дима Паутов]

Доброго времени суток! Подскажите пожалуйста, почему при выводе иконок через конструкцию

<svg class="ico">
  <use xlink:href="app/img/ico/icons.svg#icoFb"></use>
</svg>

Иконки выводятся чёрными! Хотя должны быть цветными. При экспорте из иллюстратора она цветная, я открывал и всё ок.

Сайт - В шапке сайта смотрите, 2 чёрных круглешка.

Вот как должны выглядеть иконки:

Answer 1

[Петр]

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

В документации тут написано:

< use > An < IRI > reference to an element/fragment within an SVG document.

Вставляйте svg как часть html документа, тогда и увидите свою иконку через

<svg class="ico">
  <use xlink:href="#icoFb"></use>
</svg>

В IE11

Comments

[Дима Паутов]

Я всегда так делаю и все иконки выводятся всегда корректно. Прокрутите ниже до блока НАШИ
ПРЕИМУЩЕСТВА и увидите.

[Дима Паутов]

В той ссылке, что вы привели, есть такой же пример с выводом иконок example.com/someDrawing.svg#Lamppost

[Петр]

Дима Турков: Посмотрел в IE 11. Красота ))

[Дима Паутов]

Петр: да быть того не может. Я десяток сайтов сделал уже с подобным выводом иконок и в ie никто никогда не жаловался

[Дима Паутов]

Петр: о, кстати, спс, я косяк нашёл в js благодаря вам.

[Дима Паутов]

Петр: кстати говоря, заинлайнил я svg прямо в документ, но ничего не поменялось!

[Дима Паутов]

Петр: а нет, вру, прошу прощения. Но всё же, одни иконки вставляются, а другие нет. Ты знаешь почему?

[Петр]

Дима Турков: Я вот заинлайнил и работает https://jsfiddle.net/gxwwy3m7/

[Дима Паутов]

Петр: работает, работает. Спс. Но всё же, одни иконки вставляются, а другие нет. Ты знаешь почему?

[Петр]

Дима Турков: "Ты знаешь почему?" Чудны баги браузеров. ))

[Дима Паутов]

Петр: Ну ладно. Теперь я буду инлайнить svg. Для php в этом проблемы нет. Используя функцию echo file_get_contents(); Спс тебе, что навёл на путь истинный

[Петр]

Дима Турков: Если пакет svg иконок используется на многих страницах, его можно в localstorage загнать один раз и затем мгновенно вытаскивать.