loading...

Tuxmind

Optimizar um SVG para web no inkscape.

quinta-feira, 21 de outubro de 2021
Tuxmind

Esta dica serve para transformar todos os objectos em paths e remover nós desnecessários como camadas, e minimizar ao máximo o SVG.

O resultado é um ficheiro com apenas como essencial para colocar na pagina html.

Após abrir o inkscape vá até...

-> [Propriedades do documento] e defina as dimensões do documento igual a largura x altura. Coloque a unidade em pixels na escala 1 em x e y.

Agora sempre que finalizar um objecto transforme-o numa "path", vá até -> [caminho] -> [união]

Depois que o desenho estiver finalizado vá até [Editar árvore XML do documento] e edite o "style" de todos os nós removendo tudo expeto fill:#000000 que é a cor de preenchimento e o "stroke" caso seja utilizado. Remova o atributo stroke caso não esteja a ser utilizado por exemplo "stroke-width:0"

Verifique se no nó principal o atributo viewBox está no mesmo tamanho do documento e com cordenadas 0 0 Exemplo: 0 0 100 200.

Apague todos os nós e atributos desnecessários no editor de XML e no editor de estilos CSS. (ou siga as indicações do [Exportar em SVG optimizado] ao salvar o SVG)

Edite as tag id dos objectos para pra um nome mais compreensível, isso ajuda caso queira animar o svg e precisa saber as id das tags a serem animadas com css.

Dica: Se estiver a criar "custon icons" use a opção fill="currentColor" para usar o cor CSS definida na tag superior ao SVG

Por fim para guardar vá até [Ficheiro] -> [Guardar como] -> [SVG Optimizado]

Na caixa de diálogo [Exportar em SVG optimizado] siga as indicações em baixo:

Aba [Opcões] marque tudo EXEPTO:

    - Criar grupos parar atributos similares

    - Manter dados do editor

    - Manter definições não referenciadas

Aba [Exportar SVG] marque TUDO!

Aba aba [Ids] marque apenas o:

- Remover IDs por usar

Depois de salvo o documento basta abrir o SVG com um editor de texto, copiar o texto e colar dentro do html.

Tags:

Inkscape

Nenhum comentário: