Recadrer un SVG définitivement, sans tracés cachés

Pour recadrer définitivement un visuel SVG rempli, calcule l'intersection de chaque forme voulue avec la zone de recadrage, puis exporte uniquement la géométrie obtenue. Conserve séparément un fichier maître modifiable. Une viewBox plus petite ou un chemin d'écrêtage peut modifier ce que tu vois tout en laissant les tracés extérieurs d'origine dans le fichier.

Notre exemple utilise quatre objets polygonaux originaux, opaques et fermés, ainsi qu'un recadrage rectangulaire. Un objet contient une véritable ouverture. Nous recadrons les objets séparément pour conserver leurs remplissages et leur ordre de dessin, enregistrons le résultat en SVG, puis rouvrons ce véritable fichier pour le vérifier. C'est un processus géométrique délimité, pas une méthode générale pour recadrer tous les effets SVG ou produire des fichiers de découpe testés.

Décider si le visuel doit être caché ou supprimé

L'écrêtage est utile si tu veux ajuster le recadrage plus tard. La référence MDN sur l'écrêtage distingue le résultat rendu de la géométrie sous-jacente de l'élément. Supprimer la relation d'écrêtage peut révéler à nouveau le visuel d'origine.

Un recadrage permanent modifie la géométrie que tu livres. Utilise-le lorsque la personne suivante a besoin des formes délimitées elles-mêmes, tout en gardant la source non recadrée comme fichier maître séparé.

Supprimer tous les éléments invisibles est une autre tâche. Une forme d'écrêtage, une ressource de masque ou un symbole référencé peut être nécessaire même sans être dessiné directement. Notre guide des chemins d'écrêtage et des masques explique ces relations de rendu ; le guide des coordonnées d'écrêtage traite de leurs systèmes de coordonnées.

Partir de remplissages fermés identifiables

Il te faut une source modifiable, une zone de recadrage définie et un moyen d'inspecter le SVG enregistré. Cet exemple exécute Paper.js 0.12.18 dans un navigateur. Il traite des remplissages polygonaux unis, entièrement opaques et sans contour. Les opérandes sont des objets Path ou CompoundPath, pas des groupes importés arbitraires.

Notre source contient un cadre bleu-vert avec une ouverture rectangulaire, un triangle orange, un losange violet et un petit objet jaune entièrement hors du recadrage. Le rectangle de recadrage commence à (60, 40) et mesure 160 × 120 unités utilisateur SVG. Ce sont des coordonnées de création, pas des dimensions physiques d'impression.

L'ouverture du cadre appartient à un tracé composé. Ne sépare pas ses contours en objets remplis indépendants simplement pour les parcourir dans une boucle. Le guide des trous SVG explique pourquoi une tache blanche et une véritable ouverture transparente se comportent différemment.

Enregistre ce fichier de test original sous 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>

Calculer l'intersection de chaque objet et ne garder que son résultat

Une intersection conserve l'aire commune à l'objet et au recadrage. La documentation de intersect() de Paper.js décrit un nouvel élément de tracé contenant cette intersection. Ici, trace: true traite les deux opérandes comme des surfaces. Cette option concerne la géométrie booléenne ; elle ne convertit pas un visuel matriciel en vecteurs. Nous utilisons insert: false pour que ni le fichier maître importé ni l'objet d'aide au recadrage n'entre automatiquement dans la scène exportée.

Pour reproduire l'exemple localement, installe la version figée de la bibliothèque dans un dossier de travail vide :

npm install --save-exact paper@0.12.18

Enregistre ceci sous index.html, à côté de source.svg et du fichier crop.js ci-dessous :

<!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>

Enregistre ceci sous crop.js. Sers le dossier avec un serveur HTTP local et ouvre index.html ; le script récupère le fichier SVG voisin.

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

La liste explicite des noms suit l'ordre de dessin de cette source. Chaque résultat conservé reçoit son propre remplissage uni et est ajouté dans cet ordre. Réunir d'abord tout le visuel en une seule silhouette ferait perdre les zones de couleur séparées que nous voulons garder. Notre guide des opérations booléennes Paper.js traite de l'autre tâche, celle de l'union et de la soustraction.

