Я должен делать что-то неправильно. Изображение было экспортировано из иллюстратора в виде SVG и (я не уверен, насколько это актуально или нет) в нем есть некоторые пиксельные данные. Вот мой пример JSFiddle.
Обратите внимание, что переход непосредственно к изображению показывает его просто отлично: http://ykcreations.com/tv.svg
Изменить: это не работает в Chrome или Safari, но работает в Firefox. Проблема Webkit?
Возникла проблема с исходным 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, но когда в качестве фонового изображения был виден только круг.
Эта ошибка имеет панику.
Это связано с вашим изображением, попробуйте подключить следующее к вашему 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 ниже (возможно, к тому моменту, когда вы это прочитали); он охватывает это и дает лучшее объяснение.
Другая возможная причина заключается в обслуживании SVG с неправильным типом MIME. Установка этого параметра на "image/svg + xml" может устранить проблему.
В Rails это можно сделать, добавив следующее в config/intializers/mime_types.rb:
Mime::Type.register 'image/svg+xml', :svg
У меня была аналогичная проблема с рендерингом svg в качестве фонового изображения в Chrome, но все было в порядке в Firefox. Я обнаружил, что в моих файлах svg, экспортированных из Adobe, произошла синтаксическая ошибка:
неправильный атрибут xlink:
xlink:href="data:img/png;base64
правильный атрибут xlink:
xlink:href="data:image/png;base64
Статья ниже: