Как размещать svg в html
я новичок изучаю веб своими силами и у меня вылезло несколько вопросов по поводу использования svg на странице html.
1. Как правильно вставлять svg в html?
- Вставить svg инлайново(просто вставить весь код svg в html).
- Если иконок больше одной, то отдельно и вставлять их в html где они используются.
- Вставлять с помощью object, iframe, embed.
- Собрать все иконки в спрайт и вытаскивать их с помощью use.
2. Где хранить спрайт?
В html или отдельным файлом спрайтом. Умею вытаскивать иконки из спрайта, если он весь лежит в html или даже если он лежит отдельным файлом.svg где-нибудь в картинках. Уметь то умею но как делать это. А если быть точнее, то где хранить спрайт чтобы не было проблем с кэшированием или какие там проблемы еще бывают…
Можете привести примеры из реальных проектов, что бы было, на что опереться для дальнейшего развития.
3. Использовать внешние стили или писать их внутри svg?
Отслеживать
задан 24 янв в 10:10
28 5 5 бронзовых знаков
Возможный дубликат вопроса: С помощью какого тега лучше всего добавлять svg
24 янв в 17:16
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Как правильно, мне сказать сложно. Поэтому скажу как делаю я ).
Делаю несколько спрайтов, объединяя по какой-нибудь своей логике, и скидываю в /images/icons/ .
Подключаю через use .
Вроде как это один способов, который позволяет кэширование.
Также позволяет использовать указание некоторых svg-параметров через css.
Отслеживать
ответ дан 24 янв в 10:33
656 4 4 серебряных знака 6 6 бронзовых знаков
Знаю несколько способов а какой будет правильный что бы потом не было ни вопросов, ни проблем с той, же интерактивностью (анимацией если придется анимировать).
#1. object
Лучший способ, чтобы реализовать анимацию, интерактивность, стилизацию, масштабирование это:
Этим способом можно добавлять как один файл SVG, так и несколько иконок, объединенных в спрайт. Этой теме посвящен раздел с меткой — svg-спрайт
#2. Инлайн добавление кода SVG в HTML
Если иконок немного и код svg компактный, то вполне допустим этот способ для реализации анимации и всего остального:
Ниже код анимации шестеренок с кнопками пуска и остановки вращения.
#3. Использование тега.
Так как браузеры могут отрисовывать по своим правилам SVG документы, то это дает возможность загружать картинки внутри тегов .
Это может быть хорошим методом, если вы хотите полностью отделить SVG код и скрипт на вашей главной странице. Однако манипуляции SVG изображениями с главной страницы при помощи JavaScript будут немного сложнее.
#4. Другие способы добавления SVG, которые делают анимацию, стилизацию невозможной
Можно, как обычно для любого другого изображения задать ширину, высоту.
По соображениям безопасности при этом способе добавления SVG браузеры отключают скрипты, связывания и другие типы интерактивности, когда они добавляются на страницу, кроме того IE10 , Edge , Safari , Chrome не принимают стили, если они определены в отдельном файле таблицы стилей.
Для покраски изображений остается только один способ: фильтры SVG и CSS
Ниже примеры изменения цвета при наведении:
img:not(:hover) < transition: 2s; filter: saturate(0%); -webkit-filter: saturate(0%); >img:hover .img:hover О других способах добавления SVG в HTML здесь
Работа с SVG. Вставляем SVG на веб страницу
В этом уроке мы рассмотрим способы вставки SVG на веб страницы. Сравним различные варианты и браузерную поддержку:
Через тег
Самый простой способ вставить SVG — воспользоваться тегом :
Заметка: размеры изображения можно задать в самом SVG документе; Увеличивать можно до любого размера без потери качества, ведь это векторная графика. Так же, данный элемент можно оформлять через CSS.
Через CSS
Так же SVG можно вставить на страницу через CSS: через свойство background-image:
header < background: url(assets/svg/columns.svg); >
Если в SVG присутствует какой-то скрипт, интерактивность и ссылки, то они будут игнорированы.
Через тег SVG
В HTML5 есть возможность прямой вставки SVG через одноимённый тег:
HTML5 page with SVG Content This is the markup of an ordinary HTML5 page.
Данный способ сохраняет все скрипты, ссылки и прочий интерактив.
Через теги
Наилучшая совместимость с IE и сохранение основных особенностей SVG.
Как шрифт через @font-face
Поскольку любой шрифт это ни что иное, как набор векторных фигур, то SVG можно вставить на страницу через свойство @font-face:
@font-face
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://demosthenes.info/blog/428/Using-SVG-In-Web-Pages
Перевел: Станислав Протасевич
Урок создан: 25 Декабря 2014
Просмотров: 89586
Правила перепечатки
5 последних уроков рубрики "HTML5"
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
HTML5: API работы с вибрацией
HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
Создание форм с помощью Webix Framework — 4 практических примера
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
Как правильно вставлять SVG
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
Я вам больше скажу: SVG — это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Стилями и скриптами, Карл! Вот вам и простая картинка.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен. Есть четыре основных и у каждого — особенности.
Первый и самый простой — элемент прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.
Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.
Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.
Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.
.picture
Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.
Третий способ, через , наконец-то выбивает стекло между страницей и внутренностями SVG-файла. Работают скрипты, взаимодействие, анимация — если они описаны внутри SVG. Между тегами можно вставить фолбэк, который покажется, если браузер не говорит на SVG.
На самом деле, вместо можно даже использовать , как если бы вы подключили другую страницу. Но работает лучше и подстраивается под размеры картинки.
За гибкость приходится платить: из-за того, что это уже не просто графика и там можно скриптовать, к такому способу предъявляются другие требования безопасности. Например, картинку с другого домена просто так уже не вставить.
Этот способ подходит, когда вам нужно вставить какую-то интерактивную графику: игрушки, графики и всякое сложное. Достаточно вспомнить, что когда-то через вставлялись Flash-ролики. Спросите у родителей, что это такое.
Четвёртый способ заработал, когда браузеры переписали свои HTML-парсеры по новому стандарту и содержимое SVG-файлов стало можно вставлять прямо на страницу, как любые другие теги.
Квадрат
С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты — ну, вы сами знаете. Можно, например, менять цвет заливки при наведении и описывать всё в общих стилях.
rect:hover Минус в том, что такие картинки не кэшируются отдельно от страницы — хотя это можно обойти через символы и юзы, но это длинная история, мы об этом ещё поговорим отдельно.
SVG гораздо больше, чем просто формат графики — это мы с вами уже поняли. Хотите закопаться глубже? Читайте статьи Сары Суайдан, это пока лучшее, из того, что есть. Все ссылки есть в описании к видео.
В итоге: способов куча и все чем-то хороши. Выбирайте подходящий под ваши задачи, но всегда начинайте с самых простых: и фона, а потом уже усложняйте — если не хватает.
Установка SGV иконки
В современной разработке веб сайтов не обойтись без установки масштабируемой векторной графики - SVG (Scalable Vector Graphics), и для этого есть несколько способов установки SVG иконки со своими плюсами и минусами. Для примера возьмем SVG иконку myicon.svg, которую будем добавлять на нашу страницу.
Установка SVG в качестве графического файла
Тут все просто, иконка ставится как обычная картинка в тег img с путем на svg файл, обязательно нужно указать параметры ширины и высоты:
Установка SVG графики в HTML
Вставляем SVG код непосредственно в нужное место HTML, недостаток в том что если картинок много, у нас получится избыточность одинакового кода:
Установка SVG через CSS
Делаем SVG графику фоновым изображением для указанного элемента. Для этого переводим SVG код в CSS формат конвертером:
Установка SVG через JS
Создаем JavaScript переменную со значением кодом иконки, а далее используем ее в нужном элементе:
Далее повторяем выше указанный вариант с CSS, вставляя нужную иконку куда угодно.
Можно JS код сделать на jQuery: