Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
SVG-фигуры – базовые элементы и примеры кода
Contents
[
Hide
Show
]Простые векторные фигуры – строительные блоки логотипов, диаграмм, иконок, графиков и многих других SVG-изображений. В SVG-файле каждая базовая фигура представлена отдельным элементом, а его атрибуты задают положение, размер и визуальный стиль. Можно настроить цвет заливки, прозрачность, скругление углов, толщину обводки и другие свойства.
В этой статье вы узнаете, как:
- создавать SVG-прямоугольники, круги, эллипсы, линии, polyline и polygon;
- читать координатные атрибуты, которые использует каждая базовая фигура;
- применять
fill,stroke, opacity и скругленные углы; - объединять несколько SVG-элементов фигур в одном изображении.
SVG <rect> – прямоугольник
Элемент <rect> создает прямоугольники и прямоугольники со скругленными углами. Прямоугольник позиционируется по левому верхнему углу, а его размер задается атрибутами width и height.
Атрибуты прямоугольника
| Атрибут | Описание | Значение по умолчанию |
|---|---|---|
x | X-координата левого верхнего угла | 0 |
y | Y-координата левого верхнего угла | 0 |
width | Ширина прямоугольника | – |
height | Высота прямоугольника | – |
rx | Горизонтальный радиус скругленных углов | 0 |
ry | Вертикальный радиус скругленных углов | 0 |
Прямоугольник можно стилизовать через presentation attributes или через атрибут style. Пример ниже использует fill, stroke, opacity и радиусы скругления, чтобы показать, как геометрия и painting работают вместе.
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
3</svg>Первый пример создает прямоугольник, левый верхний угол которого находится в точке (60, 100). Его ширина равна 70 единицам, высота – 40 единицам; углы скруглены, а контур окрашен в оранжевый цвет. Второй пример убирает скругление и использует более крупный квадратный прямоугольник, поэтому разницу между rx/ry и обычными острыми углами легче увидеть.
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <rect x="120" y="140" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
3</svg>
Использованные свойства стиля
fill– цвет заливки прямоугольника;fill-opacity– прозрачность заливки, где0означает полную прозрачность, а1– непрозрачность;stroke– цвет контура;stroke-width– толщина контура;stroke-opacity– прозрачность контура.
Цвета можно задавать несколькими способами:
- Именованный цвет, например
fill:blue. - RGB-функция, например
fill:rgb(0,0,255). - HEX-запись, например
fill:#0000ff.
SVG <circle> – круг
Элемент <circle> рисует правильный круг. Его положение задается координатами центра cx и cy, а размер – радиусом r.
Атрибуты круга
| Атрибут | Описание | Значение по умолчанию |
|---|---|---|
cx | X-координата центра круга | 0 |
cy | Y-координата центра круга | 0 |
r | Радиус круга | – |
1<svg width="300" height="550" xmlns="http://www.w3.org/2000/svg">
2 <circle cx="250" cy="100" r="60" style="fill:red; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7" />
3</svg>Код ниже задает cx и cy для центра круга и r для радиуса. Поскольку круг окрашен и через fill, и через stroke, результат также показывает, как геометрия фигуры сочетается со свойствами painting.
Круг выходит за пределы viewport шириной 300 px; для полного отображения нужна ширина не меньше 310 px, то есть cx + r.
SVG <ellipse> – эллипс
Элемент <ellipse> создает овальную фигуру. Он также использует центральную точку, но имеет два радиуса: rx для горизонтального размера и ry для вертикального размера.
Атрибуты эллипса
| Атрибут | Описание | Значение по умолчанию |
|---|---|---|
cx | X-координата центра эллипса | 0 |
cy | Y-координата центра эллипса | 0 |
rx | Горизонтальный радиус, половина ширины | – |
ry | Вертикальный радиус, половина высоты | – |
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
3 <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
4</svg>Пример рисует два эллипса с разными радиусами и прозрачностью. Второй эллипс, серый и с прозрачностью 50 %, отображается поверх первого, потому что SVG рисует элементы в порядке их появления в исходном коде: более поздние элементы оказываются выше более ранних.
SVG <line> – линия
Элемент <line> рисует прямой сегмент между двумя координатными точками. У него нет области заливки, поэтому видимым линиям обычно нужны stroke и stroke-width.
Атрибуты линии
| Атрибут | Описание | Значение по умолчанию |
|---|---|---|
x1 | X-координата начальной точки | – |
y1 | Y-координата начальной точки | – |
x2 | X-координата конечной точки | – |
y2 | Y-координата конечной точки | – |
style (stroke, stroke-width) | Визуальный стиль линии | – |
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
3 <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
4 <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
5</svg>
Каждая линия в примере имеет свою начальную точку, конечную точку, цвет и толщину. Свойство stroke задает цвет линии, а stroke-width – ее толщину.
SVG <polyline> – ломаная линия
Элемент <polyline> рисует серию соединенных прямых сегментов. Он часто используется для ломаных линий, линий графиков, простых контуров и открытых угловатых фигур.
Атрибуты polyline
| Атрибут | Описание | Значение по умолчанию |
|---|---|---|
points | Список пар координат x,y, задающих вершины polyline | – |
style (fill, stroke, stroke-width) | Визуальный стиль фигуры | – |
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
3 <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
4</svg>
Первая polyline использует три точки и визуально образует треугольную фигуру. Вторая polyline – открытая зигзагообразная линия с fill="none"; это обычно самый понятный вариант, когда polyline должна вести себя как линия, а не как заполненная фигура.
Подробнее о стилизации SVG смотрите в статье Заливка и обводка в SVG.
SVG <polygon> – многоугольник
Элемент <polygon> задает замкнутую фигуру из последовательности соединенных точек. SVG автоматически соединяет последнюю точку с первой.
Атрибуты polygon
| Атрибут | Описание | Значение по умолчанию |
|---|---|---|
points | Список пар координат x,y для каждой вершины, минимум три точки | – |
style (fill, stroke, stroke-width) | Визуальный стиль polygon | – |
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <polygon points="160,10 350,140 210,350 50,199" style="fill:orange;stroke:purple;stroke-width:1" />
3</svg>В примере polygon использует четыре пары координат в атрибуте points. Поскольку <polygon> всегда замкнут, фиолетовая обводка автоматически возвращается от последней точки к первой.
Как создавать SVG-фигуры
- Создайте внешний элемент
<svg>с атрибутамиwidth,heightиxmlns. - Выберите базовый элемент фигуры:
<rect>,<circle>,<ellipse>,<line>,<polyline>или<polygon>. - Задайте обязательные координатные атрибуты и размеры для выбранного элемента.
- Добавьте визуальные атрибуты, например
fill,stroke,stroke-widthили opacity. - Просмотрите SVG и скорректируйте координаты, размер или viewport, если фигура обрезается.
Базовые SVG-фигуры – общий пример
Минимальный SVG-документ может объединять все базовые фигуры в одной иллюстрации. Это удобно, когда нужно создавать диаграммы, бейджи, иконки или сгенерированную графику из простых примитивов.
1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2 <line x1="30" y1="30" x2="350" y2="290" style="stroke:rgb(255,0,0); stroke-width:3" />
3 <line x1="30" y1="50" x2="300" y2="350" style="stroke:grey; stroke-width:5" />
4 <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
5 <polygon points="160,10 350,140 210,350 50,199" style="fill:orange; stroke:purple; stroke-width:1; fill-opacity:1" />
6 <rect x="120" y="150" width="90" height="90" style="fill:grey; stroke-width:3; stroke:rgb(0,0,0)" />
7 <circle cx="250" cy="100" r="60" style="fill:red; stroke:black; stroke-width:3; fill-opacity:0.7" />
8 <ellipse cx="140" cy="310" rx="90" ry="20" style="fill:OrangeRed" />
9 <ellipse cx="120" cy="280" rx="110" ry="20" style="fill:grey; fill-opacity:0.5" />
10 <polyline points="220,200 240,180 260,200 280,180 300,200 320,180 340,200" style="fill:none; stroke:red; stroke-width:6" />
11 <line x1="20" y1="80" x2="100" y2="200" style="stroke:orangered; stroke-width:8" />
12 <polyline points="280,290 300,220 320,290" style="fill:grey; stroke:grey; stroke-width:2; fill-opacity:0.5" />
13</svg>
Иллюстрация «SVG Basic Shapes» содержит все фигуры, описанные выше: линии, прямоугольники, круг, эллипсы, polyline и polygon. Рядом показана известная картина Василия Кандинского «Розовый акцент», где простые геометрические формы превращаются в более выразительную композицию.
Типичные ошибки SVG-фигур и исправления
| Проблема | Вероятная причина | Как исправить |
|---|---|---|
| Фигура не видна | SVG viewport меньше фигуры | Увеличьте width / height или настройте viewBox |
| Фигура обрезается | Координаты выходят за границы viewport | Пересчитайте координаты или расширьте SVG-холст |
| Цвет заливки не отображается | Задано fill="none" или fill-opacity="0" | Укажите корректное значение fill и opacity |
| Обводка невидима | Задано stroke-width="0" или отсутствует stroke | Задайте и stroke, и положительный stroke-width |
| Скругленные углы не работают | Значения rx / ry отсутствуют или равны нулю | Укажите ненулевые атрибуты rx и ry |
| Элементы неожиданно перекрываются | SVG рисует элементы в порядке исходного кода | Измените порядок элементов в разметке или используйте группировку |
Быстрые рецепты цвета для SVG-фигур
| Задача | Пример |
|---|---|
| Сплошная заливка | fill="blue" |
| Полупрозрачная заливка | fill="red" fill-opacity="0.5" |
| Прозрачная заливка с видимым контуром | fill="none" stroke="black" |
| Полупрозрачная обводка | stroke="black" stroke-opacity="0.4" |
| Толстый цветной контур | stroke="orange" stroke-width="6" |
| Пунктирный контур | stroke-dasharray="5,3" |
О продвинутых приемах стилизации SVG читайте в статье Заливка и обводка в SVG.
FAQ – SVG-фигуры
Как выбрать правильный SVG-элемент фигуры?
Используйте <rect> для прямоугольников, <circle> для круглых фигур с одинаковым радиусом, <ellipse> для овалов, <line> для одного прямого сегмента, <polyline> для открытой цепочки сегментов и <polygon> для замкнутой фигуры из точек.
Чем отличаются polyline и polygon?
<polyline> рисует соединенные точки, но остается открытой, если вручную не повторить первую точку. <polygon> закрывает фигуру автоматически, соединяя последнюю точку с первой.
Можно ли использовать fill и stroke вместе?
Да. Большинство SVG-фигур могут использовать и fill, и stroke. fill окрашивает внутреннюю область фигуры, а stroke и stroke-width рисуют контур.
Могут ли базовые SVG-фигуры заменить path data?
Да, если графика представляет собой простой прямоугольник, круг, эллипс, прямую линию, polyline или polygon. Используйте SVG Path Data, когда нужны кривые, дуги, пользовательские контуры или один сложный контур.
Спецификация и связанные ресурсы
- Раздел спецификации SVG о
basic shapes определяет
<rect>,<circle>,<ellipse>,<line>,<polyline>и<polygon>. - Используйте Системы координат и единицы измерения SVG, чтобы понять, как координаты x/y, центральные точки, радиусы и размер viewport влияют на размещение фигур.
- Откройте
Заливка и обводка в SVG для
stroke-width, line caps, line joins, opacity и dash patterns. - Перейдите к статье
Цвет SVG для форматов цвета, opacity,
fillиstroke. - Продолжите статьей SVG Path Data, когда базовые фигуры недостаточно гибкие и нужны пользовательские контуры или кривые.
- Используйте Редактирование SVG-файла для .NET API-примеров, которые создают, добавляют и редактируют SVG-элементы.
- Перейдите к Рисованию SVG-фигур в Python для Python via .NET-примеров, которые создают прямоугольники, круги, эллипсы, линии, polyline и polygon.