SVG-рисунки

Страница с SVG-картинками

Создал эту страницу исключительно для того, чтобы сохранить рисунки svg, которые удалось сделать самому, либо скачать в интернете и подкорректировать их, изучая эту технологию рисования в HTML векторных изображений.

Подробно и наглядно о её изученни - здесь:

А на этой странице - РЕЗУЛЬТАТЫ ИЗУЧЕНИЯ названной технологии.

Разбил страницу на 4 основных подраздела.

Сначала показываю самые простые svg-картинки, дальше - более сложные и интересные, а после них разместил те, что скачал и обработал.

Там же (в начале 2-ого подраздела) дал активную ссылку на ресурс, где легко можно скачать бесплатно огромное количество разных svg-рисунков.   смотреть сразу:

В 3-ьем написал об их "очистке" и подключении к сайту.   смотреть сразу:

И, наконец, в 4-ом рассказал о двух самых популярных векторных редакторах. Там же я дал ссылку на бесплатное скачивание одного из них.   смотреть сразу:

Кроме того, в этом же подразделе написал и о своих пробах использования сервисов с он-лайн редакторами, и выводах, сделанных после их тестирования.   смотреть сразу:

Рисуем SVG

В данном подразделе этой учебной страницы показываю только те svg-рисунки, что сделал сам вручную, т.е. БЕЗ использования каких-либо редакторов.

Дал всем рисункам названия, и добавил краткие пояснения их некоторых особенностей. SVG-код показанных примеров можно посмотреть в исходном коде страницы.

Светофор

Нарисовал его с помощью 2-ух тэгов <svg> и их внутренних тэгов: <circle>, <defs>, <text> и <use>.

Кстати!  "Светофор" оказался посередине, т.к. слева находится его невидимый исходник (1-ый тэг svg) с указанием радиуса кругов.

И ещё! Очень важно!  Если исходник НЕ заключить в тэги <defs></defs>, то он (исходник) частично проявится в верхнем левом углу своего "родного" тэга svg.

Кнопка

Сделал её 2-умя тэгами <rect> со скруглёнными углами и тэгом <text> для надписи.

Кстати!  Тэгу <svg> задал только рамку (для видимости). Никакие размеры ему НЕ прописывал, поэтому он отобразился "как есть", т.е. 300 на 150px (по умолчанию).

Звезда

Нарисована с помощью внутреннего тэга <polygon> и его атрибута points (точки).

Пересекающиеся разноцветные круги

Сделал их 3-емя внутренними тэгами <circle>, прописав их атрибутам cx и cy разные значения. Чтобы видеть границы "холста", дал ему однопиксельный "outline".

Звезда и многоугольник

Для сравнения, сделал два одинаковых svg-рисунка звезды и многоугольника на одном "холсте".
Разница в коде у них всего лишь в одном значении атрибута viewBox, причём, в одном единственном!

1-ый рисунок.

Видно, что фигуры на обоих "холстах" отображаются по-разному, а разница между их кодами такая: №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>.

Это конец "холста" с диаграммами. Специально задал им разные цвета, чтобы было легко отличить их в коде.

Важно!  Тэг <center> в данном случае лучше НЕ применять(!) - влияет на svg-текст.

Логотип из кругов и звезды

Ещё один пример svg-рисунка, сделанного в стиле логотипа.
Этот сделал с помощью 4-ёх внутренних тэгов <circle> и 1-ого <polygon> (звезда).

Кстати!  Глобальный тэг <center>, в который я заключил весь svg-код рисунка, в данном случае не особо помог. Он лишь немного сдвинул логотип к центру.

Чаще всего он помогает. Иногда он вообще не нужен. Всё зависит от кода рисунка.

Здесь же - область просмотра, задаваемая в тэге svg атрибутами width и height, чётко встала посередине. Всё правильно!
Ведь, центры фигур в коде заданны именно относительно неё. А она длинная: 650px.

Поэтому, желая поставить логотип посередине, нужно ширину области просмотра сделать равной ширине фигуры.

* * *

Думаю, показал достаточно векторных рисунков, созданных во время изучения технологии SVG. Теперь показываю скачанные и скорректированные.

Скачиваем SVG

Следующие ниже примеры svg-картинок я сам НЕ рисовал, а скачал их из интернета, и очень долго убирал из их кода лишние записи.
Но об этом позже, а сначала - где можно бесплатно скачать svg-картинки?

А скачать их бесплатно можно здесь: Public Domain Vectors

Ниже разместил несколько интересных примеров векторных изображений, скачанных мною с этого полезнейшего(!) ресурса.
  О том, что именно и, как я чистил их код, можно узнать здесь:

Якорь

Круговорот

Сердце

Цветок

Векторный домик

Папка SVG

Значок "готово"

* * *

Ну вот. Теперь, когда всё "готово", нужно обязательно рассказать о подключении к сайту векторных изображений.

Очистка и подключение скачанных 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-рисунки.

О векторных редакторах

Практически 99,9% векторных рисунков в интернете сделаны с помощью графических векторных редакторов, что вполне понятно.

Создавать svg-рисунки вручную довольно просто лишь из векторных "примитивов": круг, эллипс, прямоугольник, многоугольник, линия и т.д..

Если же понадобятся более сложные изображения, то без векторных редакторов сделать их будет чрезвычайно тяжело!
По крайней мере, потребуется очень много времени и терпения. Вот поэтому-то они столь популярны, даже несмотря на "мусорный" код, который приходится вычищать вручную.

А самые популярные из них: платный "Adobe Illustrator" и бесплатный "Inkscape".

Можно нарисовать изображение с их помощью, забрать у них его SVG-код, и подключить, т.е. вставить этот код прямо в HTML-страницу своего сайта.

* * *

Кроме упомянутых встраиваемых векторных редакторов (т.е. программ) есть и он-лайн редакторы, не требующие установки на компьютер.

Ради интереса, опробовал несколько подобных дизайнерских сервисов. Ниже разместил результат проверки одного из них, и выводы об использовании подобных.

ПРОБА он-лайн векторного редактора

ВЫВОДЫ об использовании он-лайн редакторов

Создал относительно простую (показанную выше) svg-картинку довольно быстро. Взял её код из редактора, открыл его для чистки, и ... ... ... Ужас!!!

По-другому назвать это не могу!

Дело не в том, что код ОГРОМНЫЙ, а в том, что он был в одну строчку!

Может быть, подобное безобразие было от того, что я проверял бесплатную возможность использования этого сервиса?   Не знаю!

Длина строки была такая(!), что большую часть её (правую) текстовой редактор сжал в нечитаемые символы.

Понятное дело, что ни о какой чистке не могло быть и речи, пока код находился в таком состоянии.

Час с лишним я занимался одним и тем же "тупым" действием: находил место в коде, где его можно перенести на новую строку, и жал клавишу "ENTER".

Короче, мне вот такое - не понравилось!

Сделал для себя выводы:
1. Прежде чем создавать что-либо более-менее сложное, сначала нарисовать крохотный svg-рисунок, и посмотреть, какой(?!) svg-код отдаст сервис.

2. Самым оптимальным решением для создания бесплатных векторных рисунков является упомянутая программа "Inkscape", даже несмотря на ряд её особенностей.

По сравнению с сервисом "героем повести", она - "белая и пушистая".

К тому же, скачанные мною, и показанные выше векторные изображения, были кем-то созданы именно с помощью этой программы.   смотреть снова:

Нижняя синяя стрелка вернёт в главный раздел "Рисование в HTML", а верхний мини-навигатор позволит просмотреть другие страницы, связанные с этой темой.

ВВЕРХ