Обрежьте SVG окончательно, без скрытых контуров

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

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

Решите, нужно скрыть графику или удалить её

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

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

Удаление всех невидимых элементов — другая задача. Фигура отсечения, ресурс маски или используемый по ссылке символ могут быть необходимы, даже если непосредственно не рисуются. Наше руководство по clip-path и маскам объясняет эти связи рендеринга; руководство по координатам отсечения рассматривает их системы координат.

Начните с узнаваемых замкнутых заливок

Вам нужны редактируемый исходник, определённая область обрезки и способ проверки сохранённого SVG. В этом примере Paper.js 0.12.18 работает в браузере. Он обрабатывает сплошные полностью непрозрачные многоугольные заливки без обводок. Операнды — объекты Path или CompoundPath, а не произвольные импортированные группы.

Исходник содержит бирюзовую рамку с прямоугольным отверстием, оранжевый треугольник, фиолетовый ромб и маленький жёлтый объект полностью за пределами обрезки. Прямоугольник обрезки начинается в (60, 40) и имеет размер 160 × 120 пользовательских единиц SVG. Это заданные координаты, а не физические размеры печати.

Отверстие рамки принадлежит составному контуру. Не разбивайте его контуры на несвязанные залитые объекты только ради перебора в цикле. Руководство по отверстиям SVG объясняет, почему белая заплатка и настоящее прозрачное отверстие ведут себя по-разному.

Сохраните этот исходный образец как source.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="220" viewBox="0 0 300 220">
  <path id="frame" fill="#39786E" fill-rule="evenodd"
        d="M20 20H160V180H20Z M85 70V100H115V70Z"/>
  <path id="triangle" fill="#DE9252"
        d="M150 0L270 110L150 200Z"/>
  <path id="leaf" fill="#80618E"
        d="M180 130L240 150L180 190L120 150Z"/>
  <path id="outside" fill="#D4B35E" d="M250 10H280V30H250Z"/>
</svg>

Пересеките каждый объект и оставьте только результат

Пересечение сохраняет общую область объекта и обрезки. Документация Paper.js по intersect() описывает новый элемент контура, содержащий пересечение. Здесь trace: true рассматривает оба операнда как площади. Этот параметр относится к булевой геометрии; он не преобразует растр в вектор. Мы используем insert: false, чтобы ни импортированный мастер, ни вспомогательная фигура обрезки автоматически не попадали в экспортируемую сцену.

Для воспроизводимого локального примера установите закреплённую версию библиотеки в пустую рабочую папку:

npm install --save-exact paper@0.12.18

Сохраните следующее как index.html рядом с source.svg и приведённым ниже файлом crop.js:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Permanent SVG crop</title>
<canvas id="work" width="300" height="220" hidden></canvas>
<p id="status">Running crop…</p>
<pre id="svg-output"></pre>
<pre id="receipt"></pre>
<script src="node_modules/paper/dist/paper-full.min.js"></script>
<script src="crop.js"></script>
</html>

Сохраните следующий код как crop.js. Запустите локальный HTTP-сервер для папки и откройте index.html; скрипт загружает соседний SVG-файл.

(async () => {
  paper.setup(document.getElementById('work'));
 
  const source = await (await fetch('source.svg')).text();
  const imported = paper.project.importSVG(source, {
    insert: false,
    expandShapes: true
  });
  const crop = new paper.Path.Rectangle({
    rectangle: new paper.Rectangle(60, 40, 160, 120),
    insert: false
  });
  const delivery = new paper.Group({ insert: false });
  const rows = [];
 
  for (const name of ['frame', 'triangle', 'leaf', 'outside']) {
    const operand = imported.getItem({ name });
    if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) {
      throw new Error('Expected filled path: ' + name);
    }
 
    const result = operand.intersect(crop, { insert: false, trace: true });
    if (Math.abs(result.area) < 1e-8) {
      rows.push({ name, removed: true });
      result.remove();
      continue;
    }
 
    result.fillColor = operand.fillColor.clone();
    result.fillRule = operand.fillRule;
    result.strokeColor = null;
    result.opacity = 1;
    result.name = 'cropped-' + name;
    delivery.addChild(result);
    rows.push({
      name,
      result: result.className,
      fill: result.fillColor.toCSS(true),
      area: result.area
    });
  }
 
  delivery.translate(new paper.Point(-60, -40));
  paper.project.activeLayer.addChild(delivery);
  const output = paper.project.exportSVG({
    asString: true,
    precision: 6,
    bounds: new paper.Rectangle(0, 0, 160, 120)
  });
 
  document.getElementById('svg-output').textContent = output;
  document.getElementById('receipt').textContent = JSON.stringify({
    paper: paper.version,
    rows,
    export_precision: 6,
    viewport: [0, 0, 160, 120]
  }, null, 2);
  document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.';
})().catch(e => {
  document.getElementById('status').textContent = 'FAIL: ' + e.message;
});

