Exportar gráficos vectoriais no Inkscape para a Web

Neste tutorial, vou mostrar-lhe como guardar os gráficos vectoriais que criou no formato SVG ( Scalable Vetor Graphics). Os ficheiros SVG são particularmente adequados para utilização na Internet, uma vez que requerem pouco espaço de armazenamento e podem ser redimensionados para qualquer tamanho sem perder qualidade. Quer tenha o logótipo da sua empresa, um ícone ou um desenho - depois de ter criado o seu gráfico vetorial no Inkscape, familiarizá-lo-ei com o processo de gravação para que possa utilizar o seu trabalho da melhor forma para a Web.

Principais lições

• Os ficheiros SVG oferecem uma elevada escalabilidade e um tamanho de ficheiro reduzido.
• O Inkscape salva gráficos vetoriais no formato SVG, que contém informações especiais sobre camadas e guias.
• Existem diferentes tipos de SVG: o SVG nativo do Inkscape e os SVGs optimizados, que são mais adequados para a Web.

Instruções passo a passo

Para guardar o seu gráfico vetorial em formato SVG, proceda da seguinte forma:

Em primeiro lugar, deve certificar-se de que o seu desenho está finalizado no Inkscape. Se for esse o caso, clique em Ficheiro na barra de menu superior.

No menu pendente, selecione a opção Guardar como. Isto abrirá uma nova janela onde pode selecionar a localização e o tipo de ficheiro.

Por predefinição, o Inkscape guarda no seu próprio formato SVG, que contém informações sobre as camadas e a estrutura do seu desenho. No entanto, para utilização na Web, é melhor utilizar uma versão optimizada. Encontre a localização no disco rígido onde pretende guardar o ficheiro.

Selecione SVG normal ou SVG optimizado no menu pendente para o tipo de ficheiro. Para a primeira tentativa, selecione SVG normal.

Dê um nome ao ficheiro, por exemplo Logo_normal, e confirme com Guardar. Este ficheiro está agora guardado no formato SVG normal.

Verá que este ficheiro é normalmente mais pequeno do que o SVG do Inkscape, que pode ter cerca de 11 KB de tamanho. O SVG normal pode ser tão pequeno como 6 KB, o que requer muito menos memória.

Agora repita o processo clicando novamente em Ficheiro e depois em Guardar como, mas desta vez selecione SVG optimizado.

Renomeie o ficheiro para Logo_optimizado, por exemplo, e guarde-o. Ser-lhe-ão pedidas algumas opções. Aqui pode converter atributos CSS em atributos XML e efetuar várias definições de otimização. Recomendo que escolha as opções que lhe parecerem melhores.

Confirme a sua seleção e veja o novo tamanho do ficheiro. Muitas vezes, a versão optimizada terá apenas 4 KB de tamanho. Isto mostra que o ficheiro foi ainda mais comprimido com este método.

Se abrir agora os ficheiros no browser, verificará que tanto o SVG normal como o optimizado têm um aspeto idêntico. Introduza os URLs dos ficheiros na barra de endereços do seu browser para verificar o resultado.

Para testar a sua escalabilidade, pode ajustar o nível de zoom do browser. Por exemplo, se fizer zoom a 50% ou até 300%. Verá que as margens permanecem nítidas, independentemente do nível de zoom.

Estas propriedades dos ficheiros SVG tornam-nos adequados para utilização em sítios Web. Pode ter a certeza de que o seu logótipo aparecerá claro e nítido em todos os dispositivos, independentemente do tamanho que lhe der.

Ao utilizar o formato SVG para os seus gráficos, não só reduz o tamanho do ficheiro, como também garante que a qualidade dos seus desenhos se mantém em qualquer resolução.

Resumo

Neste tutorial, aprendeu a guardar os seus gráficos vectoriais no formato SVG. Isto permite-lhe utilizar os seus desenhos de forma eficiente para a Web e oferece a vantagem da escalabilidade e do tamanho reduzido do ficheiro.