Boxy SVG

Boxy SVG Editor — векторный редактор, построенный вокруг формата SVG. Программа ориентирована не на растровую ретушь и не на многостраничную полиграфическую верстку, а на создание и редактирование масштабируемой веб-графики: иконок, логотипов, интерфейсных элементов, схем, SVG-иллюстраций, простых декоративных объектов и графики, которую затем встраивают в сайт или приложение.

Главная особенность Boxy SVG — совмещение визуального редактора и работы с внутренней структурой SVG-документа. Пользователь видит объект на холсте, меняет его форму, цвет, размер, положение, обводку и трансформации, а рядом может контролировать SVG-разметку, CSS-свойства, идентификаторы, классы и метаданные. Поэтому редактор интересен не только дизайнерам, но и фронтенд-разработчикам, которым важно, чтобы файл не был просто картинкой, а оставался понятным, редактируемым и пригодным для встраивания в HTML/CSS.

В отличие от универсальных графических пакетов, Boxy SVG не пытается закрыть все задачи дизайна. В нем нет тяжеловесной экосистемы для сложной печати, многостраничной верстки, профессиональной цветоделительной подготовки или масштабного бренд-дизайна. Сильная сторона программы — точечная работа с SVG: нарисовать иконку, поправить path, изменить заливку, подготовить SVG sprite, экспортировать изображение в PNG или PDF, проверить структуру Elements panel, привести файл к аккуратному виду перед передачей в разработку.

Boxy SVG выпускается как Web App, Web Component, macOS App, Linux App, iOS App и Android App. Такой набор вариантов делает редактор удобным для разных рабочих сценариев: в браузере — для быстрой правки и доступа с разных устройств, на macOS или Linux — для локальной работы, на планшете — для сенсорной правки и набросков, в составе Web Component — для встраивания SVG-редактора в сайт или веб-приложение.

Основные характеристики Boxy SVG

Boxy SVG удобен там, где SVG является не побочным форматом экспорта, а основной рабочей единицей. В Illustrator, Affinity Designer или CorelDRAW SVG часто выступает одним из вариантов передачи результата. В Boxy SVG логика другая: документ изначально строится вокруг SVG-структуры, поэтому элементы интерфейса, панель разметки, инспектор стилей и экспорт подчинены задачам веб-графики.

В рабочем процессе это особенно заметно при правке готового файла. Пользователь выбирает объект на холсте, меняет его заливку в Fill, настраивает обводку в Stroke, корректирует размеры через Geometry, проверяет DOM-подобную структуру в Elements и сохраняет файл так, чтобы он оставался SVG, а не превращался в плоскую картинку. Для дизайнера это дает визуальный контроль, для разработчика — контроль над кодом.

Для каких задач подходит Boxy SVG

Иконки и элементы интерфейса

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

Для иконок особенно полезны:

• точная настройка viewBox;

• редактирование координат и размеров через Geometry;

• сохранение в SVG и SVGZ;

• экспорт PNG для предпросмотра;

• проверка структуры в Elements;

• управление fill, stroke, opacity и presentation attributes;

• операции unite, subtract, intersect и exclude для построения формы из простых фигур.

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

Логотипы, схемы и веб-иллюстрации

Boxy SVG подходит для логотипов простой и средней сложности: текстовые знаки, геометрические эмблемы, монохромные пиктограммы, плоские SVG-иллюстрации, наборы значков, схемы и элементы для веб-страниц. В программе удобно собирать объект из базовых фигур, объединять и вычитать формы через Shape, настраивать градиент в Fill, менять порядок элементов через Object и контролировать расположение с помощью направляющих.

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

Работа разработчика с SVG-кодом

Boxy SVG полезен фронтенд-разработчику, который получает SVG от дизайнера и должен привести файл в состояние, пригодное для проекта. В Elements panel видна структура документа: корневой

На скриншоте видно типичный рабочий сценарий: на холсте выделен объект, слева доступны инструменты выбора, форм, текста и контуров, справа открыта панель Fill. Пользователь меняет тип заливки, выбирает градиент, регулирует цвет стопа, задает значение в HEX и переключает spread-режимы Pad, Repeat и Reflect. Такой подход удобен при создании иконок и простых иллюстраций: большая часть действий выполняется на холсте и в ближайших панелях, без длинной цепочки диалоговых окон.

Главное окно

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

Слева находится вертикальная панель инструментов. В ней используются инструменты для выбора, перемещения холста, работы с кривыми, рисования фигур, добавления текста, масштабирования и других базовых действий. При работе с векторной иконкой пользователь чаще всего переключается между Select, Path, Rectangle, Ellipse, Text и Zoom. При редактировании сложного path важны узлы и ручки кривых, а при верстке набора значков — выравнивание и привязка.

Справа расположены панели свойств. В зависимости от выбранного объекта открываются Fill, Stroke, Geometry, Typography, Shape и другие разделы. Такая организация помогает не смешивать все настройки в одну область: цвет и градиент задаются в Fill, толщина и тип линии — в Stroke, размеры и координаты — в Geometry, параметры текста — в Typography, булевы операции и команды путей — в Shape.

Нижняя часть интерфейса связана с внутренней структурой документа. Вкладка Elements показывает SVG-разметку и отдельные элементы, вкладка Animations используется для работы с анимационной частью. Для редактирования SVG это важный блок: визуальный объект можно сопоставить с его тегом и атрибутами.

Elements panel

Elements panel — одна из причин, по которой Boxy SVG удобно использовать именно как программу для редактирования SVG, а не просто как рисовалку. В этой панели пользователь видит документ как набор элементов. Если на холсте выделен прямоугольник, path или группа, соответствующая строка подсвечивается в структуре. Это помогает понять, из чего состоит файл, какие элементы вложены друг в друга, где находится лишняя группа и какие атрибуты применены к объекту.

При подготовке SVG для сайта Elements panel позволяет решить несколько практических задач:

• найти объект, который трудно выбрать на холсте из-за перекрытия;

• проверить, не осталось ли невидимых элементов;

• переименовать или проконтролировать ID;

• увидеть, где расположены группы;

• отличить path от rect, ellipse или text;

• проверить, какие объекты можно объединить или удалить;

• оценить, насколько сложной стала структура после импорта файла из другого редактора.

Для разработчика это особенно полезно: файл SVG — это не закрытый бинарный документ, а XML-разметка. Boxy SVG оставляет этот слой доступным без необходимости постоянно переключаться в отдельный текстовый редактор.

Geometry panel

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

Через Geometry удобно задавать точные значения, когда объект должен вписываться в систему: например, значок 24×24 px, логотип с фиксированным viewBox, пиктограмма для дизайн-системы или SVG-элемент, который будет масштабироваться в CSS. Ручное растягивание мышью подходит для набросков, но для финального файла лучше контролировать числа.

Fill и Stroke

Fill управляет внутренней заливкой объекта. В Boxy SVG доступны варианты без заливки, сплошной цвет, градиент, паттерн и другие типы paint-настроек. В панели Fill пользователь выбирает цвет, редактирует градиент, меняет стопы и регулирует прозрачность. На холсте при этом видны ручки градиента, поэтому направление и масштаб перехода можно настроить визуально.

Stroke отвечает за обводку. Здесь задаются цвет линии, прозрачность, ширина, тип окончания линии, соединения углов, miter limit и dash-настройки. Для иконок и схем это критично: одинаковая толщина обводки, правильные соединения углов и управляемая непрозрачность делают набор графики визуально единым.

На этом примере справа открыта панель Stroke. В ней видны настройки opacity, width, line cap, line join, miter limit и dash. Такой набор нужен не только для декоративных линий. Он используется при создании контурных иконок, стрелок, схем, технических пиктограмм и интерфейсных элементов, где форма задается не заливкой, а линией.

Typography panel

Typography используется при работе с текстом. В ней задаются семейство шрифта, начертание, размер, декорации, трансформации и другие параметры. Boxy SVG интегрируется с Google Fonts, поэтому редактор подходит для SVG-логотипов, текстовых эмблем, простых подписей на схемах и декоративной типографики.

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

Инструменты рисования и редактирования

Базовые фигуры

В Boxy SVG доступны инструменты для создания прямоугольников, эллипсов, линий, многоугольников, звезд и других простых объектов. Базовая фигура в SVG остается редактируемой: прямоугольник не обязан сразу превращаться в path, эллипс можно масштабировать, а звезду — использовать как основу для декоративной пиктограммы.

Работа с фигурами обычно строится так:

1. пользователь выбирает инструмент на левой панели;

2. рисует объект на холсте;

3. задает размер и положение через Geometry;

   

4. настраивает Fill и Stroke;

5. при необходимости применяет операции Shape;

6. проверяет структуру в Elements.

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

Контуры и кривые

Редактор SVG без работы с path был бы неполным. В Boxy SVG есть инструменты для рисования и редактирования контуров, включая кривые Безье. Пользователь управляет узлами, ручками, направлением сегментов и формой линии. Это нужно для органических форм, логотипов, силуэтов, нестандартных иконок и ручной правки импортированного SVG.

В разделе Shape доступны операции с путями:

• unite — объединение форм;

• intersect — пересечение;

• subtract — вычитание;

• exclude — исключение;

• close — закрытие открытого контура;

• reverse — смена направления пути.

Эти команды позволяют строить сложную геометрию из простых объектов. Для иконки это практичнее, чем вручную рисовать каждый контур. Например, отверстие в фигуре создается через вычитание, сложная эмблема — через объединение, а пересечение используется, когда нужно оставить только общую область нескольких объектов.

Узлы, ручки и точная форма

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

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

• визуальный режим — объект правится на холсте, результат виден сразу;

• структурный режим — объект контролируется через Elements и свойства.

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

Направляющие, сетка и выравнивание

Manual guides, smart guides и grid помогают размещать объекты точно. Для набора иконок это критично: если один значок смещен на полпикселя, имеет другой viewBox или не совпадает по базовой линии, в интерфейсе набор выглядит неровно.

В Boxy SVG направляющие полезны в нескольких сценариях:

• выравнивание нескольких иконок в одном документе;

• сборка пиктограммы из геометрических частей;

• создание схемы с одинаковыми расстояниями;

  

• подготовка логотипа с симметричными элементами;

• контроль объекта внутри viewBox;

• проверка отступов перед экспортом.

Операции align, rotate, flip, order и group помогают быстро привести макет в порядок. Объекты можно выровнять относительно друг друга, повернуть, отразить, отправить вперед или назад, объединить в группу и затем управлять всей группой как одним элементом.

Работа с заливкой, обводкой, градиентами и маркерами

Заливка

Заливка в Boxy SVG применяется к фигурам, path-объектам и тексту. Для простых иконок обычно достаточно сплошного цвета. Для иллюстраций используются градиенты и паттерны. В Fill пользователь выбирает тип paint, задает цвет, редактирует стопы градиента и контролирует прозрачность.

Важно учитывать, что SVG-графика часто используется в интерфейсе, где цвета меняются через CSS. Поэтому не всегда нужно жестко зашивать цвет внутрь каждого path. Если значок должен менять цвет при hover, в темной теме или внутри компонента, лучше заранее продумать структуру и классы.

Обводка

Обводка используется для контурных иконок, схем, линий, стрелок и технических элементов. В Stroke важно контролировать:

• width — толщину линии;

• cap — форму конца линии;

• join — соединение углов;

• miter limit — поведение острых углов;

• dash — пунктир;

• opacity — прозрачность.

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

Градиенты

Градиент в SVG задается как отдельная paint-структура. В Boxy SVG градиенты редактируются через панель Fill и ручки на холсте. Это удобно при создании иллюстраций, декоративных кнопок, эмблем и простых объемных объектов.

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

Context fill и Context stroke

В современных SVG-сценариях маркеры, стрелки и связанные элементы должны наследовать цвет основной линии или заливки. Для этого используются context fill и context stroke. В Boxy SVG такие типы paint применяются в работе с маркерами и помогают создавать стрелки, схемы и линии, где вспомогательный элемент автоматически согласован с основным объектом.

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

Работа с текстом и шрифтами

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

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

Есть два рабочих подхода:

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

Импорт, сохранение и экспорт

SVG и SVGZ

SVG — основной формат Boxy SVG. Файл остается векторным, масштабируется без потери качества и может быть открыт в браузере или другом редакторе. SVGZ — сжатый вариант SVG, который уменьшает размер файла за счет zlib-сжатия. Для хранения и передачи большого количества графики SVGZ может быть удобнее, но для ручной правки, просмотра в текстовом редакторе и контроля в системе разработки чаще используют обычный SVG.

Перед сохранением SVG стоит проверить:

• корректность viewBox;

• отсутствие лишних невидимых объектов;

• структуру групп;

• сохранение нужных ID и class;

• отображение текста;

• поведение заливок и обводок;

• работу градиентов;

• размер файла;

• отображение в браузере.

Boxy SVG помогает выполнить эту проверку внутри одного редактора: визуальный холст показывает внешний вид, Elements — структуру, Geometry — размеры и viewBox, Fill/Stroke — оформление.

Экспорт в PNG, JPG и WebP

Экспорт в растровые форматы нужен для предпросмотра, публикации в местах без SVG, отправки картинки в мессенджер, подготовки миниатюры или вставки в документ. PNG подходит для прозрачного фона и четкой графики, JPG — для изображений без прозрачности, WebP — для веб-публикации с хорошим соотношением качества и размера.

Важно не путать экспорт и сохранение. Если пользователь экспортирует SVG-иконку в PNG, результат становится растровым изображением. Его уже нельзя масштабировать без потери качества и редактировать как набор path-объектов. Поэтому для дальнейшей работы нужно сохранять SVG, а PNG использовать как вспомогательный формат.

Экспорт в PDF и HTML5

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

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

Импорт и совместимость

Boxy SVG работает с SVG-файлами, а также поддерживает импорт и работу с рядом графических форматов. При открытии SVG, созданного в других редакторах, нужно учитывать различия в служебных атрибутах. Файлы из Inkscape и Illustrator могут содержать элементы и свойства, которые нужны исходной программе, но не относятся к стандартному SVG-отображению в браузере.

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

Пошаговая инструкция: как создать простую SVG-иконку в Boxy SVG

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

Шаг 1. Создать документ и настроить холст

Работа начинается с нового SVG-документа. Для иконки удобны квадратные размеры: 16×16, 24×24, 32×32, 48×48 или 64×64. В Geometry нужно проверить viewBox: именно он определяет внутреннюю систему координат SVG. Если иконка должна использоваться в интерфейсе, лучше сразу выбрать размер, соответствующий дизайн-системе.

Для значка 24×24 px рабочая логика такая:

• viewBox: 0 0 24 24;

  

• объект располагается внутри границ;

• отступы одинаковые;

• stroke не выходит за пределы области;

• центр объекта совпадает с визуальным центром холста.

Шаг 2. Добавить базовые формы

Для простой иконки не нужно сразу рисовать сложный path. Лучше собрать основу из Rectangle, Ellipse, Line и других базовых фигур. Например, значок папки можно сделать из двух прямоугольников, значок пользователя — из круга и округлой формы, значок поиска — из окружности и наклонной линии.

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

Шаг 3. Настроить Fill и Stroke

Дальше объект получает цвет. В Fill выбирается заливка, в Stroke — линия. Для плоских иконок часто используется один цвет fill без обводки. Для контурных значков наоборот: fill отключается, а stroke получает фиксированную толщину.

Для набора иконок важно заранее определить стиль:

Если значок должен перекрашиваться через CSS, цвет лучше не превращать в сложную статичную схему. Нужно сохранить структуру, которую разработчик сможет стилизовать.

Шаг 4. Объединить или вычесть формы

Когда иконка состоит из нескольких геометрических частей, используются операции Shape. Например, чтобы сделать отверстие в круге, один объект размещается поверх другого, затем применяется subtract. Чтобы собрать сложный силуэт из нескольких фигур, используется unite. Для пересечения форм применяется intersect.

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

Шаг 5. Проверить узлы и структуру

На этом этапе нужно перейти от визуальной оценки к технической проверке. В Elements panel проверяются:

• корневой .

  Для Linux-пользователя важны два сценария. Первый — быстрая правка SVG без запуска большого редактора. Второй — работа с веб-графикой, где нужен контроль над структурой файла, а не только визуальное рисование.

  iOS App и Android App

  Мобильные версии Boxy SVG расширяют сценарии работы на планшетах и смартфонах. В мобильном интерфейсе важны сенсорный ввод, работа с компактными панелями и управление холстом жестами.

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

  Системные требования

  Boxy SVG существует в нескольких вариантах, поэтому системные требования зависят от выбранной платформы.

  Вариант	Требования и особенности
  Web App	современный браузер и доступ к интернету; для файловых операций важна поддержка современных браузерных API
  Web Component	современные браузеры, поддержка custom elements, возможность интеграции в веб-приложение
  macOS App	macOS 12.0.0 или новее
  Linux App	Linux-система с поддержкой Flatpak; архитектуры x86_64 и aarch64
  iOS/iPadOS App	устройство Apple с поддерживаемой версией iOS или iPadOS
  Android App	Android-устройство с поддержкой приложения

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

  Для комфортной работы с Boxy SVG важны:

  • достаточный размер экрана;

  • точное устройство ввода: мышь, трекпад, стилус;

  • стабильный браузер для Web App;

  • аппаратные ресурсы для сложных SVG;

    

  • аккуратная структура файла;

  • разумное количество узлов и групп.

  Тарифы, лицензирование и варианты доступа

  Boxy SVG использует разные модели доступа для разных вариантов продукта. Web App работает по подписке: после пробного периода применяется годовая оплата. macOS App используется как отдельное приложение для Mac. Android App поддерживает покупки внутри приложения. Web Component предлагается по подписочной модели, без бессрочной лицензии с единовременным платежом.

  Для пользователя важно различать не только цену, но и тип доступа:

  Вариант	Для кого подходит
  Web App	быстрые правки, работа на разных устройствах, Chromebook, учебные задачи
  macOS App	регулярная локальная работа на Mac
  Linux App	пользователи Linux, которым нужен отдельный SVG-редактор
  iOS/Android App	мобильная и планшетная работа
  Web Component	компании и разработчики, встраивающие редактор в собственный продукт

  Разовая покупка приложения удобнее, когда пользователь работает на одной платформе и не нуждается в браузерном доступе. Подписка удобнее, когда нужен Web App, облачные сценарии, доступ с разных устройств или образовательная модель. Web Component имеет другой смысл: это не пользовательская покупка редактора, а интеграционный продукт для бизнеса и веб-разработки.

  Преимущества и ограничения

  Плюсы

  • Фокус на SVG. Boxy SVG построен вокруг формата SVG, поэтому подходит для иконок, веб-графики, схем и элементов интерфейса.

  • Визуальное редактирование и контроль разметки. Пользователь меняет объект на холсте и проверяет структуру в Elements.

  • SVG/CSS inspector. Редактор полезен разработчикам, которым нужно видеть не только картинку, но и свойства объекта.

  • Поддержка SVG и SVGZ. Файл можно сохранять в обычном или сжатом SVG-формате.

  • Экспорт в PNG, JPG, WebP, PDF и HTML5. Это закрывает типичные сценарии публикации, предпросмотра и передачи результата.

  • Операции с контурами. Unite, intersect, subtract, exclude, close и reverse помогают строить сложные формы из простых объектов.

  • Управление размещением. Align, rotate, flip, order и group ускоряют работу с наборами объектов.

  • Google Fonts. Интеграция полезна для текстовых SVG, логотипов и веб-иллюстраций.

  • Сетка и направляющие. Manual guides, smart guides и grid помогают точно размещать объекты.

  • Несколько вариантов приложения. Web App, macOS, Linux, iOS, Android и Web Component закрывают разные сценарии.

  Минусы

  • Редактор не заменяет большой профессиональный пакет для всей графики. Для сложной айдентики, полиграфии и многоформатной производственной цепочки лучше подходят Illustrator, Affinity Designer или CorelDRAW.

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

  • Автоматическая векторизация не универсальна. Vectorize подходит для контрастных изображений, но плохо работает как замена ручной отрисовке сложных фотографий.

  • Мобильный интерфейс ограничен размером экрана. На планшете удобно править цвет и форму, но длительная работа с узлами и Elements требует большего пространства.

  • Разные варианты продукта имеют разные модели доступа. Web App, приложения и Web Component нужно оценивать отдельно.

  • Русский язык не входит в перечень локализаций macOS-приложения. Пользователю, которому нужен русскоязычный интерфейс, стоит учитывать этот момент заранее.

  • Для сложной командной работы Boxy SVG не заменяет Figma. В нем акцент сделан на SVG-редактировании, а не на совместном проектировании интерфейсов.

  Сравнение с аналогами

  Boxy SVG нужно сравнивать не с абстрактными редакторами графики, а с конкретными программами, которые закрывают соседние задачи: Inkscape, Adobe Illustrator, Affinity Designer, Figma, SVG-Edit, Vectr и Google Web Designer. Для пользователей freeexe полезны также смежные страницы: Inkscape, GIMP, Krita, Google Web Designer, Paint.NET.

  

  Программа	Основной сценарий	Сильная сторона	Ограничение по сравнению с Boxy SVG
  Boxy SVG	создание и правка SVG	сочетание холста, Elements и SVG/CSS inspector	не рассчитан на весь спектр профессиональной графики
  Inkscape	бесплатная настольная векторная графика	много инструментов, открытый код, сильная работа с SVG	интерфейс и структура сложнее для быстрой точечной правки
  Adobe Illustrator	профессиональный векторный дизайн	экосистема Adobe, печать, айдентика, сложная графика	тяжелее и шире, чем нужно для простой SVG-правки
  Affinity Designer	векторная и растровая графика без подписки	сильный универсальный дизайн-инструмент	SVG не является единственным центром рабочего процесса
  Figma	интерфейсы и командная работа	совместное редактирование, UI/UX, компоненты	не специализированный SVG-редактор с акцентом на код
  SVG-Edit	простое веб-редактирование SVG	открытый веб-инструмент без сложной экосистемы	меньше развитых функций и полировки интерфейса
  Vectr	простая векторная графика	низкий порог входа	меньше контроля над SVG-структурой
  Google Web Designer	веб-анимация и рекламные HTML5-материалы	подготовка интерактивной веб-графики	не предназначен именно для точечной SVG-правки

  Boxy SVG и Inkscape

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

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

  Boxy SVG и Adobe Illustrator

  Adobe Illustrator — профессиональный стандарт для векторной иллюстрации, логотипов, упаковки, печатной графики, бренд-систем и сложных коммерческих проектов. Его выбирают, когда нужна глубокая интеграция с Adobe Creative Cloud, работа с AI/PDF/EPS, профессиональная типографика, подготовка к печати и развитая экосистема.

  Boxy SVG не конкурирует с Illustrator по ширине возможностей. Его задача уже: быстро и точно работать с SVG. Для веб-разработчика, которому нужно поправить цвет path или проверить DOM-структуру значка, Illustrator часто избыточен. Для дизайнера крупной айдентики Boxy SVG будет вспомогательным инструментом, а не заменой основного пакета.

  Boxy SVG и Affinity Designer

  Affinity Designer объединяет векторные и растровые возможности, поддерживает экспорт в PDF, SVG, PNG, JPEG, TIFF и WebP, работает с объектами, artboard и slice-подходом. Это универсальный инструмент для дизайнеров, которым нужно делать иллюстрации, макеты, интерфейсные элементы и печатные материалы.

  Boxy SVG проще и уже. Он лучше подходит для тех, кто не хочет открывать большой проект ради одной SVG-иконки. Affinity Designer выбирают для полноценного дизайна, Boxy SVG — для SVG как отдельного рабочего формата.

  Boxy SVG и Figma

  Figma сильна в UI/UX, компонентах, макетах интерфейсов и командной работе. В ней удобно проектировать экраны, передавать дизайн разработчикам, работать с прототипами и экспортировать SVG-элементы. Но Figma не является специализированным редактором SVG-кода.

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

  Boxy SVG и SVG-Edit

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

  SVG-Edit хорош для базовой правки. Boxy SVG удобнее для регулярной работы с SVG, когда нужны Elements, инспектор, экспорт, панели Geometry/Fill/Stroke и более аккуратный рабочий процесс.

  Boxy SVG и Vectr

  Vectr ориентирован на простое создание векторной графики и низкий порог входа. Его можно использовать для базовых объектов, простых иллюстраций и обучения. Boxy SVG сильнее в задачах, где важны SVG-структура, код, viewBox, свойства и подготовка к веб-встраиванию.

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

  Отзывы пользователей и профильных журналов

  Мнение профильных изданий

  SitePoint выделяет Boxy SVG как WYSIWYG-интерфейс для языка SVG, а не просто редактор, который иногда экспортирует SVG. Это точное описание программы: пользователь работает с визуальной формой, но результат остается связанным с SVG-разметкой. В таком подходе ценность Boxy SVG не только в рисовании, а в получении понятного файла для веба.

  TechRadar относит BoxySVG к браузерным альтернативам Illustrator и подчеркивает простоту интерфейса, базовые инструменты вроде pens, bezier curves, text, shapes, stroke and fill, layers, groups, transforms and paths, а также чистые и эффективные SVG-файлы. Это соответствует практическому назначению редактора: меньше перегруженности, больше фокуса на том, что хорошо описывает сам SVG.

  Softpedia в обзоре Linux-версии отмечает Boxy SVG как масштабируемый векторный редактор, который подходит начинающим пользователям, осваивающим SVG. В публикации отдельно выделяется работа на macOS и Linux, а также экспорт в PNG, JPG, JPEG, WebP, PDF и HTML5.

  Creative Bloq в контексте альтернатив Illustrator показывает общий рынок: Affinity Designer, Figma, CorelDRAW, Inkscape и Sketch закрывают разные бюджеты и уровни пользователей. На этом фоне Boxy SVG занимает более узкую нишу: не универсальный конкурент всей экосистеме Illustrator, а специализированный редактор SVG.

  Усреднённое мнение пользователей

  Пользовательские отзывы о Boxy SVG сходятся вокруг нескольких тем. Положительно оценивают простоту интерфейса, быстрый старт, удобство базовых операций, работу с группами, resizing, прямую правку SVG и пригодность для векторизации. На Capterra/GetApp у Boxy SVG небольшое количество отзывов, но средняя оценка держится на высоком уровне — 4,5 из 5.

  В отзывах встречается характерная оценка: приложение удобно как tracing/SVG generator software, но пользователю не понравилось, что при работе spline tool форма по умолчанию получает fill. Это хороший пример не рекламного, а практического отзыва: программа нравится за простоту, но отдельные настройки поведения инструмента требуют привыкания.

  Критика чаще касается не самой идеи Boxy SVG, а границ программы:

  • не все пользователи хотят подписочную модель Web App;

  • сложные файлы из других редакторов требуют проверки;

  • отдельные инструменты имеют поведение по умолчанию, к которому нужно привыкнуть;

  • для профессиональной иллюстрации возможностей меньше, чем у Illustrator или Affinity Designer;

    

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

  Общий вывод по отзывам: Boxy SVG ценят за понятность, специализацию на SVG и удобство быстрых правок. Пользователи, которым нужен огромный универсальный графический пакет, чаще смотрят в сторону Illustrator, Affinity Designer, CorelDRAW или Inkscape.

  Типичные ошибки при работе с Boxy SVG

  Сохранять SVG без проверки viewBox

  Самая частая ошибка — смотреть только на внешний вид объекта. Иконка может выглядеть правильно, но иметь лишние поля, неправильный viewBox или смещенную систему координат. В интерфейсе сайта такая иконка будет выравниваться хуже остальных.

  Перед передачей файла нужно открыть Geometry и проверить viewBox. Для набора иконок все файлы должны использовать согласованную систему размеров.

  Путать экспорт и сохранение

  SVG — редактируемый исходник. PNG, JPG и WebP — растровые результаты. Если пользователь экспортировал иконку в PNG, а затем удалил SVG, он потерял редактируемую основу. Для дальнейшей работы всегда нужно сохранять SVG, а растровые форматы использовать как дополнительные.

  Преобразовывать текст в контуры слишком рано

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

  Оставлять слишком много лишних групп

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

  Использовать Vectorize для сложных фотографий

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

  Не проверять результат в браузере

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

  Как проверить результат после редактирования

  После работы в Boxy SVG нужно выполнить короткий контрольный проход:

  1. Открыть SVG в браузере.

  2. Проверить размер и viewBox.

  3. Увеличить и уменьшить масштаб.

  4. Посмотреть, нет ли лишних полей.

  5. Проверить прозрачность.

  6. Проверить fill и stroke.

  7. Проверить, не заменился ли шрифт.

  8. Открыть Elements и удалить лишние объекты.

  9. Экспортировать PNG-превью.

  10. Сравнить PNG-превью с SVG в браузере.

  11. Проверить, сохранились ли ID и class.

  12. Проверить файл в том месте, где он будет использоваться: HTML, CSS, React-компоненте, CMS или дизайн-системе.

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

  

  Кому подойдёт Boxy SVG

  Новичку

  Boxy SVG подходит новичку, который хочет понять SVG без перегруженного профессионального пакета. Интерфейс показывает связь между объектом и кодом, поэтому пользователь постепенно понимает, что прямоугольник — это не просто фигура на экране, а элемент , контур —
