2

Очень долго искал способ вставить SVG-спрайт из отдельного файла в HTML код, чтобы при этом он оставался чистым, а спрайты вызывались по ID из этого спрайта.

Нашёл боле менее рабочий способ, но он добавляет этот спрайт в память браузера (из-за чего он работает только на серверах), а уже потом использует его.

(function(window, document) {
    'use strict';
    var file = 'img/svg_sprite.svg',
        revision = 1;
    if (!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) return true;
    var isLocalStorage = 'localStorage' in window && window['localStorage'] !== null,
        request,
        data,
    insertIT = function() {
        document.body.insertAdjacentHTML('afterbegin', data);
    },
    insert = function() {
      if (document.body) insertIT();
      else document.addEventListener('DOMContentLoaded', insertIT);
    };
    if (isLocalStorage && localStorage.getItem('inlineSVGrev') == revision) {
        data = localStorage.getItem('inlineSVGdata');
        if (data) {
            insert();
            return true;
        }
    }
    try {
        request = new XMLHttpRequest();
        request.open('GET', file, true);
        request.onload = function() {
            if (request.status >= 200 && request.status < 400) {
                data = request.responseText;
                insert();
                if (isLocalStorage) {
                    localStorage.setItem('inlineSVGdata', data);
                    localStorage.setItem('inlineSVGrev', revision);
                }
            }
        }
        request.send();
    } catch (e) {}
}(window, document));

В данный момент я не на столько продвинут, чтобы читать такой код, но проблема вот в чём: после того, как я меняю свой спрайт, он не перезаписывается в памяти браузера, а очистка кэша тоже не помогает, приходится вручную удалять его из памяти, что очень неудобно.

Можно ли сюда куда-нибудь как-нибудь вписать код проверки хотя бы размера файла (лучше, конечно, хеш-суммы), при котором он бы заменял старый файл?

3
  • Что бы проверить, изменился ли файл, надо его сначала загрузить с сервера. Ну или положиться на кэширование браузера. Если не хотите, что бы файл брался из localStorage, уберите строку return true; - это самый простой и глупый способ) 13 фев 2018 в 7:12
  • Тогда "добрую" половину кода можно удалить? 13 фев 2018 в 10:39
  • Зачем вы придумываете велосипед с локалстораджем, если для этих целей специально придумали сервис воркер? 20 фев 2018 в 14:18

1 ответ 1

2

Может попробовать использовать проверенный и надёжный способ добавления SVG-спрайта из отдельного файла в HTML с помощью <object>.
Тем более здесь есть целый раздел ответов и вопросов, как это сделать. Тег svg-спрайт

Подключение файла спрайта

<object type="image/svg+xml" data="sprite.svg" >
  Your browser does not support SVG
</object>   

Вызов разных иконок из файла спрайта в разных местах HTML

<div class="container">
<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="images/sprite.svg#user"></use>
</svg>   
</div> 

<div class="container">
<svg class="icon-box" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="images/sprite.svg#home"></use>
</svg>   
</div>

где #user, #home уникальные идентификаторы иконок внутри svg спрайта

Тег <object> добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.

Подключение внешней таблицы стилей

В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей:

<?xml-stylesheet type="text/css" href="Svgstyle.css"?>   
<svg   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
Код спрайта 
</svg> 

Структура файла sprite.svg

<?xml-stylesheet type="text/css" href="Svgstyle.css"?>   
<svg   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">  
<symbol id="user" viewBox="0 0 24 24">
<path код иконки ..... />
</symbol>
	<symbol id="home" viewBox="0 0 24 24">
	<path код иконки ..... />
	</symbol>  
	
	  <symbol id="settings" viewBox="0 0 24 24">
	<path код иконки ..... />
	</symbol>

</svg> 

3
  • <use xlink:href="images/sprite.svg#user"></use> Ссылка ведь ведёт на внешний файл. т.е. сам спрайт не вставлен в HTML-разметку, я правильно понимаю? Именно поэтому я на данном способе не остановился. А код, что я нашёл - вставляет его, а вставка самой иконки выглядит так: <use xlink:href="#user"></use> Т.е., спрайт вставлен в разметку и я не указываю путь к файлу 13 фев 2018 в 10:34
  • @Сергей можно так заканчивать команду /> можно и так </use> зависит от контекста :) Обязательно </use> если внутри контейнера <use> .... <animate> ..... </animate> </use> находится другая команда 13 фев 2018 в 10:38
  • @Сергей спрайт через <object> добавляется в html разметку, можете через инспектор посмотреть, что он попадает в дом. И что ценно в этом методе - идет только один запрос к серверу, а дальше иконки уже вызываются из спрайта по id 13 фев 2018 в 10:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.