SVG dauerhaft zuschneiden, ohne versteckte Pfade

Um gefüllte SVG-Motive dauerhaft zuzuschneiden, bilde die Schnittmenge jeder gewünschten Form mit dem Zuschneidebereich und exportiere anschließend nur die resultierende Geometrie. Bewahre einen bearbeitbaren Master separat auf. Eine kleinere viewBox oder ein Beschneidungspfad kann die Ansicht verändern, während die ursprünglichen äußeren Pfade in der Datei bleiben.

Unser Beispiel verwendet vier eigene deckende, geschlossene polygonale Objekte und einen rechteckigen Zuschneidebereich. Ein Objekt enthält eine echte Öffnung. Wir schneiden die Objekte einzeln zu, um Füllungen und Zeichenreihenfolge zu erhalten, speichern das Ergebnis als SVG und öffnen diese tatsächliche Datei zur Prüfung erneut. Das ist ein begrenzter Geometrieablauf, keine allgemeine Methode zum Zuschneiden sämtlicher SVG-Effekte oder zum Erstellen getesteter Schneideplotterdateien.

Entscheide, ob das Motiv ausgeblendet oder entfernt werden soll

Beschneiden per Clip ist nützlich, wenn du den Ausschnitt später anpassen möchtest. MDNs Referenz zum Clipping unterscheidet das gerenderte Ergebnis von der zugrunde liegenden Elementgeometrie. Wird die Beschneidungsbeziehung entfernt, kann das ursprüngliche Motiv wieder sichtbar werden.

Dauerhaftes Zuschneiden verändert die gelieferte Geometrie. Nutze es, wenn die nächste Person die begrenzten Formen selbst benötigt, und bewahre die unbeschnittene Quelle als separaten Master auf.

Alle unsichtbaren Elemente zu löschen, ist eine andere Aufgabe. Eine Beschneidungsform, Maskenressource oder ein referenziertes Symbol kann nötig sein, auch wenn es nicht direkt gezeichnet wird. Unser Leitfaden zu Beschneidungspfaden und Masken erklärt diese Darstellungsbeziehungen; der Leitfaden zu Clip-Koordinaten behandelt ihre Koordinatensysteme.

Beginne mit eindeutig erkennbaren geschlossenen Füllungen

Du brauchst eine bearbeitbare Quelle, einen definierten Zuschneidebereich und eine Möglichkeit, die gespeicherte SVG zu prüfen. Dieses Beispiel führt Paper.js 0.12.18 im Browser aus. Es verarbeitet einfarbige, vollständig deckende Polygonfüllungen ohne Konturen. Die Operanden sind Path- oder CompoundPath-Objekte statt beliebiger importierter Gruppen.

Unsere Quelle enthält einen türkisen Rahmen mit rechteckiger Öffnung, ein oranges Dreieck, eine violette Raute und ein kleines gelbes Objekt vollständig außerhalb des Zuschnitts. Das Zuschneiderechteck beginnt bei (60, 40) und misst 160 × 120 SVG-Benutzereinheiten. Das sind erstellte Koordinaten, keine physischen Druckmaße.

Die Rahmenöffnung gehört zu einem zusammengesetzten Pfad. Zerlege seine Konturen nicht in unabhängige gefüllte Objekte, nur um sie in einer Schleife zu durchlaufen. Der Leitfaden zu Löchern in SVGs erklärt, warum sich ein weißer Fleck und eine echte transparente Öffnung unterschiedlich verhalten.

Speichere dieses ursprüngliche Testmotiv als 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>

Bilde pro Objekt die Schnittmenge und behalte nur das Ergebnis

Eine Schnittmenge behält die Fläche, die Objekt und Zuschneidebereich gemeinsam haben. Paper.js beschreibt in der Dokumentation zu intersect() ein neues Pfadelement, das diese Schnittmenge enthält. Hier behandelt trace: true beide Operanden als Flächen. Diese Option betrifft die boolesche Geometrie; sie wandelt keine Rastermotive in Vektoren um. Mit insert: false verhindern wir, dass der importierte Master oder die Zuschneidehilfe automatisch in die exportierte Szene gelangen.

Installiere für ein reproduzierbares lokales Beispiel die festgelegte Bibliotheksversion in einem leeren Arbeitsordner:

npm install --save-exact paper@0.12.18

Speichere Folgendes als index.html neben source.svg und der unten stehenden Datei 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>

Speichere Folgendes als crop.js. Stelle den Ordner über einen lokalen HTTP-Server bereit und öffne index.html; das Skript lädt die benachbarte SVG-Datei.

(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;
});

Die ausdrückliche Namensliste folgt der Zeichenreihenfolge dieser Quelle. Jedes beibehaltene Ergebnis erhält seine eigene einfarbige Füllung und wird in dieser Reihenfolge hinzugefügt. Würdest du zunächst das gesamte Motiv zu einer Silhouette vereinigen, gingen die getrennten Farbbereiche verloren, die wir behalten möchten. Unser Leitfaden zu booleschen Operationen in Paper.js behandelt die andere Aufgabe des Vereinigens und Subtrahierens.