, а цвет хранится в fill или stroke.

  Для обучения полезны простые задачи: нарисовать иконку, изменить цвет готового SVG, экспортировать PNG, поправить viewBox, сделать текстовый SVG-заголовок.

  Веб-дизайнеру

  Веб-дизайнеру Boxy SVG подходит для иконок, простых иллюстраций, декоративных элементов, схем и графики для лендингов. Программа не перегружает рабочий процесс полиграфическими инструментами и держит фокус на том, что действительно нужно вебу: SVG, PNG-превью, CSS-свойства, viewBox, fill, stroke, классы и структура.

  Фронтенд-разработчику

  Разработчик получает в Boxy SVG инструмент для быстрой правки SVG без погружения в тяжелый редактор. Можно открыть иконку, убрать лишнюю группу, заменить цвет, проверить ID, подготовить sprite, поправить viewBox и сохранить файл в чистом виде.

  Пользователю Mac или Linux

  На macOS и Linux Boxy SVG удобен как отдельный специализированный редактор. Пользователю не нужно запускать универсальный графический пакет ради простой правки SVG. Это особенно полезно для регулярной работы с веб-графикой и небольшими векторными элементами.

  Преподавателю и студенту

  Boxy SVG подходит для изучения базовой векторной графики и SVG. Через интерфейс видно, как геометрия связана с разметкой. Это помогает объяснять viewBox, path, fill, stroke, группы и экспорт не абстрактно, а на реальном файле.

  Кому лучше выбрать другую программу

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

  Лучше выбрать другой редактор, если нужны:

  • сложная коммерческая айдентика;

  • полиграфическая подготовка;

  • многостраничная верстка;

  • развитая работа с AI, EPS, PSD и CDR;

  • командное проектирование интерфейсов;

  • сложная цифровая иллюстрация;

  • детальная растровая ретушь;

  • развитые кисти и рисование от руки;

  • подготовка печатных макетов;

  • сложные эффекты и композитинг.

  Для таких задач подойдут Illustrator, Affinity Designer, Figma, CorelDRAW, Inkscape, GIMP или Krita, в зависимости от сценария.

  Частые вопросы

  Boxy SVG — это редактор SVG или обычный векторный редактор?

  Boxy SVG — векторный редактор, специально ориентированный на SVG. Он умеет создавать и редактировать векторную графику, но его рабочая логика строится вокруг SVG-документа, Elements, SVG/CSS inspector, viewBox, fill, stroke и сохранения структуры файла.

  Можно ли использовать Boxy SVG для логотипов?

  Да, Boxy SVG подходит для простых и средних логотипов, особенно если итог нужен в SVG для сайта. Для сложной айдентики, брендбуков, печатных материалов и передачи в производственную цепочку лучше использовать Illustrator, Affinity Designer или CorelDRAW.

  Можно ли редактировать SVG-код?

  Да. В Elements panel пользователь видит SVG-структуру и может работать с документом не только визуально. Это одно из важных отличий Boxy SVG от простых редакторов, которые скрывают разметку.

  Поддерживает ли Boxy SVG экспорт в PNG?

  Да. Редактор экспортирует результат в PNG, JPG, WebP, PDF и HTML5, а редактируемый исходник сохраняет в SVG и SVGZ.

  Подходит ли Boxy SVG для сайта?

  Да. Программа подходит для подготовки SVG-графики для сайта: иконок, логотипов, схем, декоративных элементов, SVG sprites и файлов, где важны ID, class, viewBox и чистая структура.

  Есть ли в Boxy SVG работа со шрифтами?

  Да. В редакторе есть Typography panel и интеграция с Google Fonts. Текст можно использовать как редактируемый объект или преобразовывать в контуры для финальной передачи.

  Можно ли использовать Boxy SVG вместо Inkscape?

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

  Можно ли использовать Boxy SVG вместо Figma?

  Для командного проектирования интерфейсов — нет. Figma лучше подходит для UI/UX, компонентов, прототипов и совместной работы. Boxy SVG лучше подходит для редактирования SVG-файлов и контроля их структуры.

  Подходит ли Boxy SVG для мобильной работы?

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

  Нужно ли проверять SVG после экспорта?

  Да. Финальный файл нужно открыть в браузере, проверить viewBox, масштабирование, цвета, прозрачность, текст, классы и размер файла. Это обязательный этап перед публикацией на сайте.

  Итоговые рекомендации

  Boxy SVG стоит выбирать, если основная задача связана с SVG: нарисовать иконку, поправить готовый файл, изменить цвет, подготовить веб-графику, проверить viewBox, сохранить структуру, экспортировать PNG-превью или привести SVG к аккуратному виду перед передачей разработчику.

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

  Для сложной коммерческой графики, полиграфии, командного UI-дизайна и многоформатной производственной работы лучше использовать более широкие решения: Illustrator, Affinity Designer, Figma, CorelDRAW или Inkscape. Boxy SVG сильнее всего раскрывается не как замена всем векторным редакторам, а как специализированная программа для редактирования SVG, где холст, код и экспорт находятся в одном рабочем процессе.