Браузеры с поддержкой SVG игнорируют альтернативные изображения (если они включены в теги объектов)? - PullRequest
1 голос
/ 28 марта 2011

Иллюстрация, которую я хочу включить в сайт, в формате SVG в 28,1 раза меньше той же иллюстрации, сохраненной в формате PNG.

К сожалению, мне приходится работать с браузерами, которые не поддерживают SVG,Так что я по-прежнему включаю PNG в качестве альтернативы, например так:

<object type="image/svg+xml" data="illustration.svg">
  <img src="illustration.png" alt="alternate description">
</object>

Будут ли браузеры с поддержкой SVG игнорировать PNG в этом случае, или он все равно будет загружаться в фоновом режиме?(т.е. я экономлю на общем времени загрузки?)

Ответы [ 3 ]

1 голос
/ 08 мая 2012

Я использовал что-то подобное:

<object type="image/svg+xml" data="...">
   <!--[if lt IE 9]>
   <img src="img/circle.png" alt="" />
   <![endif]-->
</object>

Internet Explorer <9 не может отображать SVG, поэтому он получает PNG.Почти все другие браузеры могут работать с SVG и не нуждаются в резерве. </p>

1 голос
/ 28 марта 2011

Firefox v4 и Chrome v10 загружают альтернативное изображение.Вы не будете экономить полосу пропускания или время загрузки, используя SVG-изображение с резервным PNG-кодом.

Протестировано путем загрузки этой страницы и просмотра панели Net в инструментах разработчика Firebug и Chrome: Firebug showing requests for both tiger.svg and tiger.png Chrome's Developer Tools showing requests for both tiger.svg and tiger.png

Обратите внимание, что это не означает, что использование SVG не является хорошей идеей.Вы все равно должны использовать SVG, поскольку он будет печатать и масштабироваться лучше, чем соответствующий PNG.

0 голосов
/ 28 марта 2011

С помощью Jquery SVG плагин:

$(selector).svg({ 
loadURL: '', // External document to load 
onLoad: null, // Callback once loaded 
settings: {}}) // Additional settings for SVG element

попробуйте перехватить его, и при неудачной загрузке изображения.:)

...