Das vollständig außen liegende gelbe Objekt ergibt eine leere Schnittmenge und entfällt. Der kleine Flächenschwellwert ist nur eine Absicherung für dieses Testmotiv, keine Erlaubnis, feine Details aus beliebigen Motiven zu löschen.

Wir verschieben die beibehaltene Geometrie um (-60, -40) und exportieren sie in einen bei null beginnenden Viewport von 160 × 120. Diese Verschiebung ändert den Koordinatenursprung der Ausgabe. Die Schnittmengenoperation entfernt die unerwünschte äußere Geometrie; eine Änderung von Ursprung oder Viewport allein würde das nicht leisten. Paper.js dokumentiert in der Referenz zum Projektexport die hier verwendeten ausdrücklichen Grenzen und die numerische Genauigkeit.

Speichere, öffne und prüfe die tatsächliche SVG

Kopiere das angezeigte SVG-Markup exakt in cropped.svg. Öffne diese gespeicherte Datei unabhängig, statt dich nur auf die Vorschau des Programms im Arbeitsspeicher zu verlassen. Bei unserem Testmotiv lud eine separate Seite die gespeicherte Datei, importierte sie in einen neuen Paper.js-Scope und zeigte sie über den SVG-Bildrenderer des Browsers an.

Die Prüfungen trennen Dateistruktur, Geometrie und Aussehen:

• Die exportierte SVG enthält drei Ergebnis-Pfadelemente mit vier geschlossenen Konturen, weil der Rahmen seine Öffnung behält.
• Zuschneidehilfe, ursprüngliche Objekt-IDs, Beschneidungspfade, Masken, Rasterbilder und Effektelemente fehlen in dieser kontrollierten Ausgabe.
• Jede erneut geöffnete Kontur ist geschlossen und hat gerade Segmente. Alle Eckpunkte liegen innerhalb des Ausgabebereichs von 0…160 mal 0…120, mit einer Toleranz von 0.00001 Benutzereinheiten.
• Die vorgesehene Öffnung bleibt außerhalb der gefüllten Geometrie und in der gerenderten Datei transparent. Der orange Bereich erscheint am geprüften Überlappungspunkt weiterhin über Türkis.
• Ein Vergleich der Browserrenderings prüft die reine Clip-Vorschau gegen die zugeschnittene Datei bei gleicher Größe, getrennt von der Geometrieprüfung.

Für diesen rechteckigen Bereich und dieses Testmotiv mit geraden Segmenten belegt die Prüfung aller Eckpunkte und schließenden Kanten, dass die gespeicherten Konturen innerhalb des Bereichs bleiben. Eine Kurve mit Griffpunkten oder ein konkaver Zuschneidebereich braucht eine andere Einschlussprüfung; einige Stichprobenpunkte würden dasselbe Ergebnis nicht beweisen.

Unser Bildvergleich verwendet ein Raster von 640 × 480 und erlaubt ausdrücklich 0,5% veränderte Pixel, wenn sich ein Kanal um mehr als eins unterscheidet. Das Rendering der gespeicherten Datei wich bei 77 von 307.200 Pixeln ab, etwa 0,0251%, und bestand damit dieses Kriterium. Es war nicht pixelidentisch: Die größte einzelne Kanalabweichung betrug 255. Das ist eine Toleranz des visuellen Vergleichs, nicht die Geometrietoleranz. Kantenglättung an einer Grenze und ein tatsächlich beibehaltener Außenpfad sind unterschiedliche Probleme.

Diese Operation entfernt Geometrie außerhalb des Zuschnitts. Sie entfernt nicht jede Überlappung zwischen den beibehaltenen farbigen Objekten. Diese inneren Überlappungen bleiben in Zeichenreihenfolge erhalten; der geprüfte Überlappungspunkt bestätigt die vorgesehene oberste Farbe. Jede verdeckte gezeichnete Überlappung aufzulösen, wäre eine separate Aufgabe.

Halte an, wenn das Motiv eine andere Darstellung braucht

Dieses Beispiel belegt keine Unterstützung für offene Mittellinien, Konturen, gekrümmte Operanden, Verläufe, weiche Masken, Rasterbilder, Filter, beliebig verschachtelte Clip-Stapel oder durchscheinende überlappende Füllungen. Entferne solche Merkmale nicht in der Annahme, dass das Aussehen erhalten bleibt.

Eine mit Kontur versehene Bahn und der gefüllte Umriss dieser Kontur sind unterschiedliche Geometrie. Braucht der Auftrag die sichtbare Konturfläche als gefüllte Form, bereite vor der Wahl eines booleschen Ablaufs in einem geeigneten Editor eine in Pfade umgewandelte Kopie vor und prüfe sie. Behalte die Originalkontur, wenn Bearbeitbarkeit wichtig ist. Eine weiche Maske lässt sich nicht durch eine harte Schnittmenge ersetzen und dabei an allen verblassenden Kanten erhalten.

