От автора: Предположим, что вы создаете систему SVG иконок. Вы можете создавать SVG спрайт с большим количеством элементов symbol вручную, либо использовать для этого инструмент IcoMoon или grunt-svgstore. Что вы будете делать с файлом sprite.svg?
Как вариант, можно включить его в самом начале документа и использовать элемент <use>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
... </head> <body> <!-- include it here --> <?php include_once("svg/sprite.svg"); ?> ... <!-- use it here --> <a href="/" class="logo"> <svg class="logo"> <use xlink:href="#logo" /> </svg> </a> |
Данный вариант работает, но в данном случае не лучшим образом используется кеширование. Если на сайте включено HTML кеширование, то на каждой странице будет присутствовать большой кусок одинакового SVG кода, а это немного излишне. Не говоря уже о том, что HTML парсер будет вынужден считывать данную информации в документе при каждой загрузке страницы, прежде чем сможет перейти к контенту.
Возможно, лучше воспользоваться кешированием браузера, как мы это делаем с остальными ресурсами. Мы можем добиться этого, используя в нашем элементе use ссылку на внешний ресурс. Но у некоторых браузеров это вызывает трудности. В частности, это относится к любым версиям IE и некоторым старым версиям браузеров на «движке» WebKit.
Инструмент SVG for Everybody, который мы порекомендовали здесь, по большей части работает хорошо. Но есть браузеры, которые он не может определить по параметру UserAgent.
Альтернативный подход заключается в том, чтобы использовать Ajax для загрузки спрайта (постоянно) и добавлять его на страницу. Это означает, что вы можете использовать браузерное кеширование для данного SVG, и это будет работать везде, где работает встроенный (инлайновый) SVG.
Допустим, что у вас есть готовый SVG документ (sprite.svg), и вы запрашиваете его через Ajax (sprite.svg). Сделать это будет не так просто. Вы должны убедиться в том, что SVG документ будет загружен в нужном пространстве имен, прежде чем добавлять его на страницу. К счастью, мы можем использовать HTML парсер, который обычно этим и занимается. Поэтому мы добавляем SVG документ в элемент
|
1 2 3 4 5 6 7 8 |
var ajax = new XMLHttpRequest(); ajax.open("GET", "svg/sprite.svg", true); ajax.send(); ajax.onload = function(e) { var div = document.createElement("div"); div.innerHTML = ajax.responseText; document.body.insertBefore(div, document.body.childNodes[0]); } |
Если вы используете jQuery, то возвращаемые им данные уже будут отформатированы в SVG документ, поэтому вам нужно принудительно превратить их обратно в строку перед вставкой в элемент div и, наконец, затем на страницу.
|
1 2 3 4 5 |
$.get("svg/sprite.svg", function(data) { var div = document.createElement("div"); div.innerHTML = new XMLSerializer().serializeToString(data.documentElement); document.body.insertBefore(div, document.body.childNodes[0]); }); |
Помните о том, что в данном случае вы указываете в элементе use просто идентификатор, а не внешний ресурс.
|
1 2 3 |
<svg class="icon" viewBox="0 0 100 100"> <use xlink:href="#shape-icon-1" /> </svg> |
Кажется, это хорошо работает в IE и Android:
Также помните, что инструмент SVG for Everybody помогает вам трансформировать разметку в <img src=»…png»> для браузеров, в которых нет нужной поддержки, поэтому если этот момент важен для вас, то решение остается за вами.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)