L'objet jaune entièrement extérieur donne une intersection vide et est omis. Le petit seuil d'aire n'est qu'une protection pour ce fichier de test, pas une autorisation de supprimer les détails fins de n'importe quel visuel.

Nous translatons la géométrie conservée de (-60, -40) et l'exportons dans une fenêtre de 160 × 120 commençant à zéro. Cette translation change l'origine des coordonnées de sortie. C'est l'intersection qui supprime la géométrie extérieure indésirable ; changer seulement l'origine ou la fenêtre ne le ferait pas. La référence d'export de projet de Paper.js documente les limites explicites et la précision numérique utilisées ici.

Enregistrer, rouvrir et inspecter le véritable SVG

Copie exactement le balisage SVG affiché dans cropped.svg. Ouvre ce fichier enregistré indépendamment, au lieu de te fier uniquement à l'aperçu en mémoire du programme. Pour notre test, une page séparée a chargé le fichier enregistré, l'a importé dans un nouveau contexte Paper.js et l'a affiché via le moteur de rendu d'images SVG du navigateur.

Les contrôles distinguent la structure du fichier, la géométrie et l'apparence :

• Le SVG exporté contient trois éléments de tracé résultants, avec quatre contours fermés puisque le cadre conserve son ouverture.
• L'objet d'aide au recadrage, les identifiants d'objets d'origine, les chemins d'écrêtage, les masques, les images matricielles et les éléments d'effet sont absents de cette sortie contrôlée.
• Chaque contour rouvert est fermé et possède des segments droits. Tous ses sommets se trouvent dans la zone de sortie de 0…160 par 0…120, avec une tolérance de 0.00001 unité utilisateur.
• L'ouverture voulue reste hors de la géométrie remplie et transparente dans le fichier rendu. La zone orange apparaît toujours au-dessus du bleu-vert au point de chevauchement vérifié.
• Une comparaison de rendu dans le navigateur confronte l'aperçu avec écrêtage seul au fichier recadré à la même taille, séparément de l'inspection géométrique.

Pour cette zone rectangulaire et ce fichier de test à segments droits, vérifier tous les sommets et les arêtes de fermeture établit que les contours enregistrés restent dans la zone. Une courbe avec poignées ou un recadrage concave exige un autre contrôle de confinement ; quelques points échantillonnés ne prouveraient pas le même résultat.

Notre comparaison d'images utilise une image matricielle de 640 × 480 et une tolérance déclarée de 0,5 % de pixels modifiés lorsqu'un canal diffère de plus de un. Le rendu du fichier enregistré différait sur 77 des 307 200 pixels, soit environ 0,0251 %, et a donc réussi ce critère. Il n'était pas identique au pixel près : le plus grand écart sur un canal individuel était de 255. C'est une tolérance de comparaison visuelle, pas la tolérance géométrique. L'anticrénelage près d'un bord et un véritable tracé extérieur conservé sont deux problèmes différents.

Cette opération supprime la géométrie hors du recadrage. Elle ne supprime pas tous les chevauchements entre les objets colorés conservés. Ces chevauchements internes restent dans l'ordre de dessin ; le point contrôlé confirme la couleur supérieure voulue. Aplatir tous les chevauchements peints cachés serait une tâche distincte.

S'arrêter lorsque le visuel exige une autre représentation

Cet exemple n'établit pas la prise en charge des lignes médianes ouvertes, des contours, des opérandes courbes, des dégradés, des masques progressifs, des images matricielles, des filtres, des empilements d'écrêtages imbriqués arbitraires ou des peintures translucides qui se chevauchent. Ne retire pas ces caractéristiques en supposant que l'apparence est conservée.

Un parcours avec contour et la forme remplie correspondant à ce contour sont des géométries différentes. Si le travail exige la surface visible du contour sous forme remplie, prépare et inspecte une copie dont le contour est vectorisé dans un éditeur approprié avant de choisir un processus booléen. Garde le contour d'origine si la possibilité de le modifier compte. Un masque progressif ne peut pas être remplacé par une intersection nette en conservant tous ses bords estompés.

Pour une modification ponctuelle, un éditeur vectoriel peut être plus simple pour sélectionner et inspecter les objets nécessaires. Quel que soit l'outil choisi, vérifie les trous, les couleurs et les limites du résultat enregistré. La précision d'export et les détails très petits méritent une attention particulière avant l'utilisation suivante.

Récupérer le visuel vectoriel manquant seulement si nécessaire

Si la source est un SVG modifiable existant, recadre directement sa géométrie. S'il ne reste qu'une image clipart matricielle appropriée et qu'il te faut des formes modifiables, le processus clipart de PerfectVector peut d'abord créer un SVG candidat. Inspecte les contours récupérés, les ouvertures et les remplissages séparés avant de recadrer. La vectorisation crée des tracés à partir de pixels ; elle n'identifie pas la limite de recadrage souhaitée et ne valide pas le résultat booléen. Notre fichier de test original a été créé directement, sans vectorisation.

Conserve une illustration matricielle si sa texture est nécessaire et que le format livré prend en charge le recadrage matriciel voulu. Un recadrage vectoriel est utile parce que l'étape suivante exige de la géométrie, pas parce que toute image doit devenir un SVG.

Terminer le recadrage sans perdre le fichier maître

1. Conserve le fichier maître non recadré et identifie les objets fermés remplis visés.
2. Définis le recadrage dans le même contexte de coordonnées que ces objets.
3. Calcule l'intersection de chaque objet, conserve son style testé et son ordre de dessin, et exclus les aides et les originaux de la scène livrée.
4. Exporte uniquement la géométrie retenue avec des limites et une précision choisies délibérément.
5. Rouvre le fichier enregistré et vérifie séparément ses tracés réels, ses ouvertures, son apparence et sa destination prévue.

Le recadrage délimité est terminé lorsque le fichier enregistré contient la géométrie voulue dans la zone et conserve les relations nécessaires entre trous et couleurs. Si de la géométrie extérieure reste, vérifie si tu as exporté le contenu d'origine du projet ou seulement modifié un écrêtage ou une fenêtre d'affichage. Si une ouverture se remplit, contrôle le tracé composé et la règle de remplissage avant de combiner davantage d'objets.

Nous avons effectué la tâche sur fichier enregistré pour le test polygonal original. Nous ne l'avons pas importé dans une application de découpe, testé en sortie physique ou utilisé pour établir une garantie générale de compatibilité SVG.

FAQ

L'écrêtage d'un SVG supprime-t-il définitivement ses tracés extérieurs ? L'écrêtage limite le rendu tout en conservant la géométrie référencée. Un recadrage géométrique permanent exige une opération de tracé appropriée et un export ne contenant que les résultats.

Puis-je recadrer toutes les couleurs en réunissant d'abord les formes ? Une seule union peut faire perdre les zones de remplissage séparées que tu voulais conserver. Cet exemple calcule séparément l'intersection de chaque objet rempli uni et préserve l'ordre de dessin de la source.

Une viewBox plus petite supprime-t-elle le visuel caché ? Elle change la correspondance de la fenêtre d'affichage et la zone affichée. Elle ne supprime pas à elle seule les tracés sources hors de cette zone. Inspecte la géométrie enregistrée en plus de l'aperçu.

Le résultat fonctionnera-t-il dans toutes les applications de découpe ? Ce test dans le navigateur ne l'établit pas. Inspecte la géométrie importée et les opérations dans la destination prévue, puis effectue le contrôle de production approprié.

Sources

1. MDN : SVG clipPath — L'écrêtage affecte le rendu sans changer la géométrie de l'élément référencé.
2. Paper.js : PathItem — Résultats d'intersection et options booléennes fondées sur les surfaces.
3. Paper.js : Project — Import SVG, contenu du projet, limites d'export et précision numérique.

Besoin de tracés à partir d'un clipart disponible seulement en bitmap ? Prépare un SVG candidat, inspecte ses trous et ses remplissages, puis recadre une copie de travail séparée et rouvre le résultat enregistré avant de le livrer.