Für eine einmalige Bearbeitung kann ein Vektoreditor der einfachere Ort sein, um die benötigten Objekte auszuwählen und zu prüfen. Welches Werkzeug du auch wählst: Prüfe Löcher, Farben und Grenzen des gespeicherten Ergebnisses. Exportgenauigkeit und sehr kleine Details verdienen vor der weiteren Nutzung besondere Aufmerksamkeit.

Stelle fehlende Vektorgrafik nur bei Bedarf wieder her

Ist die Quelle eine vorhandene bearbeitbare SVG, schneide diese Geometrie direkt zu. Wenn nur ein geeignetes Raster-Clipart verbleibt und du bearbeitbare Formen brauchst, kann PerfectVectors Clipart-Workflow zunächst einen SVG-Kandidaten erzeugen. Prüfe die wiederhergestellten Konturen, Öffnungen und getrennten Füllungen vor dem Zuschnitt. Vektorisierung erstellt Pfade aus Pixeln; sie erkennt weder die gewünschte Zuschneidegrenze noch validiert sie das boolesche Ergebnis. Unser ursprüngliches Testmotiv wurde direkt erstellt und nicht vektorisiert.

Behalte eine Rasterillustration, wenn ihre Textur gebraucht wird und das Lieferformat den vorgesehenen Rasterzuschnitt unterstützt. Ein Vektorzuschnitt ist nützlich, weil der nächste Schritt Geometrie braucht, nicht weil jedes Bild zu SVG werden muss.

Schließe den Zuschnitt ab, ohne den Master zu verlieren

1. Bewahre den unbeschnittenen Master auf und bestimme die vorgesehenen geschlossenen gefüllten Objekte.
2. Definiere den Zuschnitt im selben Koordinatenkontext wie diese Objekte.
3. Bilde für jedes Objekt die Schnittmenge, erhalte den geprüften Stil und die Zeichenreihenfolge und schließe Hilfen und Originale aus der Lieferszene aus.
4. Exportiere nur die beibehaltene Geometrie mit bewusst gewählten Grenzen und Genauigkeit.
5. Öffne die gespeicherte Datei erneut und prüfe tatsächliche Pfade, Öffnungen, Aussehen und vorgesehenes Ziel getrennt.

Der begrenzte Zuschnitt ist abgeschlossen, wenn die gespeicherte Datei die vorgesehene Geometrie innerhalb des Bereichs enthält und die erforderlichen Loch- und Farbbeziehungen erhält. Bleibt äußere Geometrie übrig, prüfe, ob du den ursprünglichen Projektinhalt exportiert oder nur einen Clip oder Viewport verändert hast. Füllt sich eine Öffnung, prüfe den zusammengesetzten Pfad und die Füllregel, bevor du weitere Objekte kombinierst.

Wir haben die Aufgabe an der gespeicherten Datei für das ursprüngliche polygonale Testmotiv abgeschlossen. Wir haben es weder in eine Schneideanwendung importiert noch eine physische Ausgabe getestet oder eine allgemeine SVG-Kompatibilitätsgarantie erbracht.

Häufige Fragen

Löscht das Beschneiden einer SVG per Clip ihre äußeren Pfade dauerhaft? Clipping begrenzt die Darstellung und erhält die referenzierte Geometrie. Ein dauerhafter geometrischer Zuschnitt braucht eine passende Pfadoperation und einen Export, der nur die Ergebnisse enthält.

Kann ich alle Farben zuschneiden, indem ich zuerst die Formen vereinige? Eine einzelne Vereinigung kann getrennte Füllbereiche verwerfen, die du erhalten wolltest. Dieses Beispiel schneidet jedes einfarbig gefüllte Objekt separat und bewahrt die Zeichenreihenfolge der Quelle.

Entfernt eine kleinere viewBox versteckte Motive? Sie ändert die Viewport-Zuordnung und den angezeigten Bereich. Sie löscht selbst keine Quellpfade außerhalb dieses Bereichs. Prüfe neben der Vorschau auch die gespeicherte Geometrie.

Funktioniert das Ergebnis in jeder Schneideanwendung? Dieser Browsertest belegt das nicht. Prüfe die importierte Geometrie und die Operationen im vorgesehenen Ziel und führe anschließend die passende Produktionsprüfung durch.

Quellen

1. MDN: SVG clipPath — Clipping beeinflusst die Darstellung, ohne die Geometrie des referenzierten Elements zu verändern.
2. Paper.js: PathItem — Schnittmengenergebnisse und flächenbasierte boolesche Optionen.
3. Paper.js: Project — SVG-Import, Projektinhalt, Exportgrenzen und numerische Genauigkeit.

Brauchst du Pfade aus einer Clipart-Quelle, die nur als Bitmap vorliegt? Bereite einen SVG-Kandidaten vor, prüfe seine Löcher und Füllungen, schneide dann eine separate Arbeitskopie zu und öffne das gespeicherte Ergebnis vor der Übergabe erneut.