Porquê guardar o logótipo como SVG?
O SVG é o formato ideal para logótipos em websites, aplicações e para uso digital. É leve, escalável e suportado por todos os browsers modernos. Neste guia mostramos-lhe exatamente como exportar um ficheiro SVG ótimo a partir do Adobe Illustrator.
Exportar SVG em 5 passos
Passo 1: Prepare o seu design
Converta todo o texto em contornos em Texto > Criar Contornos. Remova camadas ocultas e elementos não utilizados. Certifique-se de que todos os objetos estão numa camada ou logicamente organizados. Verifique se não existem efeitos raster (sombras, desfocagem) no seu design, pois estes são incorporados como bitmap no SVG.
Passo 2: Ajuste o artboard
Selecione todos os objetos (Ctrl/Cmd+A) e vá a Objeto > Artboards > Ajustar aos Limites da Ilustração. Isto garante que o artboard se ajusta perfeitamente ao seu logótipo sem espaço em branco desnecessário. Também pode usar manualmente a ferramenta Artboard (Shift+O).
Passo 3: Escolha o método de exportação correto
Vá a Ficheiro > Exportar > Exportar como. Escolha SVG como tipo de ficheiro. Também pode usar Ficheiro > Guardar como > SVG, mas 'Exportar como' dá-lhe mais controlo sobre as definições de saída e geralmente produz um ficheiro mais limpo.
Passo 4: Defina as opções SVG
No ecrã de opções SVG: escolha perfil SVG 'SVG 1.1', defina o tipo de letra para 'Converter em Contornos', escolha 'Atributos de Apresentação' nas propriedades CSS. Defina Decimais para 2 para um bom equilíbrio entre tamanho do ficheiro e precisão. Ative 'Responsivo' se o logótipo precisar de escalar flexivelmente.
Passo 5: Verifique o resultado
Abra o ficheiro SVG exportado num browser para verificar se tudo está correto. Compare com o original no Illustrator. Verifique se as cores estão corretas, se as formas estão intactas e se o ficheiro escala corretamente ao fazer zoom no browser.
Definições ótimas de exportação SVG
Para os melhores resultados use estas definições: perfil SVG 1.1, propriedades CSS em 'Atributos de Apresentação', Decimais em 2, Codificação UTF-8. Desative 'Preservar Capacidades de Edição do Illustrator' para manter o ficheiro mais pequeno. Se o seu logótipo não contém imagens, escolha 'Ligar' na localização da imagem. Para otimização extra pode processar o ficheiro através do SVGO ou ferramenta semelhante.
Dicas extra para exportação SVG ótima
Use o mínimo de pontos de ancoragem possível para ficheiros menores. Evite clipping masks onde possível e crie formas com o Pathfinder em vez disso. Não use efeitos de transparência do Illustrator, mas defina a opacidade diretamente no objeto. Agrupe elementos lógicos para que o código SVG se mantenha organizado. Considere usar 'Mostrar Código SVG' para inspecionar o código antes de exportar.
Perguntas frequentes
Porque é que o meu SVG parece diferente do Illustrator?
Isto deve-se frequentemente a efeitos raster (sombras, desfocagem, degradês com transparência) que não são bem traduzidos para SVG. Converta todos os efeitos em formas vetoriais simples ou remova-os. Verifique também se o texto está convertido em contornos.
Qual perfil SVG devo escolher?
Escolha SVG 1.1 para a maior compatibilidade de browsers. SVG Tiny destina-se a dispositivos móveis com capacidade limitada e não é necessário para a maioria das aplicações.
Como torno o meu SVG mais pequeno?
Reduza o número de pontos de ancoragem, use números inteiros para cores, remova metadados desnecessários e use um otimizador SVG como o SVGO. No Illustrator pode usar 'Simplificar Caminho' para reduzir o número de pontos.
Ficheiro SVG perfeito do Illustrator
Com as definições e preparação corretas, exporta um ficheiro SVG perfeito do Illustrator para o seu website. Não tem Illustrator ou quer garantir um resultado ótimo? A Logo in Vector entrega o seu logótipo como ficheiro SVG otimizado, pronto para uso direto no seu website.