A exportação SVG do Illustrator CC distorce os caminhos

8

Estou tentando criar alguns ícones para adicionar à biblioteca Glyphicons.

Eu os criei usando a ferramenta caneta (formas) no Adobe Illustrator CC, eles são ultra básicos. Como PNG ou EPS, eles exportam bem. Infelizmente, preciso da exportação SVG para usar com Glyphicons.

Quando exporto para SVG, as formas parecem se mover. Pelo menos eles não permanecem como aparecem na minha tela.

Como posso fazê-los aparecer como no ilustrador?

Este é um PNG do ilustrador interno. insira a descrição da imagem aqui

Este é um PNG da visualização, este é o SVG. As formas são claramente organizadas de forma diferente.

Claramente, as formas estão se desalinhando após a exportação. Existem razões óbvias para isso? Todas as minhas configurações de exportação são definidas como padrão.

adobe-illustrator svg cc-2014 Andrew Peachey
fonte
você poderia fornecer algumas informações detalhadas sobre como a geometria pode criar uma imagem em que todos os objetos são selecionados para ver as âncoras. Também para números redondos use grid
joojaa 28/05

Respostas:

15

Altere "Casas decimais" para 3 na caixa de diálogo "Opções de SVG" que aparece ao salvar como SVG:

captura de tela

Vic
fonte
1

Este é um erro comum no arquivo .SVG. Isso ocorre porque as curvas rígidas (curvas feitas com apenas duas âncoras e alças longas) não podem ser processadas corretamente pelo navegador.

A melhor coisa a fazer é dividir seu caminho em segmentos menores, especialmente em torno da âncora que tem o problema.

Basta ir para Object > Path > Add Anchor Points

hsawires
fonte
Isso não parecia ter efeito algum. Além disso, li em algum lugar que você deve tentar manter o número mínimo possível de pontos de ancoragem para ajudar nos tempos de carregamento da renderização móvel de SVG. Isso é total absurdo, ou é uma espécie de ato de equilíbrio?
Andrew Peachey
0

Costumo obter os melhores resultados com meus salvamentos SVG quando as coordenadas dos meus objetos têm valores decimais limpos. Por exemplo, um objeto em X = 100.452 seria movido para X = 100.5. Eu experimentei pequenos movimentos semelhantes ao seu problema ao deixar objetos em coordenadas com partes fracionárias confusas.

Alan
fonte
Interessante, como você consegue isso. Deve ser uma dor certa posicionar as coisas com tanta precisão?
Andrew Peachey
@AndrewPeachey Não é muito difícil. Basta clicar no objeto e clicar nas setas para cima ou para baixo ao lado da posição para arredondar para o próximo número.
287 Alan
Ah Claro. Faz sentido. Saúde, investigará.
Andrew Peachey
Se você estiver animando um SVG, isso acelera, mantendo-o em um pixel. É mais difícil para os computadores calcular números de ponto flutuante. E mais difícil para os monitores adivinharem se deve 1 pixel à esquerda ou à direita.
Lex
0

Solução encontrada.

Claramente, essa não é a solução mais bonita, limpa e bonita, mas funciona excepcionalmente bem.

Meu processo:
1. Desenhe o ícone no Illustrator
2. Salve como arquivo .ai
3. Abra .ai no OSX iDraw
4. Exporte para SVG do iDraw

Solução simples:
1. Desenhe o ícone no iDraw
2. Exporte para SVG a partir do iDraw

Espero que isso ajude outras pessoas

Andrew Peachey
fonte
0

Também estou tendo problemas para exportar e tentei:

File> Save as

ao invés de:

File> Export> Export as.

E isso parecia fazer o truque!

Kirrilee
fonte
-1

Como eu descubro esse problema, só aparece se você exportar "somente selecionado". Quando o exportador não vê bordas (página), isso gera algo errado com as curvas.

Daniel UU
fonte