Краткая статья, посвященная тому же вопросу - как реализовать кросс-браузерную поддержку SVG в браузерах.
В предыдущей статье “SVG fallback с помощью PNG” было показано четыре очень интересных способа реализации такой задачи. В этой статье будут показаны также несколько способов решения, но уже с помощью библиотеки jQuery .
В начале статьи автор рассказывает о преимуществах использования формата графики SVG. Думаю, что многие уже устали читать деферамбы о пользе SVG. Мне, как переводчику, тем более надоело переводить всю эту “воду”, поэтому смело ее опускаю и перехожу к главному.
jQuery и Modernizr
Для реализации этого способа понадобиться библиотека Modernizr. Код реализации должен выглядеть таким образом:
if (Modernizr.svg) {
// Supports SVG
} else {
// Doesn't support SVG (Fallback)
}Если Modernizr обнаружит, что пользовательский браузер не поддерживает SVG, то запуститься простой jQuery-скрипт, который произведет замену расширения
1 | svg |
1
png
if (!Modernizr.svg) {
$('img[src*="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
}Данный способ имет точно такие же ограничения, что и скрипт из предыдущей статьи - “SVG fallback с помощью PNG”. То есть, нужно иметь два комплекта файлов - один в SVG-формате, другой в PNG-формате. Имена файлов должны быть идентичными.
SVGMagic - плагин под jQuery
SVGMagic - это простой плагин под библиотеку jQuery, который отыскивает в HTML-документе все SVG-изображения (в том числе и фоновые SVG-изображения). А затем им создаются PNG-копии всех найденных SVG-изображений, если браузер пользователя не поддерживает SVG.
Для работы с плагином SVGMagic достаточно установить его в проект и запустить инициализацию через jQuery:
$(document).ready(function(){
$('img').svgmagic();
});Работа плагина SVGMagic строится следующим образом. Проверяется возможность браузером пользователя отображения SVG-изображений. Если такой поддержки нет, то плагин выполняет полную проверку всего HTML-документа и собирает коллекцию всех URL на SVG-файлы, размещенные внутри этого документа.
Затем эта коллекция URL отправляется на сервер плагина. Сервер производит скачивание всех SVG-изображений по этим URL. Затем производиться конвертирование SVG в PNG.
На страницу клиента отправляется новая коллекция URL, которые теперь указывают на файлы формата PNG. Браузер посетителя загружает по этим ссылкам новые PNG-файлы и внешний вид страницы не нарушается.
SVGeezy - еще один плагин jQuery
SVGeezy является fallback-плагином в полном смысле этого слова. Плагин проверяет поддержку SVG в браузере пользователя. Если таковой нет, то выполняется замена значения в атрибуте
1 | src |
Для работы с плагином нужно подключить его в проект и инициализировать:
svgeezy.init(false, 'png');Первый параметр плагина SVGeezy “говорит” ему - не выполнять или выполнять проверку. Если необходима проверка плагином SVGeezy браузера и замена изображений, то нужно оставить значение в
1 | false |
Второй параметр - это тип файла, который будет заменять SVG на странице. Тип файла может быть любым; только нужно удостовериться, что файлы с таким расширением существуют.
Например, файл по пути
1 | /images/logo.svg |
1
/images/logo.png
На этом самая интересная часть статьи “How to fallback to PNG if SVG not supported?” завершается. Как лично мне кажется, в данной статье заслуживают внимания только первый и последний способы реализации SVG fallback.
На этом все.