Optimizar um SVG para web no inkscape.
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:
Nenhum comentário:
Postar um comentário