Начало работы
Давайте начнём наше погружение с простого примера. Посмотрите на код, представленный ниже:
svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> rect width="100%" height="100%" fill="red" /> circle cx="150" cy="100" r="80" fill="green" /> text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVGtext> svg>
Скопируйте код и вставьте его в файл demo1.svg. После чего откройте его в Firefox. Браузер отобразит вам следующее изображение (пользователи Firefox: нажмите сюда):
Процесс отображения включает следующее:
- Мы начинаем с корневого элемента svg :
- как известно из (X)HTML, декларацию doctype следует опустить, потому что DTD на основе валидации SVG приводит к бо́льшим проблемам, чем их решает
- до SVG 2, чтобы обозначить версию SVG для других типов валидации, всегда следует использовать атрибуты version и baseProfile . Но в SVG 2 оба эти атрибута version и baseProfile обрели статус не рекомендованных
- как диалект XML, SVG всегда правильно должен связывать пространства имён (в атрибуте xmlns). Смотри страницу Namespaces Crash Course (en-US) для большей информации.
- Фон устанавливается красным при помощи рисования прямоугольника , который покрывает всю область изображения
- Зелёный круг с радиусом 80px рисуется поверх центра красного прямоугольника (центр круга смещён на 150px вправо, и 100px вниз).
- Текст «SVG» рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зелёного круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.
Основные свойства файлов SVG
- Первая важная вещь, которую следует заметить — это порядок отображения элементов. Глобально действующее правило для файлов SVG — элементы, которые отрендерились позднее, отображаются поверх предыдущих элементов. Чем дальше вниз элемент (по коду / порядку рендеринга), тем более видимым он будет.
- Файлы SVG в вебе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов:
- Если HTML является XHTML и выводится как тип приложение /xhtml+xml , SVG может быть прямо внедрён в источник XML.
- Если HTML является HTML5, и браузер совместим с HTML5, SVG может быть прямо внедрён тоже. Однако, возможны синтаксические изменения для соответствия с HTML5 спецификацией
- На файл SVG можно ссылаться с помощью элемента object :
Типы SVG файлов
Файлы SVG бывают двух видов. Нормальные файлы SVG — это простые текстовые файлы, содержащие разметку SVG. Рекомендуется расширение «.svg» (все нижним регистром) к имени файла для этих файлов.
Благодаря потенциально массивному размеру, который файлы SVG могут иметь при использовании в некоторых приложениях (например, географические приложения), спецификация SVG также допускает gzip-архивированные файлы SVG. Рекомендуется расширение «.svgz» (все нижним регистром) к имени файла. К сожалению, очень проблематично получить gzip-архивированные файлы SVG для надёжной работы со всеми SVG совместимыми пользовательскими агентами при управлении с сервера Microsofts IIS, когда Firefox не может загрузить gzip-архивированный SVG с локального компьютера. Избегайте gzip-архивированного SVG, кроме случаев, когда вы публикуетесь на веб-сервере, в корректной работе которого вы уверены (смотри ниже).
Слово о Веб-серверах
Теперь, когда вы имеете представление о том, как создавать основные файлы SVG, следующим шагом будет загрузить их на Веб-сервер. Но на этом этапе существуют некоторые подводные камни. Для нормальных файлов SVG, сервера должны посылать заголовки HTTP:
Content-Type: image/svg+xml Vary: Accept-Encoding
Для gzip-архивированных файлов SVG, сервера должны посылать заголовки HTTP:
Content-Type: image/svg+xml Content-Encoding: gzip Vary: Accept-Encoding
Вы можете проверить, правильные ли заголовки HTTP посылает ваш сервер с файлами SVG, используя Network Monitor panel или сайт, такой как web-sniffer.net. Введите URL одного из файлов SVG и смотрите на заголовки ответа HTTP. Если вы обнаружите, что сервер не посылает заголовки с величинами, данными выше — вам следует связаться с вашим хостингом. Если у вас возникнут проблемы с тем, чтобы корректно сконфигурировать их сервера для SVG, существуют способы сделать это самостоятельно. Смотри server configuration page на странице SVG wiki о ряде простых решений.
Неверная конфигурация сервера является очень частой причиной в невозможности загрузить SVG, поэтому убедитесь, что вы проверили конфигурацию вашего сервера. Если ваш сервер не сконфигурирован для того, чтобы посылать правильные заголовки с файлами SVG, тогда Firefox будет вероятнее всего показывать разметку файлов как текст или кодированный мусор, или даже спрашивать программу просмотра выбрать приложение, чтобы открыть их.
- « Предыдущая статья
- Следующая статья »
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 авг. 2023 г. by MDN contributors.
Как подключить svg спрайт в файл в html и css
Как правило решение проблем с отображением иконок из спрайта можно разделить на три части:
- Код иконок и спрайта, — так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта.
- Подключение файла спрайта.
- Подключение внешней таблицы стилей и стилизация самих иконок.
Подключение файла спрайта
При подключении файла спрайта через тег
и background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег
Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер Chrome чувствителен к этому. При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю таблицу стилей svg
Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное решение.
Тег добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.
Подключение внешней таблицы стилей
В шапке файла спрайта необходимо добавить путь до внешней таблицы стилей
Можно сделать специально для svg внешний файл стилей Svgstyle.css и разместить его в той же папке, что и index файл и затем подключить его к главной таблице стилей.
UPD 19.05.2017
Подключение с помощью background-image
.wrapperSvgImage < background-image: url(http://s.cdpn.io/3/kiwi.svg); width: 100px; height: 82px; background-size: cover; border: 1px solid green; >Заливка и обводка
Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.
Атрибуты заливки и обводки (Fill and Stroke Attributes)
Раскраска (Painting)
Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.
rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.
Примечание: Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.
Обводка (Stroke)
Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.
svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> svg>Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.
Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.
Есть три возможных значения для stroke-linecap:
- butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
- square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
- round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.
Используйте stroke-linejoin , чтобы определить, как соединять обводку двух сегментов линии.
svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> svg>Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin . Есть три возможных значения для этого атрибута:
- miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
- round создаёт закруглённый сегмент линии
- bevel создаёт новый угол для помощи в переходе между двумя сегментами
Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray .
svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> svg>В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.
Примечание: Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).
Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.
Также есть дополнительные stroke и fill свойства: fill-rule , которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit , which determines if a stroke should draw miters и stroke-dashoffset , который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)
Использование CSS (Using CSS)
В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill , stroke , stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width , height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.
Примечание: Спецификация SVG строго разделяет атрибуты на свойства и другие атрибуты. Первые могут быть изменены через CSS, а вторые — нет.
CSS может использоваться инлайн через атрибут style :
rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе , как это делается в HTML, она включается в зону , предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.
svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> defs> style type="text/css"> ]]>style> defs> rect x="10" height="180" y="10" width="180" id="MyRect"/> svg>Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:
#MyRect:hover stroke: black; fill: blue; >Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:
svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> rect height="10" width="10" id="MyRect"/> svg>где style.css выглядит примерно так
#MyRect fill: red; stroke: black; >- « Предыдущая статья
- Следующая статья »
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 6 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.Конвертируем SVG-иконку в код для использования в CSS
В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы при наведении курсора на пункт меню, текст и иконка меняли цвет. Для того чтобы не плодить большое количество картинок, было решено перевести svg в код и использовать в стилях CSS.
UPDATE — Не обязательно конвертировать svg в код. Можно использовать код файла svg почти без преобразований и без конверторов.
Краткая инструкция как использовать SVG в CSS
Например, у вас есть файл arrow-right.svg , внутри этого файла вот такой код:
Если конвертировать этот SVG в CSS старым способом представленным ниже, то получится такой код:
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.175 477.175'%3e%3cpath d='M360.731 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z'/%3e%3c/svg%3e");Добавляется куча лишних действий, на выходе получаем сконвертированный код, некрасиво и долго.
Самый простой вариант — использовать код SVG напрямую в CSS.
Пример использования SVG в CSS:
background-image: url('data:image/svg+xml,\ ');То есть, мы взяли весь код без изменения из файла arrow-right.svg и просто вставили его в background-image: url(‘ ‘); , но добавили в самое начало data:image/svg+xml, , а каждую новую строку заэкранировали обратным слешом \ .
Получается, что код SVG почти не изменен и времени это заняло 15 секунд, но нужно учесть такие моменты:
- Можно использовать многострочный svg-код, экранируя каждую строку с помощью обратного слеша — \
- Можно создавать анимированные фоны или элементы с помощью CSS-анимации внутри встроенного SVG.
- Отсутствие viewBox или размеров позволяет фону SVG занимать всю площадь элемента.
- Необходимо экранировать # как %23 при указании цвета, потому что это зарезервированный символ в URL.
Живой пример использования SVG в CSS:
See the Pen KKKRBxr by Denis (@deniscreative) on CodePen.default
Если же вас устраивает вариант с конвертацией SVG, тогда старый добрый рабочий пример представлен ниже.
Краткая инструкция как конвертировать SVG в CSS
Сначала отправляем svg в https://jakearchibald.github.io/svgomg/ для того чтобы получить кодовое значение.
Затем копируем код и вставляем его в это окно:
See the Pen Convert SVG to Data URI for css background-image by Denis (@deniscreative) on CodePen.0
полученный код используем в своем css файле.
Например, берем иконку Facebook (стандартная иконка с небольшим изменением).
На сайте https://jakearchibald.github.io/svgomg/ жмем «Open SVG» или просто перетягиваем иконку на область просмотра. В левом верхнем углу жмем «CODE», выделяем код, а затем жмем на иконку копировать, так мы получим в буфер код нашей свг-картинки.
Затем полученный код вставляем в окно выше, жмем Converte и получаем готовый background-image:
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFF' d='M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z'/%3e%3c/svg%3e");Копируем и используем его в своем css.
Чтобы изменить цвет, меняем fill=’%23FFF’ , только учитываем, что %23 — это обычный знак # , то есть fill=’%23000′ — это обычный черный (#000).
Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка…
Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…
Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…
В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…