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

Question

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

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

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

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

Answer 1

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

<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>

Answer 2

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

Протестировано путем загрузки этой страницы и просмотра панели Net в инструментах разработчика Firebug и Chrome:

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

Answer 3

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

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

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