SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.

Для чего используют SVG

• Маленький размер файла, который хорошо сжимается
• Масштабирование до любого размера без потери качества
• Отлично смотрится на дисплеях retina
• Полный контроль дизайна при интерактивности и в фильтрах

Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:

​

Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.

​

После того, как вы сохраните файл, появится еще одно диалоговое окно с опциями SVG. Честно говоря, я не очень много знаю о всех представленных в этом окне настройках. Существует спецификация SVG профилей, так что, если вам интересно можете почитать. Я считаю, что SVG 1.1 работает отлично.

​

Самое интересное здесь то, что вы можете либо нажать ОК и сохранить файл, или нажать кнопку “SVG Code…” и откроется текстовый редактор с кодом SVG.

​

Оба способа могут оказаться полезными.

Используем SVG в виде тега img

В Illustrator наш холст получился 612px ✕ 502px.

Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:

Check out this Pen!

Как сделать кроссбраузерный SVG

Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.

Если вам необходимо использовать SVG, но также нужна поддержка вышеперечисленных браузеров, есть несколько вариантов решения проблемы. Я использовал несколько техник в различных проектах для решения этой проблемы.

Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:

If (!Modernizr.svg) { $(".logo img").attr("src", "images/logo.svg?1"); }

David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:

Также может помочь сервис SVGeezy. По ходу продолжения этой статьи мы разберём много различных резервных методов для поддержки SVG.

Использование SVG в качестве фона background-image

По аналогии с тегом img, SVG можно использовать в качестве фонового изображения:

Kiwi Corp .logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }

Обратите внимание, мы устанавливаем background-size точно таким же, как и размер элемента. Это необходимо сделать, так как в противном случае мы бы увидели небольшую верхнюю часть оригинального изображения. Эти цифры учитывают оригинальные пропорции изображения. Вы также можете использовать в качестве значений background-size ключевые слова, например contain, чтобы изображение полностью занимало весь элемент.

Использование SVG в качестве фонового изображения накладывает свой отпечаток на браузерную поддержку, но вцелом, всё аналогично, как и при использовании тега img.

Modernizr может помочь нам здесь еще более эффективным способом, чем в случае с img. Дело в том, если заменить фоновое изображение с поддерживаемым форматом, то будет выполнен лишь один HTTP запрос вместо двух, как в случае с img. Modernizr добавляет имя класса “no-svg” к тегу HTML, если браузер не имеет поддержки SVG:

Main-header { background: url(logo.svg) no-repeat top left; background-size: contain; } .no-svg .main-header { background-image: url(logo.png); }

Если у вас есть проблемы с использованием двух вышеперечисленных способов использования SVG, ниже приведены еще способы размещения векторной графики.

Использование “inline” SVG

Выше упоминалось, что при сохранении картинки в формате SVG, с помощью редактора Illustrator можно получить правильный SVG код (также можно отрыть файл с помощью текстового редактора и скопировать этот код). Вы можете скопировать этот код в ваш HTML и SVG будет отображаться абсолютно также, как при использовании img.

Это может быть полезным, так как образ изображения приходит вместе с кодом в документ и при этом не осуществляется HTTP запрос. Другими словами, преимущества такие же, как при использовании данных Data URI. Однако, недостатки тоже есть. Из-за вставки вставки прямого кода SVG, документ начинает быть похож на большой раздутый кусок дерьма.

Также есть вариант для вставки SVG на стороне сервера:

Оптимизация SVG

Adobe Illustrator не производит по умолчанию действия по оптимизации получаемого SVG изображения. Он предоставляет DOCTYPE и заметки, и всё это по большому счёту мусор. SVG по умолчанию имеет довольно небольшой вес, но почему бы не сделать его ещё меньше? Peter Collingridge предоставил онлайн инструмент для оптимизации SVG Optimiser. С помощью этого сервиса вы можете закачать старый файл и получить оптимизированный новый.

