Как использовать изображение SVG в качестве фона?

Я должен делать что-то неправильно. Изображение было экспортировано из иллюстратора в виде SVG и (я не уверен, насколько это актуально или нет) в нем есть некоторые пиксельные данные. Вот мой пример JSFiddle.

Обратите внимание, что переход непосредственно к изображению показывает его просто отлично: http://ykcreations.com/tv.svg

Изменить: это не работает в Chrome или Safari, но работает в Firefox. Проблема Webkit?

Ответы

Ответ 1

Возникла проблема с исходным SVG. Смотрите обновленный Fiddle, указывающий на другой файл SVG, который работает правильно: http://jsfiddle.net/wdW2K/2/

.tv {
  background: url("http://phrogz.net/svg/800x800.svg");
  width: 400px; height: 400px;
}

Изменить. В частности, проблема заключается в том, что WebKit не поддерживает <image> в SVG, используемом в качестве фона. Модифицируя файл минимально, чтобы изменить <image> для ссылки на локальный (не-data-uri) файл и добавив <circle/>, я смог видеть изображение и круг при просмотре SVG непосредственно в Chrome, но когда в качестве фонового изображения был виден только круг.

Эта ошибка имеет панику.

Ответ 2

Это связано с вашим изображением, попробуйте подключить следующее к вашему CSS:

.tv
{
    background-image: url("http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg");
    width: 400px;
    height: 400px;
}

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

ИЗМЕНИТЬ См. Ответ Phrogz ниже (возможно, к тому моменту, когда вы это прочитали); он охватывает это и дает лучшее объяснение.

Ответ 3

Другая возможная причина заключается в обслуживании SVG с неправильным типом MIME. Установка этого параметра на "image/svg + xml" может устранить проблему.

В Rails это можно сделать, добавив следующее в config/intializers/mime_types.rb:

Mime::Type.register 'image/svg+xml', :svg

Ответ 4

У меня была аналогичная проблема с рендерингом svg в качестве фонового изображения в Chrome, но все было в порядке в Firefox. Я обнаружил, что в моих файлах svg, экспортированных из Adobe, произошла синтаксическая ошибка:

неправильный атрибут xlink:

xlink:href="data:img/png;base64

правильный атрибут xlink:

xlink:href="data:image/png;base64

Статья ниже:

Ссылка на статью из css-трюка, которая помогла мне