Configurações ideais para exportar SVGs para a Web a partir do Illustrator?

Estou procurando usar um logotipo SVG para um site - para torná-lo ótimo em um design responsivo para todos os dispositivos.

Mas, como existem problemas , desejo oferecer suporte ao maior número de dispositivos e navegadores possível. A velocidade da carga também é uma consideração importante. Como as configurações de exportação no Adobe Illustrator se encaixam nisso tudo?

No Illustrator, existem várias opções para exportação SVG. Em primeiro lugar, qual é o melhor perfil SVG?

Presumo que o SVG Tiny tenha um tamanho de arquivo menor? Muitos dispositivos suportam SVG Tiny? Quais são as diferenças mais importantes? (Sem ter que ler esse monstro W3 .)

Em segundo lugar, suponho que a melhor opção para a localização da imagem seja "link"? (Veja a descrição após o ponto de exclamação.)

Como alternativa, como é o suporte do navegador para a opção "incorporar"?

Obrigado!

PS Haverá uma opção alfa-PNG substituta, mas quero que o SVG seja suportado da melhor forma possível. (Pense bem, uma opção de fallback - como um JPG - provavelmente seria a melhor opção nesse caso, já que o próprio alpha-PNG precisa de uma solução para o IE mais antigo.)

Atualização: também há mais opções que podem ser configuradas. Como não estou trabalhando com texto, o único item relevante que vejo são as casas decimais. Para logotipos, algo a ser exibido com o máximo de 200x200px (para exibir 400x400px em telas Retina), "3" é a melhor configuração? Ou "2" para minimizar o tamanho do arquivo?

Perfis SVG

• SVG 1.0: todos os navegadores modernos para desktop e celular são compatíveis com SVG 1.1, portanto nunca escolha essa opção.
• SVG 1.1: Você quase sempre desejará isso.
• SVG Minúsculo / Básico: este é um subconjunto de SVG destinado a dispositivos móveis. Apenas alguns dispositivos oferecem suporte ao SVG Tiny e não à especificação completa; portanto, vá para o SVG 1.1.

Nota: O SVG Tiny não reduz o tamanho do arquivo, é apenas um subconjunto do SVG adequado para dispositivos com baixo poder de processamento. Ele descartará gradientes, opacidade, fontes e filtros incorporados. Erik Dahlström diz: Todos os visualizadores completos do SVG 1.1 devem poder exibir todo o conteúdo minúsculo / básico do SVG 1.1 (de acordo com as especificações) e, provavelmente, todo o conteúdo minúsculo do SVG 1.2 que o Illustrator também produz.

Nota das fontes : se você não tiver nenhum texto em sua imagem, essa configuração não será importante.

• Adobe CEF: nunca use essa opção, caso pretenda exibi-la nos navegadores. É a maneira da Adobe de incorporar fontes em arquivos SVG, até onde eu sei, isso é suportado apenas pelo plug-in do visualizador SVG da Adobe.

• SVG: incorpora a fonte como SVG, que não é suportada pelo Firefox, mas é uma boa opção se você pretende suportar apenas dispositivos móveis (que geralmente executam o webkit).

• Crie contornos: você desejará fazer isso a maior parte do tempo , a menos que tenha uma grande quantidade de texto. Se você tiver uma grande quantidade de texto, deseje incorporar a fonte com WOFF, mas precisará fazer isso manualmente.

Subconjunto :

• Nenhuma: isso negará a configuração anterior e não incorporará nenhuma fonte, se você não se importar que a fonte volte para outra fonte no computador do usuário, escolha esta opção.

• Apenas Glyphs são usados: você vai querer isso na maioria das vezes se optar por incorporar a fonte. Ele incorpora apenas os caracteres usados ​​para não aumentar o tamanho do arquivo.

• [restante do subconjunto]: isso é bastante claro, você pode optar por incluir toda a fonte ou subconjuntos. Só é útil se o seu SVG for dinâmico e o texto puder mudar com base na entrada do usuário.

Imagens : isso só importa se você estiver incluindo imagens de bitmap

• Incorporar: geralmente é o que você deseja , ele codifica a imagem como uma uri de dados, para que você apenas envie um arquivo em vez do arquivo svg com suas imagens de bitmap complementares.

• Link: use isso apenas se você tiver vários arquivos svg que fazem referência a um arquivo bitmap (portanto, não é baixado toda vez que renderiza o arquivo svg).

Observe que as imagens de bitmap vinculadas não serão exibidas se o SVG for exibido por meio da <img>tag, porque imgnão permite o carregamento de recursos externos. Além disso: o webkit possui um bug que não exibe imagens de bitmap nos arquivos svg, mesmo que você os incorpore. Em resumo: use uma <svg>tag simples se você deseja incorporar ou vincular imagens de bitmap, não use <img>.

Preservar recursos de edição do Illustrator

Prefiro salvar um arquivo .ai como minha imagem de origem e pensar no arquivo SVG como um Export for webrecurso. Dessa forma, você se concentra na redução do tamanho do arquivo e possui uma cópia original do seu arquivo vetorial com todos os recursos de edição. Então não escolha isso.

Casas decimais

O padrão 3é uma configuração sensata e você pode esquecê-la.

No entanto, se você tiver caminhos realmente complicados, com muitos pontos diminuindo essa configuração para 1 ou até 0, reduzirá substancialmente o tamanho do arquivo. Mas você deve ter cuidado, pois os segmentos de bezier são muito sensíveis a essa configuração e podem parecer um pouco distorcidos. Portanto, se você abaixar essa configuração, verifique sempre que ela parece aceitável em um navegador.

Codificação

A explicação por trás da codificação de caracteres é bastante técnica e diz respeito apenas aos arquivos svg com texto. A codificação mais provável de que você precisa é UTF-8 . Não altere isso, a menos que saiba o que está fazendo.

Otimizar para o Adobe SVG Viewer

O Adobe SVG Viewer é um plug-in de navegador em épocas em que os navegadores não suportavam SVG nativamente. Não sei o que faz, mas é irrelevante, não verifique isso .

Incluir dados de fatiamento

Isso adiciona inchaço de metadados ao seu arquivo SVG, a menos que você planeje abrir seu arquivo SVG posteriormente no Illustrator e encontrar suas fatias (se houver), não marque

Incluir XMP

Mais metadados sobre o arquivo, você pode ler no XMP aqui . não verifique isso

Saída de menos <tspan>elementos

Isso ficará acinzentado se você não tiver texto. O SVG não suporta tabelas de kerning, portanto, certas seqüências de caracteres parecerão muito espaçadas, ou seja AVA. O Illustrator trabalha adicionando tspanelementos e ajustando um pouco as posições dos caracteres. Isso adiciona um pouco de inchaço ao arquivo . Não marque isso, a menos que você se preocupe mais com o tamanho do arquivo do que com a aparência do texto .

Use <textpath>elemento para texto em um caminho

Isso ficará acinzentado se você não tiver texto em um caminho. Os navegadores tendem a variar muito quando se trata de colocar texto em um caminho, portanto, o Illustrator tenta ser útil aplicando a rotação e a posição ao caractere, em vez de deixar o trabalho para o navegador. não marque isso, a menos que se preocupe mais com o tamanho do arquivo do que com a aparência do texto .

Em geral, eu recomendo que você procure SVG em geral, você verá que ele se parece muito com HTML e permite ajustar coisas que não podem ser feitas no Illustrator.