Comment conserver uniquement les parties visibles de chaque objet / chemin d'une image SVG? Comme "aplatir" tous les SVG

J'ai une image SVG avec de nombreux objets, les uns sur les autres. Ce dont j'ai besoin est un SVG final, avec le même résultat visuel, mais d'une manière que je pourrais changer l'opacité de n'importe quel objet sans révéler les parties cachées des autres objets, révélant juste le "trou" derrière.

J'ai fait ce diagramme pour illustrer ma question:

J'ai fait l'exemple ci-dessus à la main avec Inkscape, en sélectionnant chaque carré et en le dupliquant autant de fois que le nombre de différences ( ctrl+ -) que j'ai besoin d'appliquer pour "couper" les objets sous-jacents. Cette méthode est très difficile à appliquer avec une plus grande quantité d'objets.

Tout logiciel (Adobe Illustrator, outil de ligne de commande ...) ou méthode qui résout ce problème sera le bienvenu.

Sur Illustrator:

S'il n'y a pas de transparence ...

... sélectionnez les formes, puis utilisez le 'Trim'bouton dans la Pathfinderfenêtre.

Le découpage peut agir étrangement avec des objets transparents, donc ...

S'il est la transparence ...

... sélectionnez les carrés, puis Object > Flatten Transparencydéfinissez les «vecteurs» à 100%.

Image l'illustrant de cette autre question :

Parfois, Flatten Transparencylaisse l'objet inférieur non coupé, assis sous tout le reste. Si cela se produit, alors qu'après que Flatten Transparencytoutes vos formes vectorielles ont une opacité de 100%, vous pouvez simplement sélectionner cette forme inférieure et les formes qui la chevauchent et utiliser Trimcomme ci-dessus.

Enregistrez ensuite en SVG, si vous avez besoin de SVG. Pour éviter le problème des bords coïncidents décrit par Ilmari Karonen, vous pouvez utiliser Object > Transform > Transform Eachpour mettre à l'échelle chaque objet pour dire 100,5% autour de son propre centre. Ou, vous pouvez donner à chaque objet un trait très fin de sa propre couleur de remplissage (probablement une meilleure approche car, idéalement, le tout petit chevauchement devrait être le même pour tout, non proportionnel à la taille).

J'ai une idée, mais je suis sûr qu'il existe une meilleure façon.

Utilisation d'Inkscape

1. Placez vos objets et assurez-vous de définir la couleur de chaque objet là où aucune de la même couleur ne se touche, (utilisez le moins de couleurs possible), vous les modifierez plus tard.
2. Edit -> Preferencesprès du bas de la sélection, sélectionnez Bitmapsdéfinir Resolution (256)et fermer.
3. sélectionnez tous vos objets, puis Edit -> Make a Bitmap copy(il faudra un peu de temps pour générer l'image).
4. Path -> Trace Bitmapdans le repère Mode tapdéfini Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)uniquement Remove background.
5. Dans le Options tabtout-démarquer! Soumettre OK.
6. Right clicksur le groupe, sélectionnez Ungroup.
7. Sélectionnez maintenant tous vos objets et Path -> Break Apart.
8. Et maintenant, vous pouvez changer vos couleurs pour être jolies!

Vous devrez peut-être supprimer certaines lignes parasites.

Assurez-vous de mettre le Resolutiondos!. Et faites-moi savoir si cela fonctionne pour vous.

Un problème lorsque vous essayez de faire ce que vous demandez en premier lieu est que vos formes se retrouveront avec des bords coïncidents. Lors du rendu, ces bords apparaissent souvent comme s'il y avait un espace étroit entre les formes, permettant à l'arrière-plan de briller un peu.

Il y a deux raisons à cela: l'anticrénelage et l'arrondi:

• Tout d'abord, la plupart des rendus SVG utilisent une implémentation d'anticrénelage dans laquelle les pixels le long du bord d'une forme sont dessinés comme partiellement transparents, la quantité de transparence étant déterminée par la quantité de chaque pixel sur laquelle la forme se chevauche. Cela produit généralement d'excellents résultats, mais ce n'est pas parfait, et une situation qui peut révéler ses inexactitudes est lorsque les bords de deux formes coïncident exactement.

  Pour voir pourquoi cela se produit, imaginez un pixel dont la moitié est recouverte, disons, d'une forme rouge, et exactement la moitié opposée est recouverte d'une forme verte, ces deux formes étant dessinées sur un fond bleu. Avec un rendu "parfait", ce pixel serait 50% rouge et 50% vert, sans bleu visible. Cependant, ce qui se passe avec un rendu réel, c'est qu'il dessine d'abord, disons, la forme rouge, ce qui rend le pixel 50% rouge et 50% bleu. Ensuite, la forme verte est dessinée au-dessus de ce fond, provoquant le remplacement de la moitié de son mélange de couleurs d'origine par du vert, laissant le pixel 25% rouge, 50% vert et 25% bleu.

• L'autre raison pour laquelle les arêtes coïncidentes peuvent être problématiques est que les moteurs de rendu utilisent généralement des calculs à virgule flottante, qui sont sujets à de petites erreurs d'arrondi. Ainsi, même si les bords sont censés coïncider exactement, des imprécisions dans leur calcul peuvent modifier légèrement leur trajectoire réelle, laissant un petit espace. (Il s'agit d'un problème plus important avec le rendu 3D, où de tels problèmes numériques peuvent laisser le rendu incertain quant à laquelle des deux surfaces coïncidentes doivent être dessinées devant l'autre, mais cela peut également affecter le rendu 2D.)

En principe, le problème de l'anticrénelage pourrait être évité en rendant initialement l'image entière à une résolution très élevée (disons environ 16 fois supérieure à la résolution cible dans chaque direction) sans anticrénelage, puis en la réduisant pour lisser la bords. Cependant, ce serait une méthode de rendu très coûteuse par rapport au rendu SVG anti-aliasé standard, c'est pourquoi il n'est normalement pas utilisé. De plus, cela ne résoudrait pas entièrement les problèmes avec une précision numérique.

Ainsi, la solution pratique est d'éviter autant que possible les bords coïncidents. Tant que vous vous assurez que toutes les formes adjacentes se chevauchent suffisamment, l'algorithme d'anti-aliasing standard fonctionnera correctement et vous ne verrez aucun écart apparent entre les formes.