SVG fallback с помощью jQuery

Reading time ~3 minutes

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

Для работы с плагином нужно подключить его в проект и инициализировать:

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.

На этом все.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024