Есть ли способ использовать 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://img.ruphp.com/php/image.png" alt="Image Title" class="full wp-image-287" />
Я предполагаю, что вы можете проверить, поддерживается ли 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-Server . Таким образом, вы можете протестировать 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-ony для SVG с резервированием, как описано в этом ответе: https://stackoverflow.com/a/13575068/418711