Как редактировать SVG-файлы в браузере

SVG (Scalable Vector Graphics) хранит изображение в виде фигур и контуров, то есть с помощью математики, а не пикселей. Поэтому логотип, сохранённый в SVG, остаётся идеально чётким, будь то favicon или рекламный щит, и именно поэтому это правильный формат для иконок, логотипов и иллюстраций. Это также значит, что вы можете открыть файл и редактировать сами фигуры, а не двигать пиксели по одному.

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

Векторный редактор EditItAll открывает SVG-файлы прямо в браузере:

• Откройте редактор и загрузите свой файл .svg: логотип, набор иконок или иллюстрацию.
• Используйте инструмент «Выделение» (V), чтобы перемещать и изменять размер целых объектов, и инструмент «Прямое выделение» (A), чтобы захватывать отдельные опорные точки.
• Меняйте цвет заливки и обводки, редактируйте любой текст инструментом «Текст» (T) и точно располагайте фигуры с помощью умных направляющих и сочетаний клавиш в стиле Illustrator.

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

Главная сила редактора заключается в изменении контуров. Инструмент «Перо» (P) расставляет опорные точки с направляющими Безье, поэтому вы можете перерисовать кривую, добавить точку к логотипу или обвести новую форму с нуля. Для рисования от руки предназначен карандаш.

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

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

Два честных ограничения: редактор читает стандартный SVG, но не читает файлы .ai или .eps от Adobe, и он не умеет работать с градиентной сеткой, узорной заливкой и цветом CMYK. Тем не менее для редактирования повседневных логотипов, иконок и иллюстраций в формате SVG всё необходимое работает прямо на вашем устройстве. Откройте векторный редактор, чтобы начать.