Softonic

Генератор формы SVG

Шаг 1 / 2

Большинству систем проектирования требуется лишь небольшой набор геометрических форм: круг для аватара, квадрат, для индикатора статуса, треугольник, для иконки игры, звезда, для оценки и шестиугольник, для значка. Данный генератор выводит все семь стандартных форм (круг, квадрат, треугольник, звезда, шестиугольник, пятиугольник, сердце) с идеально согласованной геометрией: точки звезды расположены на правильном внутреннем радиусе, шестиугольники и пятиугольники ориентированы вершиной вверх, а сердце центрировано на полотне; результат, файл <svg>, готовый к наклеиванию.

Как создать фигуру

  1. 1

    Выберите форму

    Круг, квадрат, треугольник, звезда, пятиугольник, шестиугольник или сердце.

  2. 2

    Размер шрифта и толщина штриха

    Размер канваса в пикселях. Ширина штриха определяет толщину контура; значение 0 отключает контур.

  3. 3

    Выберите цвет заполнения и штриха

    Любая цветовая гексаграмма. Для полых форм установите цвет заполнения на `none`.

  4. 4

    Для звёзд задайте точки

    Звёздный примитив принимает от 3 до 12 точек: пять, классический вариант, а семь создаёт эффект шерифского значка.

  5. 5

    Копируйте SVG

    Метод Markup использует соответствующую примитиву SVG (`<circle>`, `<rect>`, `<polygon>`, `<path>`) для достижения минимального количества байтов.

Геометрия формы на первый взгляд

Форма Примитив SVG Важные параметры
Круг <circle> радиус, цвет заполнения, толщина линии
Квадрат <rect> ширина, высота, шаг штриха (параметр rx отсутствует)
△ <polygon> (3 точки) равносторонний треугольник, направленный вверх
* Звезда <polygon> (N × 2) точки (3–12); отношение внутреннего к внешнему радиусу
Пентагон <polygon> (5 баллов) ориентирован вверх
Шестиугольник <polygon> (6 точек) ориентирован вверх (для плоского варианта, поворот на 30°)
Сердце <path> с использованием метода Безье центрировано на полотне, симметрично

Пример результата: пятизвёздка

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

Внутренний радиус установлен равным 40 % от внешнего радиуса; это соответствует классическим пропорциям, используемым при создании звёзд флагов и трофейных наград.

Сценарии использования

– Аватары и маски: используйте круг в качестве пути для клипа при создании профильных фотографий. – Чипы статуса – квадратные элементы (округлённые с помощью параметра border-radius в CSS или более поздних версий библиотеки rx) в качестве простого индикатора состояния. – Интерфейсы оценки: звёзды с полным заполнением, наполовину заполненные и выделенные контуром по шкале от 0 до 5. – Поясницы и гербовые знаки, шестиугольник с внутренним текстом или иконой. – Кнопки симпатии: сердечко для лайков, списков желаний и сохранений.

Почему примитивы SVG используются по общему пути

Используйте <circle> или <polygon> вместо соответствующего <path>:

– занимает меньше памяти в байтах для простых форм (10–30 байтов). – Легче создавать анимацию, такие атрибуты, как r, cx, cy и points, можно напрямую применять в качестве твинов с использованием CSS или GSAP. – Более чётко отображается в инспекторах и полях сравнения (Diff).

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

Доступность

Все сгенерированные SVG-файлы по умолчанию имеют декоративный характер. Если форма имеет определённое значение (красный круг, ошибка, зелёная отметка, успех), оберните её в родительский элемент с кодами role="img" и aria-label или добавьте внутри SVG элемент с кодом <title>.

Часто задаваемые вопросы

Внутренний радиус определяет «толщину» каждого рукоятки. Для сбалансированного вида в этом генераторе значение внутреннего радиуса составляет 40 % от значения внешнего. Чтобы получить более чёткую звезду, уменьшите это соотношение в выходном файле формата SVG (например, до 25 %); для более округлой, напоминающей кубики из Lego звезды увеличьте его до 60 %.

Этот генератор выдаёт стандартный объект <rect>. Для округления углов добавьте rx="8" ry="8" в прямоугольник или используйте свойство CSS border-radius при обёртывании SVG-файла.

Да, оберните файл SVG в родительский элемент с кодом transform: rotate(30deg) или измените траекторию движения: сдвиньте начальный угол на 30°. По умолчанию генератор использует ориентацию «вертикально вверх», поскольку это соответствует большинству дизайнов значков.

Да. SVG использует корректные значения границ области (viewbox), координаты в единицах целых пикселей и минимизированный формат маркировки. Его можно без изменений использовать в React, Vue, Astro, электронной почте или простом HTML.

Нет. Параметры формы используются для отображения SVG-файла по текущему запросу и затем удаляются.

Сопутствующие инструменты

Сжать GIF

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

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Конструктор флагов

Создайте в браузере простой собственный флаг 3:2 с шестью компоновками, цветами, текстом и символом. Скачайте SVG или PNG либо откройте диалог печати браузера.

Инструмент доступен на других языках