Переключатель расширения SVG/PNG
Есть ли способ использовать изображения SVG на моем сайте, и если браузеры/устройства его не поддерживают, переключите расширение на png? Есть ли лучший способ сделать это?
Примечание: Я использую тег <img> и Modernizr.
Вот мой код, который динамически выдает изображения.
<?php $attachments = attachments_get_attachments(); ?>
<?php if( function_exists( 'attachments_get_attachments' ) ) {
$attachments = attachments_get_attachments();
$total_attachments = count( $attachments ); if( $total_attachments ) : ?><?php for( $i=0; $i<$total_attachments; $i++ ) : ?>
<img src="<?php echo $attachments[$i]['location']; ?>" alt="<?php echo $attachments[$i]['title']; ?>" class="full" />
<?php endfor; ?><?php endif; ?><?php } ?>
Выводит следующее:
<img src="http://mysiteurl.net/image.png" alt="Image Title" class="full wp-image-287" />
3 answers
Я полагаю, вы могли бы проверить, поддерживается ли svg, и если нет, просмотрите теги изображений и установите их путь src на .png. Этот пример не был протестирован, но это может быть шагом в правильном направлении.
if(!Modernizr.svg){
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++){
var src = images[i].src.split(".");
images[i].src = src[0] + ".png";
}
}
Если jQuery является опцией, то возможно что-то вроде этого:
if(!Modernizr.svg){
$("img").each(function(){
var src = this.src.split(".");
this.src = src[0] + ".png";
});
}
РЕДАКТИРОВАТЬ
Вы также можете рассмотреть возможность изучения Modernizr-сервера. Таким образом, вы можете протестировать svg во время просмотра изображений и добавить соответствующее расширение.
if ($modernizr->svg) {
...
} elseif ($modernizr->canvas) {
...
}
Это работает, фильтруя только svg-файл
<script type="text/javascript">
jQuery( document ).ready(function() {
if(!Modernizr.svg){
jQuery("img").each(function(){
var src = this.src;
if( src.match(/svg$/) ){
// Replace "svg" by "png"
this.src = src.slice(0,-3) + 'png'
}
});
}
});
</script>
Альтернативой является использование CSS-решения для SVG с резервным вариантом, как описано в этом ответе: https://stackoverflow.com/a/13575068/418711