Явный список имён следует порядку рисования этого исходника. Каждый сохранённый результат получает собственную сплошную заливку и добавляется в этом порядке. Предварительное объединение всей графики в один силуэт уничтожило бы отдельные цветовые области, которые мы хотим сохранить. Наше руководство по булевым операциям Paper.js рассматривает другую задачу объединения и вычитания.

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

Мы переносим сохранённую геометрию на (-60, -40) и экспортируем её в область просмотра 160 × 120, начинающуюся с нуля. Перенос меняет начало координат результата. Нежелательную внешнюю геометрию удаляет именно операция пересечения; одного изменения начала координат или области просмотра для этого недостаточно. Справочник Paper.js по экспорту проекта описывает явно заданные границы и числовую точность, использованные здесь.

Сохраните, откройте заново и проверьте реальный SVG

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

Проверки разделяют структуру файла, геометрию и внешний вид:

• Экспортированный SVG содержит три результирующих элемента path с четырьмя замкнутыми контурами, поскольку рамка сохраняет отверстие.
• В этом контролируемом результате отсутствуют вспомогательная фигура обрезки, исходные ID объектов, контуры отсечения, маски, растровые изображения и элементы эффектов.
• Каждый заново открытый контур замкнут и состоит из прямых сегментов. Все его вершины находятся в области результата 0…160 на 0…120 с допуском 0.00001 пользовательской единицы.
• Нужное отверстие остаётся вне залитой геометрии и прозрачным в отрендеренном файле. Оранжевая область по-прежнему находится над бирюзовой в проверенной точке перекрытия.
• Браузерное сравнение рендеров сопоставляет предпросмотр только с отсечением и обрезанный файл при одинаковом размере, отдельно от проверки геометрии.

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

Наше сравнение изображений использует растр 640 × 480 и объявленный допуск 0,5% изменённых пикселей, когда канал отличается более чем на единицу. Рендер сохранённого файла отличался в 77 из 307 200 пикселей, примерно 0,0251%, поэтому прошёл этот критерий. Попиксельного совпадения не было: наибольшая разница отдельного канала составила 255. Это допуск визуального сравнения, а не геометрический допуск. Сглаживание у края и действительно сохранённый внешний контур — разные проблемы.

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

Остановитесь, если графике нужно другое представление

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

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

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

Восстанавливайте недостающий вектор только при необходимости

Если исходник — существующий редактируемый SVG, обрезайте его геометрию напрямую. Если осталось лишь подходящее растровое изображение клипарта и нужны редактируемые фигуры, процесс PerfectVector для клипарта сначала создаст вариант SVG. Проверьте восстановленные контуры, отверстия и отдельные заливки до обрезки. Векторизация создаёт контуры из пикселей; она не определяет желаемую границу обрезки и не проверяет результат булевой операции. Наш исходный образец создан напрямую, без трассировки.

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

Завершите обрезку, сохранив мастер

1. Сохраните необрезанный мастер-файл и определите нужные замкнутые залитые объекты.
2. Задайте обрезку в той же системе координат, что и эти объекты.
3. Выполните пересечение каждого объекта, сохраните проверенные стиль и порядок рисования, исключите вспомогательные фигуры и оригиналы из сцены для передачи.
4. Экспортируйте только оставшуюся геометрию с осознанно заданными границами и точностью.
5. Заново откройте сохранённый файл и отдельно проверьте реальные контуры, отверстия, внешний вид и предполагаемое целевое приложение.

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

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

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

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

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

Удаляет ли уменьшенный viewBox скрытую графику? Он меняет отображение области просмотра и показываемую область. Сам по себе он не удаляет исходные контуры за её пределами. Проверяйте и сохранённую геометрию, и предпросмотр.

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

Источники

1. MDN: SVG clipPath — Отсечение влияет на рендеринг, не меняя геометрию используемого элемента.
2. Paper.js: PathItem — Результаты пересечения и параметры булевых операций над площадями.
3. Paper.js: Project — Импорт SVG, содержимое проекта, границы экспорта и числовая точность.

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