1

Хочу на сайте добавить svg, для этого написал:

<img src="src/img/svg/logo.svg" alt="logo" width="169" height="120">

Проблема в том, что в Firefox и IE данная конструкция работает, а в Chrome нет. В браузере в место картинки пустота, хотя в DOM элемент есть. Подскажите, как исправить. Код svg файла:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="169" height="120" viewBox="0 0 169 120"><image width="169" height="120" xlink:href="data:img/png;base64,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"/></svg>
1
  • Спасибо, за информацию очень помогла!
    – Юрий
    Commented 11 февр. 2018 в 11:22

1 ответ 1

6

У вас в svg-файле написано img/png. Это некорректный MIME-тип, поменяйте на image/png и в Chrome всё заработает

(но вообще какой смысл пихать растровую png-картинку в векторный svg-файл?)

2
  • Данную картинку я экспортировал из photoshop, как я понимаю она экспортировалась как png? Commented 13 янв. 2017 в 8:55
  • Photoshop не векторный редактор, и экспортировать из него в svg нет никакого смысла :)
    – andreymal
    Commented 13 янв. 2017 в 9:09

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.