SVG fallback с помощью jQuery

Краткая статья, посвященная тому же вопросу - как реализовать кросс-браузерную поддержку 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.

На этом все.