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 img
nã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 web
recurso. 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 tspan
elementos 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.