Как редактировать SVG: визуальный редактор или код

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

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

Подготовьте копию и определите объекты SVG

Вам понадобятся SVG-файл, рабочая копия, редактор и программа просмотра с поддержкой SVG. Сохраняйте оригинал, пока экспортированная копия не пройдёт проверку.

SVG расшифровывается как Scalable Vector Graphics. XML-разметка может описывать векторные фигуры и контуры, но также содержать встроенные изображения. Контур описывает линию или фигуру; узел — это редактируемая точка на контуре в векторном редакторе. Расширение SVG само по себе не говорит, доступны ли такие точки у видимого изображения.

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

Элемент <image> может ссылаться на содержимое PNG или JPEG. Пиксели не становятся контурами лишь потому, что внешний файл заканчивается на .svg. Ступенчатые края при увеличении могут подсказать причину; панель объектов и ссылка на источник позволяют поставить точнее диагноз. Некоторые редакторы также вставляют полноценный векторный SVG как один графический объект, поэтому одно выделение ещё мало что доказывает.

Составной контур может сохранять отверстия, например середину буквы «O». При разбиении эти отверстия могут измениться. Обратитесь к разбору типов объектов SVG, если Ungroup недоступна или ничего не делает.

Выберите визуальный редактор или код

Inkscape — бесплатная программа с открытым исходным кодом для macOS, Windows и Linux; SVG — её основной формат. Illustrator тоже подойдёт, если вы уже им пользуетесь. Figma умеет переносить материалы между инструментами дизайна в формате SVG, однако её документация по импорту исключает элементы marker и pattern SVG. Проверьте сложный импорт, прежде чем окончательно выбрать редактор.

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

Измените фигуры визуально и проверьте экспорт

Названия команд различаются, но порядок работы такой:

1. Откройте рабочую копию. Сравните импорт с оригиналом. Если надписи, узоры или эффекты уже изменились, остановитесь.
2. Выделите нужный объект. Войдите в группу или разгруппируйте её только тогда, когда панель подтверждает, что это группа. Для контура включите инструмент узлов или прямого выделения.
3. Внесите одну правку. Измените заливку, переместите часть или поправьте несколько узлов. При изменении размера сохраняйте пропорции, если растяжение не задумано специально.
4. Проверьте изменённый участок. Рассмотрите кривые и небольшие зазоры вблизи, затем весь дизайн в предполагаемом размере.
5. Сохраните или экспортируйте новый SVG. Откройте его заново в программе просмотра и в приложении, где будете использовать. Проверьте изменённую часть, общие размеры и нужные выделяемые объекты.

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

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

Небольшая контролируемая правка SVG-кода

Откройте копию SVG в VS Code или другом редакторе обычного текста. Сохраняйте пространство имён, названия элементов и кавычки. После каждой правки проверяйте отображение, прежде чем делать следующую.

Измените заливку, сохранив контур

Сохраните пример как triangle.svg и откройте в программе с поддержкой SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. Замените #3b82f6 на #f97316 в атрибуте fill контура.
2. Сохраните файл, откройте его заново или обновите.
3. Проверьте, что треугольник стал оранжевым, а контур не изменился. Данные контура d, id и class должны совпадать с оригиналом.

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

О проверке: мы отрисовали этот пример до и после смены заливки с помощью SVG-рендерера и проверили полученные пиксели. Цвет треугольника изменился, данные контура, ID и класс остались прежними. Этот небольшой пример не проверяет импорт или экспорт сложного SVG в дизайнерском приложении.

Уберите пустые поля с помощью viewBox

Корневой viewBox содержит четыре числа: минимум x, минимум y, ширину и высоту. Они задают прямоугольник в системе координат SVG, отображаемый в его видимую область.

В примере треугольник занимает x от 8 до 40 и y от 8 до 40. Замените viewBox="0 0 48 48" на viewBox="8 8 32 32", не меняя данные контура. Сохраните и отрисуйте снова. Теперь треугольник занимает больше места в той же области 48 на 48, поскольку пустые поля убраны.

Эта правка меняет отображение холста, а не геометрию контура и не корневые width и height. Для настоящего дизайна оставляйте место под обводки и эффекты: тесная рамка геометрии может их обрезать. Часто безопаснее визуально подогнать страницу или монтажную область к рисунку и проверить экспортированную копию. Если файл импортируется с неверным физическим размером, воспользуйтесь руководством по размерам SVG и viewBox.

Если изображение исчезло, обрезалось или растянулось, верните исходный viewBox и проверьте четыре значения и пропорции. Не пытайтесь «исправить» холст перемещением всех узлов.

Когда трассированный SVG требует очистки

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

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

Раздробленная структура

Более простая структура

Эти иллюстрации объясняют трудоёмкость редактирования; это не образцы конвертации и не измеренное сравнение продуктов. Если трассировку стоит сохранить, исправьте проблемные места и упрощайте лишь там, где контур остаётся точным. Если изображение было растровым и очистка потребует слишком много работы, попробуйте снова векторизовать оригинал. Сохраняйте пригодную исходную векторную геометрию вместо трассировки её скриншота.

Как это работает в PerfectVector

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

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

1. Загрузите растр и сравните векторный предпросмотр. Ищите потерянные детали, лишние области и контуры, отличающиеся от оригинала.
2. Разблокируйте результат перед редактированием или экспортом. Конвертация и предпросмотр бесплатны и не ограничены; согласно действующей публичной политике цен, каждый уникальный результат разблокируется за один кредит, а повторное скачивание разблокированного результата бесплатно.
3. Изучите и измените разблокированную геометрию. Проверьте нужные фигуры и узлы, при необходимости поправьте палитру и сравните результат в предполагаемом размере.
4. Экспортируйте и проверьте в следующем приложении. Откройте SVG заново, выделите нужные части и проверьте размеры и мелкие детали. Сам предпросмотр не доказывает готовность файла для любого редактора, принтера или режущей машины.

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

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

Как бесплатно редактировать SVG? Используйте Inkscape для визуального редактирования или текстовый редактор для разметки. Браузерные инструменты тоже могут предлагать бесплатные функции; проверьте актуальные условия экспорта и поддержку особенностей вашего SVG.

Можно ли редактировать SVG в VS Code? Да. Изменяйте XML-разметку для небольшой правки заливки, размеров, viewBox или нужных ID и классов. Сохраните копию и проверьте отображение. Для изменения кривых используйте визуальный редактор.

Почему нельзя выделить отдельные фигуры в SVG? Определите тип объекта. Это может быть группа, контур с несколькими подконтурами, изображение с обтравкой или встроенный растр. Войдите в настоящую группу или разгруппируйте её; изменяйте геометрию через узлы; векторизуйте растр только тогда, когда нужны контуры.

Можно ли редактировать SVG в Canva? Описанный процесс Canva позволяет базовые правки цвета и компоновки. Проверьте импортированный файл и актуальные условия скачивания SVG. Для точного изменения контуров или контроля ID и классов используйте векторный редактор либо разметку.

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

Источники

1. W3C — Scalable Vector Graphics (SVG) 2 — модель документов, фигур, контуров и стилей SVG.
2. W3C — встроенное содержимое SVG — растр может оставаться встроенным внутри SVG-документа.
3. W3C — системы координат, преобразования и единицы SVG — отображение viewBox и различие геометрии и размеров области просмотра.
4. Inkscape — о программе — официальные сведения о платформах, SVG и открытом исходном коде редактора.
5. Adobe — сохранение дизайна в Illustrator — параметры экспорта SVG и сохранение данных редактирования Illustrator.
6. Figma — перенос материалов между инструментами дизайна — работа с SVG и ограничения импорта marker/pattern.
7. Canva — редактор SVG — описанные базовые операции с цветом, размером и компоновкой.
8. PerfectVector — политика цен — актуальные условия предпросмотра, разблокировки и повторного скачивания.

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