SVG画像のすべてのオブジェクト/パスの可視部分のみを保持する方法は？すべてのSVGを「平坦化」するように

私は多くのオブジェクトを含むSVG画像を他のオブジェクトの上に持っています。私が必要としているのは、最終的なSVGで、同じ視覚的結果ですが、他のオブジェクトの隠された部分を明らかにせず、背後の「穴」だけを明らかにすることなく、オブジェクトの不透明度を変更できます。

私がやったこの図が私の質問を説明するために：

上記の例をInkscapeで手動で実行し、すべての正方形を選択し、基礎となるオブジェクトを「カット」するために適用する必要がある差異の数（ctrl+ -）だけ複製します。この方法を大量のオブジェクトに適用するのは非常に困難です。

この問題を解決する任意のソフトウェア（Adobe Illustrator、コマンドラインツールなど）または方法を歓迎します。

Illustratorの場合：

透明度がない場合...

...形状を選択'Trim'し、Pathfinderウィンドウのボタンを使用します。

トリムは透明度のあるオブジェクトで奇妙に動作する可能性があるので...

場合がある透明性が...

...正方形を選択し、Object > Flatten Transparency「ベクトル」を100％に設定します。

この他の質問からそれを説明する画像：

ときどき、Flatten Transparency一番下のオブジェクトをカットせずに、他のすべてのものの下に置きます。これが発生した場合、Flatten Transparencyすべてのベクトル図形の不透明度が100％になった後、その下の図形とそれと重なる図形を選択してTrim、上記のように使用できます。

次に、SVGが必要な場合は、SVGとして保存します。Ilmari Karonenが説明する一致エッジ問題を回避するために、Object > Transform > Transform Each各オブジェクトを自身の中心の周りに100.5％とスケールするのに使用できます。または、各オブジェクトに独自の塗りつぶし色の非常に細いストロークを与えることもできます（理想的には、オーバーラップの小さな部分がすべて同じで、サイズに比例しないため、より良いアプローチです）。

私にはアイデアがありますが、もっと良い方法があると確信しています。

Inkscapeの使用

1. オブジェクトを配置し、同じオブジェクトの色が接触しないように各オブジェクトの色を設定します（できるだけ少ない色を使用）。これらは後で変更します。
2. Edit -> Preferences選択の下部近くで、BitmapsセットResolution (256)を選択して閉じます。
3. 次に、すべてのオブジェクトを選択しますEdit -> Make a Bitmap copy（画像の生成には少し時間がかかります）。
4. Path -> Trace Bitmap中にMode tapセットMultiple scan: Scans (6, one for each color used plus one for background), Colors (on)マークのみRemove background。
5. ではOptions tab、非マークのすべて！提出してくださいOK。
6. Right clickグループで、を選択しますUngroup。
7. 次に、すべてのオブジェクトを選択しますPath -> Break Apart。
8. そして今、あなたはあなたの色をきれいに見えるように変えることができます！

一部の迷線を削除する必要がある場合があります。

必ずResolution後ろにセットしてください。そしてそれがあなたのために働くかどうか私に知らせてください。

そもそも求めていることを行おうとする場合の問題は、形状が一致するエッジになることです。レンダリングすると、そのようなエッジは、形状間に狭いギャップがあるかのように表示されることが多く、背景が少し透けて見えます。

これが発生する理由は2つあります。アンチエイリアスと丸めです。

• まず、ほとんどのSVGレンダラーは、アンチエイリアスの実装を使用します。この場合、図形のエッジに沿ったピクセルは部分的に透明として描画され、透明度は各ピクセルのどの程度図形がオーバーラップするかによって決まります。これは通常、優れた結果を生成しますが、完全ではありません。その不正確さを露呈する可能性がある1つの状況は、2つの形状のエッジが偶然に一致する場合です。

  これが発生する理由を確認するために、半分がたとえば赤のシェイプで覆われ、反対側の半分が緑のシェイプで覆われているピクセルを想像してください。これらのシェイプは両方とも青い背景に描画されています。「完全な」レンダラーを使用すると、このピクセルは50％赤と50％緑になり、青は透けて見えません。ただし、実際のレンダラーで何が起こるかというと、最初に赤い形状が描画され、ピクセルが50％赤と50％青になります。次に、その背景の上に緑色の図形が描画され、元の色の混合の半分が緑色に置き換えられ、ピクセルは赤25％、緑50％、青25％になります。

• 一致するエッジが問題となる可能性があるもう1つの理由は、レンダラーが通常浮動小数点演算を使用するため、小さな丸め誤差が発生するためです。したがって、エッジが正確に一致すると想定されていても、エッジの計算の不正確さにより実際のパスが少し変更され、小さなギャップが残る場合があります。（これは3Dレンダリングの大きな問題です。このような数値の問題により、2つの一致するサーフェスのどちらを他方の前面に描画するかについてレンダラーが不明確になる可能性がありますが、2Dレンダリングにも影響する可能性があります。）

原則として、アンチエイリアシングの問題は、最初にアンチエイリアシングを行わずに画像全体を非常に高い解像度（たとえば、各方向のターゲット解像度よりも約16倍高い）でレンダリングし、次にそれを縮小してエッジ。ただし、これは標準のアンチエイリアス処理されたSVGレンダリングと比較して非常に高価なレンダリング方法になるため、通常は使用されません。また、数値の精度に関する問題はまだ完全には解決しません。

したがって、実際的な解決策は、可能な場合はエッジの一致を避けることです。隣接するシェイプが十分に重なっていることを確認している限り、標準のアンチエイリアスアルゴリズムは正常に動作し、シェイプ間に明らかなギャップは見られません。