Svg спрайт не работает отдельным файлом
Я использую систему значков для своего приложения с SVG Sprite, созданную IcoMoon App. В индексе.html у меня теперь что-то вроде этого:
Мне нужно переместить спрайт svg в файл, а затем включить его в качестве внешнего ресурса. Как я могу это сделать?
создайте svg-файл, спрайты.svg
поместите в него следующее:
тогда, когда вы хотите включить в use элемент
(В настоящее время Internet Explorer имеет проблему с этим. IE потребуется другой подход. Если вы хотите, я также могу показать, что нужно для IE)
EDIT-Cross browser support: поместите элементы спрайта SVG в XML-файл и вызовите их в defs элемент.
XML-файл с именем sprites.XML-код:
пример HTML-файла с Javascript для распространения элемента defs.
существует множество различных способов встраивания SVG-файла в документ без использования встроенного SVG-кода, как в вашем примере разметки. Перемещение SVG во внешний файл, безусловно, делает код более чистым и редактируемым. Chris Coyier имеет отличную страницу на использование SVG на CSS-трюки. Вот краткое изложение методов, рассмотренных в этой статье:
использование SVG в качестве
вы можете вставлять SVG-файлы в тег как JPG или PNG или любой другой файл изображения:
вы можете настроить ширину и высоту изображения SVG либо с помощью встроенных атрибутов ширины и высоты, либо путем таргетинга изображения SVG в документе CSS.
обратите внимание, что по соображениям безопасности большинство браузеров отключат скрипты, ссылки и другую интерактивность SVG-файлов, добавленных с помощью теги.
Использование миксинов для создания svg спрайтов
Каждый раз вставлять спрайт через svg не очень удобно. Если вы используете какой-то html препроцессор, то эту задачу можно упростить, создав некий миксин для вставки спрайта. Рассмотрим такую реализацию на примере шаблонизатора nunjucks.
В nunjucks для подобных задач используются макросы. Для начала создаем отдельный файл для всех макросов _macro.html. В нем создаем макрос svgIcon для вывода изображений из svg спрайта:
Этот макрос принимает 3 параметра:
- Id изображения;
- Произвольный класс изображения. По умолчанию значение пустое. Для удобства каждой иконке мы добавляем класс svg-icon;
- Путь к файлу svg спрайта. По умолчанию принимает значение, которое установили в настройка gulp файла для генерации спрайта.
Далее необходимо импортировать этот файл в основной документ:
Теперь макрос готов к использованию. Ко всем макросам можно обратится через переменную macro. Рассмотрим пару примеров вызова:
В первом примере мы просто выводим иконку, у которой id равно instagram. Во втором варианте добавляется класс social__icon. В третьем примере мы изменяем путь к спрайту.
iamstarkov commented Feb 28, 2016
@AdreeUA вкладку Network в DevTools, посмотреть куда уходит реквест
akhalizev commented Feb 25, 2016
Слэш убрал, заработало везде, кроме хрома.
использование SVG в качестве фона-image
в вашей пример кода Вы, похоже, используете SVG-файл в качестве изображения содержимого, но на случай, если SVG служит чисто эстетической цели, вы можете использовать SVG-файл в качестве фонового изображения в CSS:
как теги, расширенные функции SVG отключены при использовании этого метода.
iamstarkov commented Feb 28, 2016
@AdreeUA посмотреть загружаются ли они вообще в браузере
AdreeUA commented Feb 28, 2016
@iamstarkov Сам файл загружается, просто если открыть этот спрайт то он получается битый, ну или еще что-то. Если открыть его в текстовой редакторе, то вроде все нормально .
Столкнулся проблемой отображения svg спрайтов в ie11.
Есть два варианта:
В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Hаботает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg.
Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял), но реагирует на css, причем не отображаются только некоторые иконки.
Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например:
Ссылка на комментарий
Как использовать svg спрайты
Что бы вывести любую иконку из svg спрайта, необходимо использовать тег svg, в котором через конструкцию use указываем ссылку на файл и id изображения:
Так же, можно просто скопировать весь svg спрайт в html страницу и использовать элемент use, передавая только id изображения.
akhalizev commented Feb 25, 2016
Не понял. Вот у меня index.html. В этой же директории папка assets/images. В ней все svg. Запускаю index.html - путь же вроде правильный?
Ответы (3 шт):
Лучше прямо в HTML встраивать, чтобы не плодить лишних запросов к внешнему SVG файлу. Однако, если вставлять inline способом, то кешироваться не будет. На одной конференции Яндекса советовали вставлять через JS, чтобы они кешировались. Сейчас опишу, как я делаю. 1) Создаем JS файл с inline SVG. К примеру, такой // Тут хранятся иконки в SVG
// Вставляем иконки в HTML
2) Создаем в HTML пустой div с id svg-icon-placeholder . В него мы и будем вставлять SVG 3) Юзаем через use :) Довольно просто, но я пока не придумал как автоматизировать сборку спрайтов через GULP таким способом. Если знаете, то подскажите как)
Иконка не отображается на странице, хотя когда подключал этот же код спрайта на странице, то все работало.
Действительно, непосредственное встраивание svg (инлайн) в HTML является самым простым и надежным способом, НО
Код странички получается очень большим, поэтому более предпочтительно подключать SVG внешним файлом.
Инструкция, на которую вы ссылались хорошая, но автор не раскрыл достаточно полно, как подключать внешний файл SVG.
Сначала нужно обязательно добавить спрайт в HTML с помощью тега
Вот здесь подробно разбиралась тема добавления иконок из спрайта.
Далее вызываете иконки по ID
С производительностью тоже не будет проблем, потому-что спрайт загружается только один раз, а иконки можно многократно вызывать из него в любом месте HTML странички.
Столкнулся с похожей проблемой в браузере Chrome.
В итоге оказалось, что все работает (и без ), если svg-файл грузится с сервера, а не локально.
Всем привет! В этой статье мы рассмотрим работу с svg спрайтами, как их создавать и подключать. Для начала разберемся что такое спрайт. Спрайт — это один большой графический файл, в котором объединены несколько небольших изображений. Спрайты были очень популярны, когда в качестве графики использовали растровые изображения. Создавали один большой файл, который содержит иконки, смайлики, логотипы, после чего через фоновое изображение в CSS и позиционирование показывали только ту часть графики, которая необходима. Это делается для уменьшения количества запросов к серверу, тем самым увеличивая скорость загрузки сайта. Svg спрайт аналогичен: в нем все наши svg изображение зашиты в один файл. Но работать с ним нужно немного иначе.
felixexter commented Feb 25, 2016
Конкретно для иконки путь укажи не от корня /assets/images/icon.svg , а локальный assets/images/icon.svg без слэша в начале.
Аналогично и с остальными ресурсами.
вывод
есть почти наверняка другие способы добавления SVG-файлов на веб-страницу, которую я здесь не покрывал (может быть, iframe?), но я надеюсь, что вы найдете способ, который работает для вашего приложения в этом списке. Обратите внимание, что с каждым методом есть преимущества и недостатки, поэтому сделайте больше исследований перед выбором метода. Есть также некоторые методы, которых, вероятно, следует избегать. Например, не используйте тег, потому что он не является и, вероятно, никогда не будет частью любой спецификации HTML.
альтернативный подход заключается в создании индекса.html-файл с включенными файлами спрайтов. Это лучший подход, потому что это означает, что ваши значки SVG загружаются немедленно.
Не могу понять, как подключить, чтобы нормально работало.
Делаю все по статье из этого сайта и прекрасно все работало, до того момента, как подключил внешним файлом. Иконка не отображается на странице, хотя когда подключал этот же код спрайта на странице, то все работало.
На html странице код такой:
Во внешнем файле test.svg код:
3 ответа на этот вопрос
AdreeUA commented Feb 28, 2016
Решил чтобы не создавать новый пост, сюда написать.
У меня почему-то не работает svg спрайт, в папке icons есть иконки(рабочие, проверял), но вот уже в dist не работает, в браузере открывается и ничего. куда смотреть, что делать?
Как сделать svg спрайт
Что бы создать svg спрайт, создаем svg файл, например, sprite.svg. В него поместим корневой элемент svg. Далее вставляем svg код каждого изображения, обрамляя его тегом symbol. Всем элементам symbol назначаем уникальный id:
AdreeUA commented Feb 28, 2016
@iamstarkov можешь подробней объяснить что я должен увидеть там, на что обратить внимание?
@sneizdecker Почему-то этот сервис не распознает мои иконки. На компьютере открываются во всех браузерах
felixexter commented Feb 25, 2016
Если хостишь на гитхабе, то пути до всех ресурсов должны быть относительно страницы, а не от корня.
jt3k commented Feb 25, 2016
@akhalizev открой /assets/images/icon.svg в браузере. Не ругается на ошибками-xml ?
Использование gulp для автоматической генерации svg спрайтов
Собирать спрайты вручную — очень трудоемкая работа. Поэтому создание svg спрайтов можно автоматизировать. Для этого мы будем использовать gulp и плагин gulp-svg-sprite.
Идея заключается в том, что мы просто перемещаем все свои svg файлы в одну папку, а gulp захватит все эти файлы и сгенерирует спрайт автоматически. Рассмотрим вкратце как это реализовать.
Устанавливаем плагин gulp-svg-sprite:
В файле gulpfile.js создаем таск для генерации спрайта:
В начале мы создаем переменную config с настройками для плагина, в которой говорим, что спрайт будет создаваться через элемент symbol и называется spite.svg. Так же, удаляем ненужные атрибуты и оптимизируем графику.
Далее указываем, что файлы лежат в папке src/img/svgIcons/, а создавать спрайт нужно в папку dist/img/. Плагин автоматически генерирует id для каждого изображения из его имени, по этому иконкам нужно давать осмысленные названия. Дале используем этот спрайт так как мы делали это раньше.
Похожие публикации
Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.
JS:
function openForm() document.getElementById("IconForm").style.display = "block";
>
function closeForm() document.getElementById("IconForm").style.display = "none";
return false;
>
function drawIcon(bc, bg, fc, text) var svg = ' ";
alert(svg);
document.getElementById('Dragon').innerHTML += svg;
return true;
>
function acceptArgs() <
var bc = document.getElementById("select_bc");
bc = bc.options[bc.selectedIndex].value;
var bg = document.getElementById("select_bg");
bg = bg.options[bg.selectedIndex].value;
var fc = document.getElementById("select_fc");
fc = fc.options[fc.selectedIndex].value;
var text = document.getElementById("text_in").value;
closeForm();
drawIcon(bc, bg, fc, text);
у svg должно быть три состояния обычное, при наведении, при нажатии
думаю как это сделать
Vне бы хотелось его вставить в html разметку, а не просто с помощью bsckground-position. Т.к. я хочу анимации при наведении (transition).
И я могу менять цвет обводки с помощью css-свойства fill.
Но есть еще одно состояние когда картинка полностью закрашена. Как сделать чтобы то же свг закрашивалось полностью (например при добавлении класса)?
У меня не получается просто добавить css свойство для этого
Какие есть еще идеи?
Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под Untitled так, чтобы вниз страница не прокручивалась.
Привет. Подскажите пожалуйста, что нужно настроить в конфиге apache24, чтобы локальная страничка могла обрабатывать данные с любого места жесткого диска. Сейчас проблема в том, что я пытаюсь на страничке вызвать изображение (указываю полный путь), которое расположено, например, на флешке, но всегда выводит белый фон.
CSS стили в svg спрайтах
Основным преимуществом использования svg спрайтов является возможность стилизовать иконки через CSS стили. Мы можем менять размер, цвет, фон иконок, а также — менять стили при наведении. Для этого в спрайте необходимо удалить атрибуты fill, stroke, style, так как они имеют большой приоритет. Далее просто в CSS задавать стили для svg элемента.
akhalizev commented Feb 25, 2016
Да, лежит, его не трогал.
Пример использования svg спрайта
Давайте для примера использования svg спрайтов сделаем блок с иконками социальных сетей. Скачаем три svg иконки и сделаем из них спрайт. В итоге получим:
Далее создаем html файл, и делаем в нем небольшую разметку для вывода иконок. После этого копируем содержимое svg спрайта. В итоге получаем такую разметку:
Теперь добавим немного стилей:
Здесь мы выравниваем наши иконки по горизонтали, задаем размеры и цвета. Цвет иконки в обычном состоянии и при наведении задаем с помощью свойства fill родительскому элементу, а у самой иконки наследуем это свойство. Таким образом получаем такую верстку:
See the Pen Svg sprite by astupakov (@astupakov) on CodePen.
sneizdecker commented Feb 28, 2016
использование SVG в качестве
вы также можете встроить SVG-файл в . Использование этой техники позволит вам использовать некоторые расширенные функции SVG, такие как сценарии:
включая SVG с PHP
если вы используете PHP или какой-либо другой серверный код, вы можете вставить SVG-файл на страницу программным способом. Этот метод может быть полезен, если у вас есть более сложное приложение, требующее динамической загрузки SVG-файлов или чего-то еще. В PHP ваш SVG include будет выглядеть примерно так:
dzhiriki commented Feb 25, 2016
Если открывать файл локально (через file://), то свг в хроме не подгружается. Это не баг шаблона, а особенность хрома.
Но проверять страницы локально и не стоит, это плохое решение по многим причинам.
Заключение
На этом пока все. Мы рассмотрели работу с svg спрайтами. Это очень удобный вариант работы с графикой и обладает рядом преимуществ:
The text was updated successfully, but these errors were encountered:
Читайте также: