Почему svg спрайты не видны на сервере

346
08 сентября 2017, 23:45

Возникла такая проблема: svg sprite'ы не видны в браузерах, кроме самого gulp. Вот то что на хостинге ====>

А вот уже включеный галп и все прекрасно работает ===>

Скрипт для добавления спрайтов в body

;( function( window, document )
{
'use strict';
var file     = 'img/symbols.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 ) );
Answer 1

Сделайте простую проверку: откройте файл спрайта symbols.svg с помощью любого браузера. Если изображения иконок не появятся, то это и есть ответ на ваш вопрос. Код иконки, который обернут тегами <symbol>... </symbol> не отображается по умолчанию. Это основная роль этого тега - не показывать изображение svg до вызова его с помощью команды use

Обычная работа со спрайтами выглядит так:

Добавляем файл спрайта в Html страницу

<object type="image/svg+xml" data="img/symbols.svg"></object>

Вызываем любую иконку из спрайта

<section class="advantages">
<div class="container"> 
<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="img/symbols.svg#advatage-1"></use>
</svg> 
</div>
  <div class="container">
  <svg>
      <use xlink:href="img/symbols.svg#advatage-2"></use>
  </svg> 
</div>
</section>
READ ALSO
Получить индекс массива из дат

Получить индекс массива из дат

Всем приветЗадача такая, дан массив, состоящий из одних дат

313
Калькулятор с помощью checkbox

Калькулятор с помощью checkbox

Здравствуйте,есть задача реализовать следующий калькулятор на чекбоксах

571
Как узнать длину ключа объекта в js

Как узнать длину ключа объекта в js

На изображении есть объект который я принимаю от сервера, а должен отобразить количество всех, в моем случае компаний, в Html документе, то есть...

385
2 одинаковых checkbox

2 одинаковых checkbox

Есть 2 чекбокса с одинаковыми параметрами, как с помощьjquery выполнить проверку : если первый чекбокс активен то выводим оределенный блок Div ??

281