¿Cómo mantener solo las partes visibles de cada objeto/ruta de una imagen SVG? Como "aplanar" todo el SVG

En ilustrador:

Si no hay transparencia...

...seleccione las formas, luego use el 'Trim'botón en la Pathfinderventana.

El recorte puede actuar de manera extraña con objetos que tienen transparencia, así que...

Si hay transparencia ...

... seleccione los cuadrados, luego Object > Flatten Transparency, establezca 'vectores' al 100%.

Imagen que lo ilustra de esta otra pregunta :

A veces, Flatten Transparencydeja el objeto inferior sin cortar, debajo de todo lo demás. Si esto sucede, luego de que Flatten Transparencytodas sus formas vectoriales tengan una opacidad del 100%, puede seleccionar esa forma inferior y las formas que se superponen y usar Trimcomo se indica arriba.

Luego guarde como SVG, si necesita SVG. Para evitar el problema de los bordes coincidentes que describe Ilmari Karonen, podría Object > Transform > Transform Eachescalar cada objeto para decir 100.5% alrededor de su propio centro. O bien, podría dar a cada objeto un trazo muy fino de su propio color de relleno (probablemente un mejor enfoque ya que, idealmente, la pequeña superposición debería ser la misma para todo, no proporcional al tamaño).

Tengo una idea, aunque estoy seguro de que hay una mejor manera.

Uso de Inkscape

1. Coloque sus objetos y asegúrese de configurar el color de cada objeto donde ninguno del mismo color se toque, (use la menor cantidad de colores posible) los cambiará más tarde.
2. Edit -> Preferencescerca de la parte inferior de la selección, seleccione Bitmapsestablecer Resolution (256)y cerrar.
3. seleccione todos sus objetos, luego Edit -> Make a Bitmap copy(tomará un poco de tiempo generar la imagen).
4. Path -> Trace Bitmapen la marca Mode tapestablecida Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)solamente Remove background.
5. En el Options tabdesmarque todo! enviar OK_
6. Right clicken el grupo, seleccione Ungroup.
7. Ahora seleccione todos sus Objetos, y Path -> Break Apart.
8. ¡Y ahora puedes cambiar tus colores para lucir bonita!

Es posible que deba eliminar algunas líneas sueltas.

¡Asegúrate de poner la Resolutionparte de atrás!. Y déjame saber si te funciona.

Un problema al tratar de hacer lo que pides en primer lugar es que tus formas terminarán con bordes coincidentes. Cuando se renderizan, dichos bordes a menudo aparecerán como si hubiera un espacio estrecho entre las formas, lo que permite que el fondo brille un poco.

Hay dos razones por las que esto sucede: suavizado y redondeo:

• En primer lugar, la mayoría de los renderizadores de SVG utilizan una implementación de suavizado en la que los píxeles a lo largo del borde de una forma se dibujan como parcialmente transparentes, con la cantidad de transparencia determinada por la cantidad de cada píxel que se superpone a la forma. Esto normalmente produce excelentes resultados, pero no es perfecto, y una situación que puede exponer sus imprecisiones es cuando los bordes de dos formas coinciden exactamente.

  Para ver por qué sucede esto, imagina un píxel cuya mitad está cubierta, digamos, por una forma roja, y exactamente la mitad opuesta está cubierta por una forma verde, con ambas formas dibujadas sobre un fondo azul. Con un renderizador "perfecto", este píxel sería 50 % rojo y 50 % verde, sin mostrar el azul. Sin embargo, lo que sucede con un renderizador real es que primero dibuja, digamos, la forma roja, haciendo que el píxel sea 50% rojo y 50% azul. Luego, la forma verde se dibuja sobre ese fondo, lo que hace que la mitad de su mezcla de colores original se reemplace con verde, dejando el píxel 25 % rojo, 50 % verde y 25 % azul.

• La otra razón por la que los bordes coincidentes pueden ser problemáticos es que los renderizadores suelen utilizar matemáticas de coma flotante, que están sujetas a pequeños errores de redondeo. Por lo tanto, aunque se supone que los bordes coinciden exactamente, las imprecisiones al calcularlos pueden cambiar un poco su camino real, dejando un pequeño espacio. (Este es un problema mayor con el renderizado 3D, donde tales problemas numéricos pueden hacer que el renderizador no esté seguro de cuál de las dos superficies coincidentes debe dibujarse frente a la otra, pero también puede afectar el renderizado 2D).

En principio, el problema del suavizado podría evitarse renderizando inicialmente toda la imagen a una resolución muy alta (digamos, unas 16 veces más alta que la resolución objetivo en cada dirección) sin suavizado y luego reduciéndola para suavizar la bordes Sin embargo, este sería un método de renderizado muy costoso en comparación con el renderizado SVG estándar suavizado, por lo que normalmente no se usa. Además, todavía no resolvería por completo los problemas con la precisión numérica.

Por lo tanto, la solución práctica es evitar los bordes coincidentes cuando sea posible. Siempre que se asegure de que las formas adyacentes se superpongan lo suficiente, el algoritmo de suavizado estándar funcionará bien y no verá espacios aparentes entre las formas.