Если хотите больше хардкора – без проблем, вот инструмент для оптимизации SVG с помощью серверного javascript Node JS tool https://github.com/svg/svgo

Стилевое оформление SVG

Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.

Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например:hover.

Kiwi { fill: #94d31b; } .kiwi:hover { fill: #ace63c; }

В SVG имеются забавные фильтры. Например размытие:

...

Затем вы можете при необходимости применить это в css:

Ground:hover { filter: url(#pictureFilter); }

Вот, что получилось:

Check out this Pen!

Поддержка “inline” SVG браузерами

Список браузеров, поддерживающих данный режим отображения SVG можно посмотреть здесь http://caniuse.com/#feat=svg-html5. Опять же, поддержки нет в IE8 и Android 2.3.

Один из вариантов фолбэка для такого типа SVG:

...

Затем снова используем Modernizr:

Logo-fallback { display: none; /* Make sure it"s the same size as the SVG takes up */ } .no-svg .logo-fallback { background-image: url(logo.png); }

Использование SVG в качестве объекта object

Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:

Для кроссбраузерной поддержки используем Modernizr:

No-svg .logo { width: 200px; height: 164px; background-image: url(kiwi.png); }

Этот вариант отлично работает с кешированием и имеет самую большую поддержку браузерами, чем все вышеперечисленные. Но, чтобы подействовать с помощью CSS на такой объект, придётся прописывать стили непосредственно в SVG файл.

...

Использование Data URI вялется способом уменьшения веса SVG. Mobilefish.com предоствляет онлайн инструмент оптимизации для этой цели. Достаточно вставить содержимое вашего SVG файла и заполнить форму, далее результат будет отображён в текстовом поле, который можно скопировать. Выглядит это так:

​

Вы можете использовать этот код где угодно! Нпример:

Logo { background: url(data:image/svg+xml;base64,); }

И кстати, если у вас есть встроенные style в SVG, который находится до base64, он будет работать, если вы используете его, как object!

Файлы в формате SVG это файлы масштабируемой векторной графики. Если быть более точным, то это язык описания двумерной графики. Основой послужил язык разметки XML.
Данный формат обладает рядом достоинств: будучи векторными изображениями, SVG изображение сохраняет качество независимо от того, как они масштабируются или изменяются. Изображения SVG поддерживают интерактивность и анимацию. SVG является стандартом W3C, а значит имеет хорошую и качественную поддержку. Создавать SVG файлы можно не только в графических редакторах, но и в любом текстовом редакторе.
SVG-изображения, основанные на XML, доступны для поиска, индексируются и могут быть написаны в скриптах и сжаты.

Прежде чем перейти к рисованию без рисования посмотрим на структуру пустого svg файла, достаточного для отображения в любой программе.

1.
2.
3.
4.
5.

Для удобства строки пронумерованы. В первой строке находится стандартное объявление XML документа.
Вторая строка- указание DTD-схемы документа. В третьей строке задается размер создаваемого документа 600 на 600 пикселей. Первый атрибут тега
Если открыть в блокноте рисунок созданный в inkscape, то можно найти дополнительные теги, которые создает inkscape по умолчанию. Если же при сохранении рисунка выбрать простой svg, то структура файла будет чуть другой.
Перейдем непосредственно к созданию основных фигур. Вооружаемся блокнотом и вперед. То что сделаем проверяем в inkscape, поэтому держим его запущенным.

Окружность.

Для создания окружности в наш пустой svg файл добавляем строку
Атрибутами являются координаты центра окружности (cx и cy) и ее радиус (r). При этом начало координат лежит в верхнем левом углу рабочего листа. Полностью svg файл:

Будет создана окружность точно по центру документа, радиусом в 100 пикселей. Так как никаких указаний о цвете заливки, обводки, слоях и других эффектов не было, то окружность рисуется без обводки и заливается черным цветом, что и в видим, открыв документ в inkscape. Обратите внимание, что в документе не будет и слоев.

Обозначения атрибутов cx, cy и r является стандартным. Давайте зададим обводку и заливку нашей окружности, а так же зададим толщину обводки равной 6 пикселям.

fill= «green» stroke= «yellow» stroke-width= «6» />

Выбрана заливка зеленым цветом, а обводка желтым.

Что интересно, если создать слой в этом документе, то можно увидеть, что рисунок окружности будет находится не на созданном слое, а где то там? Соответствующие атрибуты выделены красным. Если необходимо создать окружность без заливки или обводки значение соответствующего атрибута устанавливаем в none

stroke= «none»

Для изменения прозрачности заливки добавляем атрибут opacity , например opacity= «0.5» уменьшает прозрачность заливки в 2 раза, а для изменения прозрачности обводки добавляем атрибут stroke-opacity , например stroke-opacity= «0.5» уменьшает прозрачность обводки в 2 раза.

Прямоугольники, квадраты.

Задание прямоугольников выглядит так

Атрибутами прямоугольника (квадрата) rect указываем координаты верхнего левого угла, а так же ширину и высоту прямоугольника. Настройки заливки и обводки выглядят так же.

Ну и в финале окружность с квадратом

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

Продолжение следует.

Привет всем, наши дорогие фанаты свободной конвертации. Сегодня у нас на рабочем столе интереснейший проект под кодовым названием Scalable Vector Graphics или кратко SVG. Почему на иностранном языке? Чтобы никто не догадался.

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

Во-вторых, нам необходим компьютерный монитор, не важно, десктоп или смартфон. Поскольку вы читаете этот текст, стало быть – один ресурс у вас уже имеется. Остается побеспокоить кого-то из близко оказавшихся добрых людей и позаимствовать несколько тысяч рублей, на худой конец, пару сотен баксов.

Все это нам совершенно необходимо для ясного понимания – что такое SVG и с чем его лучше закусывать.

Масштабируемая векторная графика

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

Как вы могли слышать – графика бывает двух типов.

• Растровая.
• Векторная.

Для начала снимите очки и подведите свои глаза поближе к мерцающему компьютерному монитору.

Что вы видите?

Правильно – картинка составляется из миллионов разноцветных точечек. Это и есть растр . Поэтому такой тип графики и называется "растровым".

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

Одевайте свою самую модную одежку, звоните другу или подружке. Мы отправляемся в ночной клуб. Зачем? Изучать графику векторную.

Когда гости как следует разогрелись в баре и на танцполе начинаются танцы с бубнами, DJ нажимает маленькую кнопочку и небо заполняют клубы полупрозрачного глицеринового дыма.

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

Это и есть векторная графика. Лазерный луч непрерывен и рисует картины согласно заложенному в компьютерной программе алгоритму – цифровому визуальному образу.

Именно так и работает SVG – это цифровое программное описание графических образов, цветов и их поведения.

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

На экранах компьютеров непрерывные векторы преобразовываются в разноцветные пиксели матрицы и наш мозг по своему алгоритму формирует восприятие плавной картинки.

Технологическое решение SVG

Ну вот, с внешней оболочкой разобрались, теперь переходим к внутренней сущности явления. Вы можете сказать – да нафига нам вся эта наука, лучше скажи прямо – зачем он нужен, этот SVG?

Не торопитесь. Дело в том, что именно технология определяет все внешние эффекты. А теперь откроем вам страшную тайну. SVG – это родной брат языка разметки гипертекста HTML, при помощи которого верстаются сайты, красивые и динамические.

Да-да, файл графики в формате SVG представляет собой текстовый файл XML, наполненный тегами, примерно как в HTML, и данными, структурированными при помощи XML. Логически предположить, что SVG-графику можно интегрировать непосредственно в HTML-код веб-страницы, форматировать при помощи таблиц стилей CSS и даже подключать программные сценарии Javascript.

Просто запустите свое воображение (можно чашечку капучино, плиз) и попытайтесь предоставить бесконечные возможности векторной графики, генно-модифицированной тегами HTML5.

1. Во-первых, векторная графика по определению масштабируется без потерь в качестве картинки (потому что пикселей-то нет и при увеличении изображение не будет превращаться в картину художника-кубиста).
2. Во-вторых, SVG полностью совместим с веб-технологиями и поэтому становится органичной частью сайтов.
3. В-третьих, добавляя в цифровое описание картинки объекты и подключая к ним сценарии Javascript – мы делаем изображение интерактивным, то есть реагирующим на определенные действия пользователя заданными ответами.
4. В-четвертых, SVG – текстовый формат, поэтому можно оптимизировать файл под SEO без внешних мета-тегов, прямо вписывая ключевые слова в код изображения.

Исходя из этих технических спецификаций мы и выведем сферу применения SVG.

Как можно использовать SVG для пользы и выгоды

В принципах честного маркетинга следует признаться – есть у SVG и недостатки. По мере наращивания детализации изображения, вес файла начинает увеличиваться со скоростью снежной лавины.

Так что, к сожалению, SVG совершенно не годится для реалистичных фотографии высокого разрешения и подробных карт местности.

Формат SVG оптимален для небольших, зато масштабируемых и интерактивных картинок.

• Панели навигации и кнопки с анимационными эффектами.
• Логотипы, которые не теряют качества картинки при увеличении и уменьшении.
• Изображения, которые как резиновые, приспосабливаются к любому формату и разрешению компьютерного экрана. SVG незаменим для адаптивных Mobile-Friendly сайтов.

Самое полезное – SVG-графика наилучшим образом подходит для электронной коммерции.

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

На этой основе можно разработать интерактивный обзор товара со всех сторон и даже изнутри.

Либо на медицинском сайте, при помощи такой графической программы можно сделать тест на беременность. Или диагностический плагин, для желающих пройти экспресс-анализ и узнать, от чего ему предстоит умирать молодым.

После того, как клиент узнает страшную тайну о своем страшном недуге, рука сама тянется кликнуть мышью по соседнему участку SVG-картинки с красной кнопкой "Купить лекарство от всех болезней". Достаточно одной таблэтки. Price$1000.

Вот какое полезное изобретение, этот SVG.

Способы конвертации в SVG

На нашем сайте мы предлагаем вам конвертацию различными методами:

А можно как-то уменьшить размер SVG?

Да! С помощью специальных программ, например SVGO , или на нашем сайте с помощью функции оптимизации SVG .

Наш сервис построен на использовании открытых компонентов, в частности на SVGO. С помощью данного SVG оптимизатора вы можете сократить объем SVG изображений путем удаления не нужной информации, такой как:

• очистка атрибут из новый линий и повторяющихся объектов;
• удаление описание типа документа;
• удаление XML инструкций;
• удаление комментариев;
• удаление метадаты;
• и другие элементы информации.

Этот пост - первый из серии статей о SVG-графике (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.

Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года , а с 16 августа 2011 включена в рекомендации W3C . SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.

Ломаная линия

Синтаксис аналогичен предыдущему, используется тег polyline , атрибут points задает точки:

Прямоугольник

Вызывается тегом rect, можно добавить некоторые атрибуты:

Окружность

Вызывается тегом circle , в примере с помощью атрибута r задаем радиус, cx и cy задают координаты центра:

Эллипс

Вызывается тегом ellipse , работает аналогично circle , но можно задать два радиуса - rx и ry :

Многоугольник

Вызывается тегом polygon , многоугольник может иметь разное количество сторон:

Использование редакторов

Как видно из примеров, рисование базовых SVG-фигур - это очень просто, но объекты могут быть намного сложнее. Для таких нужно использовать редакторы векторной графики, например Adobe Illustrator или Inkscape, где можно сохранять файлы в SVG-формате, а потом редактировать в текстовом редакторе. Вставлять на страницу SVG можно с помощью embed, iframe и object:

Пример - изображение айпода с сайта OpenClipArt.org :

D3 наиболее полезен, когда используется для создания и манипулирования визуальными образами на основе SVG. Рисование с использованием div "ов и других HTML-элементов возможно, но немного неуклюже, и обычно появляются несоответствия отображения в различных браузерах. Использование SVG более надежно, визуально последовательно и быстрее.

Редакторы векторной графики, такие как Illustrator, могут быть использованы для создания SVG-файлов, но нам необходимо научиться создавать их с помощью кода.

Элемент SVG

Scalable Vector Graphics(масштабируемая векторная графика) - формат изображений на основе текста. Каждое SVG-изображение определено с использованием разметки кода, похожей на HTML. SVG-код может быть включен напрямую в HTML-документ. Каждый веб-браузер поддерживает SVG, исключением является только Internet Explorer версии 8 и старше . SVG основан на XML, поэтому вы можете заметить, что элементы, не имеющие закрывающего тега, должны быть самозакрывающимися. Например:

Перед тем как вы сможете что-нибудь рисовать, вам надо создать SVG-элемент. Думайте об SVG-элементе, как о холсте, на котором отрисовываются все ваши визуальные образы(В такой трактовке, SVG концептуально схож с элементом HTML - canvas). Как минимум, хорошо задать ширину и высоту с помощью атрибутов width и height , соответственно. Если вы их не зададите, SVG растянется на всю площадь блока.

Здесь SVG-элемент, созданный с использованием кода выше:

Не видите его? Нажмите правой кнопкой по пустому месту выше и выберите "Просмотр кода элемента". Ваш веб-инспектор должен показать что-то похожее:

Заметьте, что тут есть SVG-элемент, который занимает 500 пикселей по горизонтали и 50 пикселей по вертикали.

Также заметьте, что браузеры считают пиксели единицей измерения по умолчанию. Мы указали размеры как 500 и 50, а не 500px и 50px. Мы можем указать px явно, или любую другую единицу измерения, например: em , pt , in , cm , и mm.

Простые фигуры

Существует некоторый набор фигур, которые вы можете поместить внутрь элемента SVG. Этот набор включает: rect , circle , ellipse , line , text и path .

Если вы знакомы с программирование компьютерной графики, вы вспомните, что обычно координатная система на основе пикселей начинается с левого верхнего угла и имеет координаты точки (0,0). Увеличение х происходить слева направо, увеличение у -сверху вниз.

0,0 100,20 200,40

rect рисует квадрат. Квадрат задается четырьмя значениями: x , y - указывают точку верхнего левого угла; width , height - указывают ширину и высоту квадрата. Этот квадрат занимает все пространство нашего SVG:

circle рисует круг. Круг задается тремя величинами: cx , cy указывают точку, расположенную в центре описываемой окружности, r задает радиус круга. Этот круг расположен в центре нашего SVG, потому что атрибут cx ("center-x") равен 250. Пример:

ellipse задается схоже с circle , но предполагается, что радиус задается по двум осям: по х и по у . Вместо х используйте rx , вместо y - ry .

line рисует линию. Используйте x1 и y1 для задания координат начала линии, и x2 и y2 для задания координат конца. Атрибут stroke должен задавать цвет линии, иначе она будет невидимая.

text отрисовывает текст. Используйте x , чтобы указать левый край, и y , чтобы указать вертикальную позицию так называемой базовой линии.

Easy-peasy Easy-peasy

текст будет наследовать CSS-стили шрифта родительского элемента, если только вы не зададите свои стили для текста. Обратите внимание, как форматирование текста выше совпадает с текстом, описываемом в этом параграфе. Мы может переопределить стили форматирования так:

Easy-peasy Easy-peasy

Также заметьте, когда любой визуальный элемент упирается в границу SVG-элемента, он будет обрезан. Будьте осторожны, когда используете text , чтобы ваши загагулины у текста не были обрезаны. Вы можете увидеть, что случится с текстом, если выставить baseline (то есть у ) равным 50, такую же, как высота SVG:

Easy-peasy Easy-peasy

path рисует что-нибудь более сложное, чем фигуры, описанные выше(например, силуэт стран на геокартах), и будет описан отдельно. А теперь мы будем работать с простыми фигурами.

Стилизация SVG-элементов

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

• fill - заливка. Цветовое значение. Также как и в CSS цвет может быть указан несколькими способами:
  • по имени: orange;
  • значение в шестнадцатиричной системе счисления: #3388aa , #38a ;
  • значение в формате RGB: rgb(10, 150, 20) ;
  • значение в формате RGBA: rgba(10, 150, 20, 0.5) .
• stroke - рамка. Цветовое значение.
• stroke-width - ширина рамки(обычно в пикселях).
• opacity - прозрачность. Числовое значение в промежутке от 0.0(полностью прозрачно) до 1.0(полностью видимо).

С text также можно использовать следующие свойства:

• font-family
• font-size

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

Ниже некоторые CSS-свойства заданы непосредственно в элементе circle :

По-другому мы могли бы сделать так: не прописывать атрибуты стиля, а указать класс стилей(также как и обычному HTML элементу):

а потом добавить fill , stroke и stroke-width параметры в CSS-стили необходимого класса:

Pumpkin { fill: yellow; stroke: orange; stroke-width: 5; }

Второй подход имеет несколько очевидных преимуществ:

1. Можно описать класс один раз и применять его ко многим элементам.
2. CSS-код проще воспринимать, чем атрибуты внутри элементов.
3. По этим причинам второй подход более прост в обслуживании, а также он быстрее применим.

Использование CSS для применения стилей к SVG, однако, может кого-то привести в замешательство. fill , stroke , stroke-width все-таки не CSS-свойства(ближайшие CSS-эквиваленты это background-color и border ). Чтобы помочь вам запомнить, какие правила в таблице стилей указаны для SVG-элементов, желательно включать svg в CSS-селектор:

Svg .pumpkin { /* ... */ }

Наложение и порядок их рисования

В SVG нет как таковых слоев и никакого понятия глубины. SVG не поддерживает CSS-свойство z-index , таким образом фигуры могут быть упорядочены в рамках двухмерного пространства.

И еще, если нарисовать несколько фигур, то они перекрываются:

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

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

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

Прозрачность

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

Существует два способа применить прозрачность: использовать RGB-цвет с альфа-каналом или установить свойству opacity числовое значение.

Вы можете использовать rgba() везде, где надо указать цвет, например в атрибутах fill и stroke . rgba() ожидает, что вы передадите ему 3 значения в промежутке от 0 до 255 для красного, зеленого и синего, плюс альфа-канал(прозрачность) в диапазоне от 0.0 до 1.0.

Заметьте, что с методом rgba() , прозрачность применяется к fill и stroke атрибутам независимо. Заливка следующих кругов на 75% прозрачна, а их рамка - на 25%:

Для применения прозрачности ко всему элементу, необходимо установить атрибут opacity . Ниже полностью видимые круги:

а это те же круги с различной прозрачностью:

Вы также можете использовать атрибут opacity у элемента, цвета которого заданы в формате rgba() . Когда вы это делаете - прозрачность умножается. Ниже круги используют те же значения цвета RGBA для fill и stroke . У первого элемента не установлен атрибут opacity , а у двух других установлен:

Обратите внимание, что у третьего круга opacity равно 0.2 или 20%. Тем не менее его фиолетовая часть имеет прозрачность в 75%. Таким образом, фиолетовая часть в конечном итоге прозрачна на 0.2*0.75 = 0.15 или 15%.