Como manter apenas as partes visíveis de todos os objetos / caminhos de uma imagem SVG? Como "achatar" todo o SVG

Eu tenho uma imagem SVG com muitos objetos, outros sobre outros. O que eu preciso é de um SVG final, com o mesmo resultado visual, mas de uma maneira que eu possa alterar a opacidade de qualquer objeto sem revelar as partes ocultas dos outros objetos, revelando apenas o "buraco" por trás.

Eu fiz este diagrama para ilustrar minha pergunta:

Fiz o exemplo acima manualmente com o Inkscape, selecionando todos os quadrados e duplicando-o tantas vezes quanto o número de diferenças ( ctrl+ -) que preciso aplicar para "recortar" os objetos subjacentes. Este método é muito difícil de aplicar com uma quantidade maior de objetos.

Qualquer software (Adobe Illustrator, ferramenta de linha de comando ...) ou método que resolva esse problema será bem-vindo.

No Illustrator:

Se não houver transparência ...

... selecione as formas e use o 'Trim'botão na Pathfinderjanela.

O Trim pode agir de maneira estranha com objetos que têm transparência, ...

Se não é transparência ...

... selecione os quadrados e Object > Flatten Transparencydefina 'vetores' como 100%.

Imagem que ilustra essa outra questão :

Às vezes, Flatten Transparencydeixa o objeto inferior sem cortes, sentado embaixo de todo o resto. Se isso acontecer, como Flatten Transparencytodas as formas vetoriais têm 100% de opacidade, basta selecionar a forma inferior e as formas que se sobrepõem e usar Trimcomo acima.

Salve como SVG, se precisar de SVG. Para evitar o problema de arestas coincidentes que Ilmari Karonen descreve, você pode usar Object > Transform > Transform Eacha escala de cada objeto para dizer 100,5% em torno de seu próprio centro. Ou você pode dar a cada objeto um traço muito fino de sua própria cor de preenchimento (provavelmente uma abordagem melhor, pois, idealmente, a pequena sobreposição deve ser a mesma para tudo, não proporcional ao tamanho).

Tenho uma ideia, embora tenha certeza de que há uma maneira melhor.

Usando o Inkscape

1. Posicione seus objetos e defina a cor de cada objeto onde nenhuma da mesma cor estiver tocando (use o mínimo possível de cores); você as alterará mais tarde.
2. Edit -> Preferencespróximo à parte inferior da seleção, selecione Bitmapsdefinir Resolution (256)e fechar.
3. selecione todos os seus objetos e depois Edit -> Make a Bitmap copy(levará um tempo para gerar a imagem).
4. Path -> Trace Bitmapapenas na marca Mode tapdefinida .Multiple scan: Scans (6, one for each color used plus one for background), Colors (on)Remove background
5. No Options tabdesmarcar tudo! Enviar OK.
6. Right clickno grupo, selecione Ungroup.
7. Agora selecione todos os seus objetos e Path -> Break Apart.
8. E agora você pode mudar suas cores para ficar bonita!

Pode ser necessário excluir algumas linhas perdidas.

Certifique-se de colocar as Resolutioncostas! E deixe-me saber se funciona para você.

Um problema ao tentar fazer o que você pede em primeiro lugar é que suas formas terão bordas coincidentes. Quando renderizadas, essas arestas geralmente aparecem como se houvesse um espaço estreito entre as formas, permitindo que o fundo brilhasse um pouco.

Há duas razões pelas quais isso acontece - anti-aliasing e roundoff:

• Primeiro, a maioria dos renderizadores SVG usa uma implementação de suavização de serrilhada na qual os pixels ao longo da borda de uma forma são desenhados como parcialmente transparentes, com a quantidade de transparência determinada pela quantidade de cada pixel que a forma se sobrepõe. Isso normalmente produz excelentes resultados, mas não é perfeito, e uma situação que pode expor suas imprecisões é quando as arestas de duas formas coincidem exatamente.

  Para ver por que isso acontece, imagine um pixel no qual metade é coberta por, digamos, uma forma vermelha, e exatamente a metade oposta é coberta por uma forma verde, com as duas formas sendo desenhadas sobre um fundo azul. Com um renderizador "perfeito", esse pixel seria 50% vermelho e 50% verde, sem que o azul seja exibido. No entanto, o que acontece com um renderizador real é que ele primeiro desenha, digamos, a forma vermelha, deixando o pixel 50% vermelho e 50% azul. Em seguida, a forma verde é desenhada sobre esse plano de fundo, fazendo com que metade da mistura original de cores seja substituída por verde, deixando o pixel 25% vermelho, 50% verde e 25% azul.

• A outra razão pela qual arestas coincidentes podem ser problemáticas é que os renderizadores geralmente usam matemática de ponto flutuante, que está sujeita a pequenos erros de arredondamento. Assim, mesmo que as arestas devam coincidir exatamente, as imprecisões no cálculo podem mudar um pouco o caminho real, deixando uma pequena lacuna. (Esse é um problema maior com a renderização em 3D, onde essas questões numéricas podem deixar o renderizador incerto sobre qual das duas superfícies coincidentes deve ser desenhada na frente da outra, mas também pode afetar a renderização em 2D.)

Em princípio, o problema de suavização de serrilhado poderia ser evitado renderizando inicialmente a imagem inteira em uma resolução muito alta (digamos, cerca de 16 vezes maior que a resolução de destino em cada direção) sem suavização de borda e, em seguida, redimensionando-a para suavizar a imagem. arestas. No entanto, esse seria um método de renderização muito caro comparado com a renderização SVG sem serrilhado padrão, e é por isso que não é normalmente usado. Além disso, ainda não resolveria completamente os problemas com precisão numérica.

Assim, a solução prática é evitar arestas coincidentes sempre que possível. Desde que você verifique se as formas adjacentes se sobrepõem suficientemente, o algoritmo padrão de suavização de serrilhado funcionará bem e você não verá lacunas aparentes entre as formas.