Основные фигуры в SVG
1. Прямоугольник (<rect>)
Прямоугольник определяется четырьмя атрибутами:
x, y, width и height:
<rect x="10" y="10" width="100" height="100" fill="blue"/>2. Окружность (<circle>)
Окружность определяется тремя атрибутами:
cx, cy и r:
<circle cx="50" cy="50" r="40" fill="green"/>3. Линия (<line>)
Линия определяется четырьмя атрибутами:
x1, y1, x2 и y2:
<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2"/>4. Многоугольник (<polygon>)
Многоугольник определяется атрибутом points, который содержит координаты вершин:
<polygon points="10,10 50,10 50,50 10,50" fill="yellow"/>Создание сложных изображений
1. Путь (<path>)
Путь позволяет создавать сложные фигуры с помощью набора команд:
<path d="M10 10 L90 90 Z" stroke="red" stroke-width="2" fill="none"/>2. Группа (<g>)
Группа позволяет объединять элементы и применять к ним общие атрибуты:
<g fill="purple">
<circle cx="50" cy="50" r="40"/>
<rect x="10" y="10" width="80" height="80"/>
</g>3. Маски и фильтры
Маски и фильтры позволяют создавать сложные визуальные эффекты:
<defs>
<mask id="mask">
<circle cx="50" cy="50" r="40" fill="white"/>
</mask>
</defs>
<rect x="10" y="10" width="80" height="80" mask="url(#mask)" fill="orange"/>Заключение
SVG — это мощный инструмент для создания векторной графики, который позволяет создавать как простые, так и сложные изображения. Используйте его, чтобы создавать высококачественные и масштабируемые изображения для вашего проекта.
