Загрузка SVG спрайта с помощью Ajax

Загрузка SVG спрайта с помощью Ajax

От автора: Предположим, что вы создаете систему SVG иконок. Вы можете создавать SVG спрайт с большим количеством элементов symbol вручную, либо использовать для этого инструмент IcoMoon или grunt-svgstore. Что вы будете делать с файлом sprite.svg?

Как вариант, можно включить его в самом начале документа и использовать элемент <use>.

Данный вариант работает, но в данном случае не лучшим образом используется кеширование. Если на сайте включено HTML кеширование, то на каждой странице будет присутствовать большой кусок одинакового SVG кода, а это немного излишне. Не говоря уже о том, что HTML парсер будет вынужден считывать данную информации в документе при каждой загрузке страницы, прежде чем сможет перейти к контенту.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Возможно, лучше воспользоваться кешированием браузера, как мы это делаем с остальными ресурсами. Мы можем добиться этого, используя в нашем элементе use ссылку на внешний ресурс. Но у некоторых браузеров это вызывает трудности. В частности, это относится к любым версиям IE и некоторым старым версиям браузеров на «движке» WebKit.

Инструмент SVG for Everybody, который мы порекомендовали здесь, по большей части работает хорошо. Но есть браузеры, которые он не может определить по параметру UserAgent.

Альтернативный подход заключается в том, чтобы использовать Ajax для загрузки спрайта (постоянно) и добавлять его на страницу. Это означает, что вы можете использовать браузерное кеширование для данного SVG, и это будет работать везде, где работает встроенный (инлайновый) SVG.

Допустим, что у вас есть готовый SVG документ (sprite.svg), и вы запрашиваете его через Ajax (sprite.svg). Сделать это будет не так просто. Вы должны убедиться в том, что SVG документ будет загружен в нужном пространстве имен, прежде чем добавлять его на страницу. К счастью, мы можем использовать HTML парсер, который обычно этим и занимается. Поэтому мы добавляем SVG документ в элемент

, который затем будет вставлен на страницу.

Если вы используете jQuery, то возвращаемые им данные уже будут отформатированы в SVG документ, поэтому вам нужно принудительно превратить их обратно в строку перед вставкой в элемент div и, наконец, затем на страницу.

Помните о том, что в данном случае вы указываете в элементе use просто идентификатор, а не внешний ресурс.

Кажется, это хорошо работает в IE и Android:

Также помните, что инструмент SVG for Everybody помогает вам трансформировать разметку в <img src=»…png»> для браузеров, в которых нет нужной поддержки, поэтому если этот момент важен для вас, то решение остается за вами.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. TrySound

    Оформил в библиотеку + доступно кэширование в localStorage
    svg-sprite-injector

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree