Opções de exportação do Adobe Illustrator - CSS-Tricks

Isso é menos um trecho e mais um lembrete de algo que procuro com frequência. Ao criar arquivos SVG no Adobe Illustrator, existem alguns métodos diferentes para exportar os arquivos. Ambos os métodos incluem um punhado de opções, algumas das quais esqueci totalmente o que significam e o que selecionar.

Método 1: Salvar como ...

Você provavelmente não usaria esse método para salvar o SVG para uso na web. Isso serve principalmente para salvar um documento mestre. Na verdade, você pode querer apenas salvar diretamente no formato do Illustrator. Você usaria algumas das outras opções de exportação para exportar para a web.

A maneira mais comum de salvar um arquivo como SVG no Adobe Illustrator é escolher a File > Save As… opção no menu principal.

O Illustrator abrirá uma janela de diálogo perguntando como nomear o arquivo e onde salvá-lo. Mais importante, ele também pergunta que tipo de arquivo deve ser salvo, neste caso é SVG. Não compactado em SVG (svgz). SVG simples.

Clique no botão Salvar e outro conjunto de opções aparecerá. É aqui que minha memória tende a falhar e tenho que vasculhar a web em busca de respostas. Aqui está uma captura de tela de uma maneira perfeitamente ideal de salvar um arquivo SVG no Adobe Illustrator.

• Perfis SVG : define o tipo de documento XML na tag de abertura . SVG 1.1 é a versão mais recente, cobre o suporte mais amplo e é provavelmente a opção mais adequada. Todo o resto é uma versão mais antiga ou um subconjunto do SVG 1.1 e ainda não tive problemas ao selecioná-lo.
• Fontes> Tipo : Selecionar “Converter para contorno” garantirá que qualquer texto digitado no arquivo seja exportado são caminhos vetoriais em vez de glifos. Os glifos têm uma chance de não serem renderizados, mas os caminhos de vetor são sempre um sinal de positivo.
• Opções> Localização da imagem : Se imagens raster (leia-se: JPG.webp, PNG, GIF) forem usadas no arquivo, então vamos querer selecionar a opção “Link”. Caso contrário, a imagem rasterizada será incorporada ao arquivo e isso suga os benefícios de desempenho do SVG, aumentando o tamanho do arquivo para incluir esses ativos extras. Melhor referenciá-los como links e certificar-se de incluir esses arquivos de origem no mesmo diretório do arquivo SVG.
• Opções> Local da imagem> Preservar recursos de edição do Illustrator : Este tem um grande impacto na saída do arquivo SVG. Como você provavelmente está salvando uma cópia “master” aqui, não destinada a nós na web, deixe esta opção marcada. Isso preservará as coisas proprietárias do Illustrator (como guias) para a próxima vez que você abrir o arquivo. Desmarcado significa que coisas como essa serão arrancadas e perdidas.
• Opções avançadas> Propriedades CSS : seleciono “Atributos de apresentação” para este porque ele coloca as propriedades (por exemplo, preenchimentos, traços e outros) no nível mais baixo de especificidade. Por exemplo . Isso define o estilo do elemento, mas é muito fácil de substituir no CSS.
• Opções avançadas> Casas decimais : se você navegou no código de um , sabe que os valores que especificam essas formas podem ser superprecisos. Muitas vezes, porém, eles são muito precisos e aumentam o tamanho geral do arquivo SVG. Como você provavelmente está salvando um arquivo mestre aqui, pode mantê-lo bem alto, pois o tamanho do arquivo não é uma grande preocupação.
• Opções avançadas> Codificação : não sou um fã de codificação UTF, mas deixar isso em “Unicode UTF-8” garante compatibilidade com versões anteriores. Além disso, os tamanhos dos arquivos UTF-8 tendem a ser menores do que UTF-16, então isso é uma vitória por si só.
• Opções avançadas> Responsivo : deixar esta opção desmarcada definirá os atributos fixos heighte widthno SVG. Eu marquei esta opção porque me permite definir esses atributos no código ou no CSS.

Método 2: Exportar como

Outra forma de obter SVG do Adobe Illustrator é escolher a File > Export > Export As… opção no menu principal. No entanto, há uma segunda maneira de chegar lá usando o painel Ações na área de trabalho do Illustrator.

Essa opção é ideal se você sabe que vai usar esse arquivo diretamente na web e não planeja mexer no design mais tarde. Ele fornece muito menos configurações e algumas opções que permitem que o arquivo otimize ainda mais o arquivo para melhor desempenho. Na verdade, é uma prática recomendada fazer isso em uma cópia do arquivo, e não no próprio arquivo mestre, para que haja uma versão que pode ser aberta e editada posteriormente no Illustrator e outra que seja mais adequada para veiculação em um site de produção.

• Estilo : Já falamos sobre isso nas configurações do Método 1, mas escolhi “Atributos de apresentação” aqui porque é uma forma de organizar propriedades nos atributos de nível mais alto. Isso adiciona ordem à marcação, flexibilidade em nossa capacidade de definir o estilo dos atributos subsequentes com CSS e, frequentemente, leva a tamanhos de arquivo menores.
• Fonte : esta é outra que abordamos acima, mas escolher “Converter em contornos” troca os glifos por caminhos de vetor para caracteres, o que garante que o texto seja renderizado corretamente.
• Imagens : Este é outro que abordamos acima, mas escolher “Link” evitará que imagens raster incorporadas sejam empacotadas no SVG, o que torna o arquivo muito maior.
• IDs de objeto : esta configuração fornece ordens de marcha ao Illustrator sobre como nomear IDs na marcação. Você pode instruí-lo a nomear IDs com base em como as camadas são nomeadas no arquivo.
• Decimal : menos decimais no código significam tamanhos de arquivo menores. Definir como 1é ideal e OK em muitos casos e não terá uma diferença perceptível no design, mas 2geralmente é seguro. De qualquer forma, vale a pena verificar como o SVG é renderizado.
• Minify : Sim, por favor! Isso reduz o código para reduzir os espaços em branco e aumentar o desempenho da web, da mesma forma que minimiza o CSS.
• Responsivo : exatamente como o primeiro método, selecionar esta opção é ideal porque os atributos fixos heighte fixos widthseriam colocados no SVG.