Создаём и используем символьный svg-спрайт
Содержание:
- Делаем SVG адаптивным
- Установка в HTML
- Рисуем SVG
- Продвинутый уровень
- «SVG» — формат — картинка или код!?
- Как работать с файлами SVG
- Базовые формы SVG
- 5 последних уроков рубрики «HTML5»
- Сравнение альтернативных программ:
- Пользователи, которые скачивали Sketsa SVG Editor, также скачивали:
- Что такое файл SVG?
- Добавление SVG на страницы
- Базовые SVG-элементы
- Внешние SVG-файлы
- Очистка и подключение скачанных SVG-рисунков
- Установка через JS
- Что за формат SVG и где используется
- Чем открыть SVG рисунок?
- Заключение
Делаем SVG адаптивным
После прямой вставки SVG между тегом <body?, HTML страницы будет выглядеть примерно так:
<body> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250"cy="250" r="200" opacity="0.6" /> </svg> </body>
Если слегка почистить тег <svg>, то код станет более презентабельным:
<svg version="1.1" viewBox="0 0 500 500"> <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250"cy="250" r="200" opacity="0.6" /> </svg>
Удаление лишних атрибутов элемента <svg> делает изображение адаптивным, однако добавляет чуть больше пространства выше и ниже картинки. Атрибут viewBox нужно оставить. Далее нам нужно сделать ещё несколько шагов:
Во-первых, поместите элемент SVG в <div> и добавьте атрибут preserveAspectRatio и класс родительскому элементу <svg>:
<div class="svg-container"> <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content"> <circle fill="#F7941E" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" /> </svg> </div>
Эти действия поместят SVG в верхнюю часть контейнера. Далее применим парочку трюков, которые обычно используются для адаптивности видео:
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
А теперь стили непосредственно к SVG:
.svg-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
Данный способ делает SVG адаптивным без нанесения ущерба другим элементам страницы; Этот же способ работает в случае использования тега <object>:
<div class="svg-container"> <object type="image/svg+xml" data="samurai.svg" width="100%"height="100%" class="svg-content"> </object> </div>
Весь контент SVG будет изменяться в размере, даже текст.
Установка в HTML
Можно вставить SVG графику непосредственно в нужное место HTML кода:
<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/>
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/>
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/>
<circle cx=»12″ cy=»12″ r=»10″/>
</svg>
|
1 |
<svg width=»128″height=»128″role=»img»xmlns=»http://www.w3.org/2000/svg»viewBox=»0 0 24 24″stroke=»#337AB7″stroke-width=»2″stroke-linecap=»square»stroke-linejoin=»miter»fill=»none»color=»#337AB7″> <path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> <line stroke-linecap=»round»x1=»9″y1=»9″x2=»9″y2=»9″/> <line stroke-linecap=»round»x1=»15″y1=»9″x2=»15″y2=»9″/> <circle cx=»12″cy=»12″r=»10″/> </svg> |
Вариант хороший, но только для одной картинки. Если картинок много, у нас получится масса одинакового кода.
Рисуем SVG
В данном подразделе этой учебной страницы показываю только те svg-рисунки, что сделал сам
вручную, т.е. БЕЗ использования каких-либо редакторов.
Дал всем рисункам названия, и добавил краткие пояснения их некоторых особенностей. SVG-код показанных примеров можно посмотреть
в исходном коде страницы.
Светофор
Нарисовал его с помощью 2-ух тэгов <svg> и их внутренних тэгов:
<circle>, <defs>, <text> и <use>.
SVG-рисунок светофораКрасныйЖёлтыйЗелёный
Кстати! «Светофор» оказался посередине, т.к. слева находится его невидимый исходник (1-ый тэг svg)
с указанием радиуса кругов.
И ещё! Очень важно! Если исходник НЕ заключить в тэги , то он (исходник) частично проявится
в верхнем левом углу своего «родного» тэга svg
Кнопка
Сделал её 2-умя тэгами <rect> со скруглёнными углами и тэгом <text> для надписи.
Векторный рисунок кнопкиК Н О П К А
Кстати! Тэгу <svg> задал только рамку (для видимости). Никакие
размеры ему НЕ прописывал, поэтому он отобразился «как есть», т.е. 300 на 150px (по умолчанию).
Нарисована с помощью внутреннего тэга <polygon> и его атрибута points (точки).
SVG-рисунок звезды
Пересекающиеся разноцветные круги
Сделал их 3-емя внутренними тэгами <circle>, прописав их атрибутам cx и cy
разные значения. Чтобы видеть границы «холста», дал ему однопиксельный «outline».
SVG-картинка пересекающихся разноцветных кругов
Для сравнения, сделал два одинаковых svg-рисунка звезды и многоугольника на одном «холсте».Разница в коде у них всего лишь в одном значении атрибута viewBox, причём,
в одном единственном!
1-ый рисунок.
SVG-рисунок звезды и многоугольника №1
2-ой рисунок.
SVG-рисунок звезды и многоугольника №2
Видно, что фигуры на обоих «холстах» отображаются по-разному, а разница между их кодами такая:
№1 — viewBox=»0 100 1200 200″ и №2 — viewBox=»0 100 900 200″.
Логотип из многоугольника и звёзд
Создание svg-картинок в качестве логотипов — один из возможных и самых частых способов применения этой технологии.
Сделал его с помощью 3-ёх внутренних тэгов <polygon> и 4-ёх <g> (вспомогательных).
Векторный логотип
Все вспомогательные тэги <g> заключил в объединяющий <g>,
в котором задал цвет и толщину обводки.
Для отрисовки фигур использовал атрибуты points.
Чтобы (при желании) можно было вращать фоновый многоугольник, прописал ему атрибут transform.
Птичка
Этот svg-рисунок сделал ради пробы. Попробовал тэг style вставить
ВНУТРЬ тэга svg. Все цвета рисунка задавал в нём (в стилях). O.K! Всё работает!
Кроме этого, вставил в код CSS строчку #bird {transform: scale(2);}
Птица стала в 2 раза больше, а чтобы она уместилась вся в отведённом ей холсте, использовал атрибут
viewBox=»0 85 300 200″, который создал собственную систему координат.
SVG-рисунок птички
Диаграммы
Пример двух диаграмм, выполненных разными способами на одном «холсте», т.е.
в одном тэге <svg>.
Векторные диаграммыАбсолютные координатыОтносительные координаты
Это конец «холста» с диаграммами. Специально задал им разные цвета, чтобы было легко отличить их в коде.
Важно! Тэг
Логотип из кругов и звезды
Ещё один пример svg-рисунка, сделанного в стиле логотипа.
Этот сделал с помощью 4-ёх внутренних тэгов <circle> и 1-ого <polygon> (звезда).
Векторный логотип №2 из кругов и звезды
Кстати! Глобальный тэг <center>, в который я заключил весь svg-код рисунка, в данном случае
не особо помог. Он лишь немного сдвинул логотип к центру.
Чаще всего он помогает. Иногда он вообще не нужен. Всё зависит от кода рисунка.
Здесь же — область просмотра, задаваемая в тэге svg атрибутами width и height, чётко
встала посередине. Всё правильно!
Ведь, центры фигур в коде заданны именно относительно неё. А она длинная: 650px.
Поэтому, желая поставить логотип посередине, нужно ширину области просмотра сделать равной ширине фигуры.
* * *
Думаю, показал достаточно векторных рисунков, созданных во время изучения технологии SVG. Теперь показываю скачанные и скорректированные.
Продвинутый уровень
Теперь добавим заголовок, чтобы получить картинку как в начале статьи. Пишем после тега тег :
Так как наш тег с заголовком первого уровня написан ниже тега с графикой, то браузер и разместил заголовок ниже картинок. Чтобы графика легла сверху текста, нужно пойти на хитрость:
- Добавить стиль к svg-тегу.
- В этом стиле прописать абсолютное позиционирование и установить значение z-index = -1, чтобы слои с рисунками оказались ниже всех и не мешали остальным.
- Также в этот стиль нужно добавить свойство display: block — оно управляет тем, как располагается содержимое всего блока. Подробно про это свойство мы рассказывали в подборке полезных CSS-команд — почитайте, если интересно, как управлять внешним видом страницы.
Добавим это в стили и соберём полную страницу:
«SVG» — формат — картинка или код!?
Дадим определение, что такое «SVG»:
SVG — формат файла «example.svg» «лёгкий» и масштабируемый. С ними можно работать, как с обычным изображением. И данный тип изображения можно открыть в редакторе «svg» и вы получите код «xml».
SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.
Все очень просто! Это одно и тоже, только в разном виде! Сейчас мы разберемся!1). У нас есть svg картинка с разрешением(соответственно .svg), которая доступна по адресу, нажмите, и посмотрите :
Перед вами должна открыться такая картинка:
Чем отличается картинка с разрешением ‘.svg‘ и код ‘svg‘.Обычная стандартная картинка, которая выглядит как картинка и ведет себя как картинка, но только с разрешением svg.
2)
И следующим шагом, нажмите по открытой картинке сочетание клавиш ctrl + U
Если мы посмотрим на код, который перед нами открылся — мы видим код «svg», обращая выше внимание, сто колесо прокрутки очень длинно получилось, что означает там много кода!
Чем отличается картинка с разрешением ‘.svg‘ и код ‘svg‘.Весь код вот он:
<?xml version=»1.0″ ?>
1). Для вывода картинки с разрешением «.svg» — используется стандартный код тега img
Давайте ограничим высоту и ширину, картинки поместив его в див с размерами 50 на 50, а то эта картинка пол экрана будет занимать…:
И давайте выведем данный код прямо здесь:
Вывод картинки ‘SVG‘ и когда на странице2)
Код тоже обрамим этим же дивом с этими же размерами:
<?xml version=»1.0″ ?>
И далее разместим этот код прямо здесь:
<?xml version=»1.0″ ?>
Никакой разницы между расширением «.svg» и «кодом svg» нет! Это одно и тоже!
Пользуйтесь на здоровье! Не забудьте сказать
Как работать с файлами SVG
Если вы не слишком в восторге от всей XML-стороны SVG, это нормально. Вы можете просматривать и изменять изображения SVG, не касаясь кода. Вот как:
Как открыть файл SVG
Если вы хотите просто просмотреть изображение SVG, не редактируя его, вы можете сделать это прямо в своем веб-браузере, поскольку браузеры предназначены для интерпретации и отображения SVG. Вы также можете предварительно просмотреть SVG в специальной программе редактирования, о чем мы поговорим дальше.
Как создать или отредактировать файл SVG
Чтобы изменить файл SVG, вы можете напрямую изменить файл SVG в текстовом редакторе, но это непрактично для изменения большинства вещей, помимо цветов. Вместо этого используйте программное обеспечение для редактирования векторной графики. Бесплатные и платные варианты включают:
- Adobe Illustrator, программа Adobe для создания и редактирования векторной графики. Вы можете экспортировать проекты Adobe как SVG или в несколько растровых форматов.
- Microsoft Visio, блок-схема, диаграмма и создатель инфографики.
- CorelDRAW, еще один специализированный редактор векторной графики.
- GIMP (GNU Image Manipulation Program), бесплатная, популярная программа для редактирования изображений с открытым исходным кодом.
- Google Docs – вы можете экспортировать рисунки, созданные в Google docs, в SVG.
- Inkscape, бесплатный векторный инструмент для рисования и текста.
Чтобы начать создавать SVG с нуля, вам не нужно ничего знать о XML или программировании. Вы можете нарисовать свои векторы в одной из программ, перечисленных выше, и экспортировать их в формат SVG.
Каждая программа имеет свои ограничения и кривую обучения. Если вы планируете продолжить изучение SVG, попробуйте несколько вариантов и ознакомьтесь с доступными инструментами, прежде чем выбирать бесплатный или платный вариант.
Базовые формы SVG
В соответствии со спецификацией мы можем рисовать несколько базовых форм: линия, полилиния, прямоугольник, круг, эллипс. Все элементы должны быть вставлены в тег . Рассмотрим базовые элементы подробно.
Линия
Для вывода линии в SVG используется элемент . Он рисует отрезок, для которого нужно определить две точки: начало и конец.
<svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Начало отрезка определяется атрибутами и , а конечная точка определяется координатами в атрибутах and .
Также имеется два других атрибута ( и ) которые используются для определения цвета и ширины линии соответственно.
5 последних уроков рубрики «HTML5»
-
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
-
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
-
HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
-
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
-
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
Сравнение альтернативных программ:
|
Elements+ for PSE 12 |
Fresh View |
Weight loss, personal training Rochester |
Scanahand |
|
| Описание | Добавляет дополнительные функции к элементам Photoshop | Организуйте и упорядочивайте ваши изображения и медиа файлы без труда | Скачать Weight loss, personal training Rochester, версия 100.01 | Создавайте новые шрифты, которые вы сможете использовать в документах Word |
| Рейтингу | ||||
| Загрузки | 1,006 | 317 | 402 | 479 |
| Цена | $ 0 | $ 0 | $ 0 | $ 59 |
| Размер файла | 3450 KB | 2.01 MB | 227 KB | 6.12 MB |
|
Download |
Download |
Download |
Download |
Пользователи, которые скачивали Sketsa SVG Editor, также скачивали:
Мы рады посоветовать вам программы которые понравились другим пользователям Sketsa SVG Editor. Вот список программ, аналогичных Sketsa SVG Editor:
Mediashout
4
Исследуйте и создавайте презентации, основанные на Библии, без особого труда.
скачать
Программы для презентаций
Рейтинг пользователей
Allworld Internet Radio
1.0
Слушайте радио со всего мира.
скачать
Программы для презентаций
Рейтинг пользователей
ProfCast for Windows
1.0.0
Записывайте презентации, лекции и особые события с помощью этого инструмента
скачать
Программы для презентаций
Рейтинг пользователей
doPublicity Digital Signage Software
4.8
Донесите информацию до множества экранов, контролируя все на одном месте.
скачать
Программы для презентаций
Рейтинг пользователей
Что такое файл SVG?
Файл SVG, сокращение от файла масштабируемой векторной графики, представляет собой стандартный тип графического файла, используемый для рендеринга двухмерных изображений в Интернете.
В отличие от других популярных форматов файлов изображений, формат SVG хранит изображения как векторы. Возникает вопрос: что такое векторная графика?
Растр против вектора
Сегодня в сети используется несколько форматов файлов изображений, которые мы можем разделить на две категории: растровая графика и векторная графика.
Вы, наверное, знакомы с распространенными форматами PNG и JPEG. Это форматы растровой графики, что означает, что они хранят информацию об изображении в виде сетки цветных квадратов, также называемой растровым изображением. Квадраты на этом растровом изображении объединяются, образуя связное изображение, очень похожее на пиксели на экране компьютера.
Растровая графика хорошо подходит для изображений с высокой детализацией, таких как фотографии, на которых необходимо указать точный цвет каждого пикселя. Растровые изображения имеют фиксированное разрешение, поэтому увеличение их размера снижает качество изображения.
Векторные графические форматы, такие как SVG и PDF, работают по-разному. Эти форматы хранят изображения как набор точек и линий между точками. Математические формулы определяют расположение и форму этих точек и линий и поддерживают их пространственные отношения при увеличении или уменьшении масштаба изображения. Файлы векторной графики также хранят информацию о цвете и даже могут отображать текст.
Как работают файлы SVG
Файлы SVG написаны на XML, языке разметки, который используется для хранения и передачи цифровой информации. Код XML в файле SVG определяет все формы, цвета и текст, составляющие изображение.
Давайте посмотрим на несколько примеров. Начну с рисования простого круга SVG:
Когда я открываю файл этого круга в текстовом редакторе, появляется этот XML-код:
Как видите, кода здесь не так много. Нам нужна всего одна строка кода, чтобы нарисовать круг. Это потому, что XML делает за нас большую часть работы с тегами. В приведенном выше коде теги показаны розовым цветом в угловых скобках.
Чтобы нарисовать круг, XML-код определяет форму с помощью тега , его положение с помощью атрибутов и с атрибутами cx и cy, радиус с атрибутом r и цвет внутри тега . # f4795b – это шестнадцатеричный код цвета для данного оттенка оранжевого.
Когда предоставляется файл SVG, подобный этому, веб-браузер (или другое приложение) принимает эту информацию XML, обрабатывает ее и отображает на экране в виде векторного изображения. Все современные браузеры визуализируют SVG таким образом, как и специализированное программное обеспечение для редактирования графики.
Вы также заметите, что этот XML-файл написан на английском языке. SVG – это в основном текстовые файлы, что делает их доступными для чтения людьми. Это позволяет разработчикам напрямую вносить изменения в файлы XML. Например, я мог бы заменить значение заливки, чтобы изменить цвет круга:
Конечно, с векторами мы можем сделать гораздо больше, чем с простыми кругами. Давайте посмотрим на более сложное изображение, логотип звездочки HubSpot:
Этот простой значок состоит из 30 линий, соединенных 30 точками:
Откроем этот SVG-файл в текстовом редакторе:
Хорошо, здесь происходит еще кое-что. Но концепция та же. У нас все еще есть тег , который сообщает нам цвет. Вместо тега , чтобы придать нам форму, у нас есть тег . Все значения в этом теге определяют точки изображения и линии между этими точками.
Добавление SVG на страницы
В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.
Чтобы встроить SVG используя элемент , вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут или (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите Изображения в HTML.
Плюсы
- Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте
- Вы можете легко превратить изображение в гиперссылку, поместив в элемент .
Минусы
- Вы не можете изменять изображение с помощью JavaScript.
- Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
- Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например ).
Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в атрибуте и использовать атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами — старые же браузеры будут загружать PNG:
Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:
Подобно методу , описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.
Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то .
Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:
Плюсы
- Вставка вашего SVG путём SVG inline позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
- Вы можете присваивать -ы и элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой как свойство CSS.
- SVG inline единственный метод, который позволяет вам использовать CSS-взаимодействия (как ) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).
- Вы можете разметить SVG как гиперссылку, обернув в элемент .
Минусы
- Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.
- Дополнительный SVG код увеличивает размер вашего HTML файла.
- Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.
- Вы можете добавить альтернативный вариант в элементе , но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).
<iframe> (en-US)
Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью выполняется как мы изучали ранее в главе От <object> к <iframe> — другие технологии внедрения.
Вот краткий обзор:
Это — определённо не самый лучший метод для выбора:
Минусы
- Как вы можете видеть, у -ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают -ы.
- Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый origin, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.
Базовые SVG-элементы
| line | |
| polyline | |
| polygon | |
| rect | |
| circle | |
| ellipse | |
| path |
Общие атрибуты тегов SVG-элементов
- stroke
- Цвет линии
- stroke-width
- Толщина линии
- stroke-linecap
-
Стиль концов линии.
Возможные значения атрибута:- round – по форме круга;
- square – по форме квадрата.
Например:
РЕЗУЛЬТАТ:
- stroke-dasharray
-
Чередование штрихов и пробелов в пунктирной линии. Например:
РЕЗУЛЬТАТ:
- stroke-dashoffset
-
Сдвиг пунктира. Например:
РЕЗУЛЬТАТ:
- fill
- Цвет заливки (none – без заливки)
- fill-opacity
- Прозрачность заливки (от 0 до 1)
- fill-rule
- Правило заливки.
Возможные значения атрибута:- nonzero – сплошная заливка;
- evenodd – внутренняя часть фигуры не заливается.
- style
- Стиль элемента
- class
- Класс элемента
Внешние SVG-файлы
Инструкции SVG можно упаковывать во внешние файлы и подключать как обычные изображения. Например, вы нарисовали красивую иконку в векторном редакторе, сделали экспорт в формат SVG и подключили к странице как обычное изображение. Браузер поймёт инструкции и нарисует ваше изображение красиво и плавно, какого бы размера оно ни было.
Это особенно полезно на мониторах высокого разрешения и на мобилках: например, если вам на сайте нужны какие-то иконки, вы можете подключить их как SVG-файлы, и браузер отрисует их корректно хоть на retina-дисплеях, хоть на старых Full-HD мониторах.
Если хотите попробовать, скачайте любую из иконок Чикина и добавьте на сайт через тег — увидите, как это красиво. Не забудьте указать width и height, чтобы векторная картинка знала, в каком размере отрисовываться.
Очистка и подключение скачанных SVG-рисунков
Если о подключении созданных самостоятельно рисунков и говорить-то нечего, то об изображениях, скачанных где-то в интернете,
сказать стоит.
Конечно, показанные выше svg-рисунки, взятые мною в интернете, гораздо интереснее и сложнее сделанных вручную.
НО!
Прежде чем их подключать к своему сайту, их пришлось, как следует чистить от «мусорных» записей в коде.
А записей таких в подобных (скачанных) картинках ОГРОМНОЕ КОЛИЧЕСТВО!
К примеру, в коде последнего svg-рисунка их было аж 160(!) строчек из 170-ти.
Посмотреть, как сейчас выглядит код, можно в исходнике страницы, а увидеть то, каким он был ДО очистки, можно здесь:
На сделанном «сборном» скриншоте начала и конца кода, я отметил красным, что удалил. Зелёным,
что нужно оставлять. А синим отметил откровенную «галиматью»,
какую редакторы «лепят» в создаваемых ими кодах.
Иначе это не назовёшь!Переносить угловые скобки тэга на отдельную строчку — это именно галиматья!
Более сотни строчек такого «мусора» находится между тэгов <metadata></metadata> в
самом конце кода, где чего только не «понапихано»!
А ссылок на сторонние сайты там столько(!), что скачанный из интернета рисунок, пусть даже очень красивый, похож на это яблоко слева,
что я сделал в «Фотошоп» (откроется в новом окне).
Специально сделал этот неприятный коллаж из красивого, сочного яблока, чтобы образно показать, что будет с сайтом, использующим НЕочищенные векторные изображения.
Кроме ссылок, подобные изображения содержат ОЧЕНЬ много просто лишнего кода, который не столь вреден для сайта. Он просто-напросто
мешает коррекции рисунка вручную, когда наступает очередь такую проводить.
Кроме названного выше тэга <metadata>, который обязательно нужно удалять вместе со всем его содержимым, есть различные
специальные «редакторские» тэги и фильтры.
К примеру, такие: sodipodi:nodetypes=» «, inkscape:label=» «, inkscape:groupmode=» »
и другие, содержащие упоминания о редакторе-создателе: inkscape.
Особенно! Особенно много места занимает фильтр inkscape:original=» «, содержащий
длиннющую строчку кода.
Пробовал удалять такие фильтры. О.К! Работает и без них!
Удалил несколько штук подобных строчек из примера Папка SVG. Штук 5 или 6. Удалять ВСЕ, честно говоря, поленился. Попробовал — и ладно!
Кстати! Заменять в стилях код цвета, к примеру, такой: #000000 на его сокращённый аналог:
#000 — можно!
Но вместе с тем!
Иметь ввиду! С внутренними тэгами <defs> нужно быть аккуратнее!
Закрывать их подобным образом: <defs></defs> можно не всегда! Даже простой перенос
закрывающей скобки /> на одну строчку с концом тэга может вызвать изменение в отображении рисунка браузером.
И напомню: внутри этого тэга комментарии НЕ СТАВИТЬ!
И ещё!
Очистив код скачанного svg-рисунка от служебных записей редактора, изменять рисунок в редакторе уже станет невозможным!
* * *
Теперь несколько слов о программном обеспечении, с помощью которого были кем-то сделаны скачанные мною, и показанные выше svg-рисунки.
Установка через JS
Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе
let icon = ‘<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/> \
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/> \
<circle cx=»12″ cy=»12″ r=»10″/> \
</svg>’; // наша иконка
let svgimg = document.querySelectorAll(«.happyface»); // находим все элементы с классом happyface
for( let i = 0; i < svgimg.length; i++){ // проходим циклом по всем элементам
svgimg.innerHTML = icon; // вставляем в них иконку
}
|
1 |
let icon='<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\ <path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \ </svg>’;// наша иконка let svgimg=document.querySelectorAll(«.happyface»);// находим все элементы с классом happyface for(leti=;i<svgimg.length;i++){// проходим циклом по всем элементам svgimgi.innerHTML=icon;// вставляем в них иконку } |
И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз.
<div class=»happyface»></div>
| 1 | <div class=»happyface»></div> |
На jQuery код получается проще:
let icon = ‘…’; // наша иконка
$(«.happyface»).html(icon); // вставляем иконку в элемент с классом happyface
|
1 |
let icon=’…’;// наша иконка $(«.happyface»).html(icon);// вставляем иконку в элемент с классом happyface |
Что за формат SVG и где используется
Разработанный в 2001 году Консорциумом Всемирной паутины, формат SVG представляет собой не совсем обычный документ. В его основу положены языки разметки VML и PGML, то есть речь идет, по сути, о текстовом файле. При этом редакторы и браузеры интерпретируют SVG как изображение, которое может быть как статическим, так и анимированным. Будучи наиболее распространенным среди прочих форматов, предназначенных для хранения векторной графики, в настоящее время SVG активно используется для хранения и распространения векторных и смешанных изображений в интернете.
Как и все форматы, SVG имеет свои плюсы и минусы. К первым относятся масштабируемость без потери качества, относительно малый вес, возможность интеграции в SVG-документы PNG, GIF, JPG-изображений, редактирование (при наличии соответствующего опыта) в текстовых редакторах, индексирование поисковыми роботами, поддержка анимации и распространенность. К преимуществам формата следует также отнести хорошую сжимаемость, открытость и адаптивность.
С другой стороны SVG наследует недостатки XML со всеми вытекающими. Формат плохо подходит для создания сложных объектов, так как файлы SVG быстро «набирают» вес, если состоят из множества мелких деталей. Кроме того, для отображения картинки программам нужно читать весь документ, что затрудняет применение формата в картографических приложениях. Среди недостатков формата отмечаем относительно низкую кроссбраузерность и отсутствие хотя бы минимальной поддержки трехмерной графики.
Чем открыть SVG рисунок?
SVG — формат, созданнй специально для Интернета, для описания векторных примитивов на веб-странице. Разумеется, среди программ-просмотрщиков SVG, флагманами выступают современные браузеры (последние версии Opera, Firefox, Chrome, а также IE 9 версии). Браузеры поддерживают почти все элементы SVG (в том числе SMIL анимацию и ECMAScript), уровень поддержки в Opera стремится к 100%.
Таблица, показывающая уровень поддержки SVG разными браузерами по состоянию на июль 2010 года:
| Браузер | Уровень поддержки |
|---|---|
| Opera 10.53 | 95 % |
| Chrome 4 | 82 % |
| Safari 4.0.5 | 82 % |
| Firefox 3.6 | 62 % |
| Internet Explorer 9 prev 3 | 52.55 % |
Из этих данных следует, что открывать SVG лучше всего браузером Opera последней версии. Данный браузер имеет версии как для Windows, так и Linux, потому проблем не должно возникнуть ни у кого.
А вообще, почти все программы для просмотра и редактирования изображений поддерживают SVG, однако большинство из них не умеет воспроизводить анимацию, не говоря о скриптах.
Заключение
Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы ещё не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.
В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.
