Ícones SVG Pixel-Perfect para Web/UI🔗

Ícones SVG são a base visual de interfaces modernas. Escalam sem perda, aceitam estilização via CSS e podem ser embutidos no HTML. Este tutorial cobre o workflow completo no Inkscape: do grid ao SVG otimizado para produção.

Grid 24px🔗

O grid de 24x24 pixels é o padrão da indústria (Material Design, Feather Icons, Heroicons).

Configurar🔗

1. Visualizar > Grid ou Shift + # para ativar.
2. Arquivo > Propriedades do Documento > Grade > Novo > Grade retangular.
3. Defina Espaçamento X e Y para 24.
4. Ative Snap to Grid no painel de snapping ou % .

Configure o documento para 24x24px (largura, altura, unidades px, margens 0). Isso garante viewBox="0 0 24 24" no SVG exportado — essencial para consistência em sistemas de design. Para múltiplos ícones, posicione cada um em células de 24px.

Stroke vs Fill🔗

A escolha entre stroke (contorno) e fill (preenchimento) define o estilo e impacta a escalabilidade.

Stroke (Outline)🔗

• Espessura de 1.5px ou 2px. Estilo leve e moderno.
• Object > Fill and Stroke (Shift + Ctrl + F ): fill "sem preenchimento" (X), stroke com cor.
• Stroke join e cap como "round" para cantos suaves.

Fill (Solid)🔗

• Formas sólidas sem contorno. Estilo bold e direto.
• Object > Fill and Stroke: stroke "sem contorno" (X), fill com cor.
• Converta strokes em paths antes de exportar: Caminho > Contorno em Objeto (Shift + Ctrl + C ).

Quando Usar🔗

Técnicas de Pixel-Perfect🔗

Pixel-perfect significa que cada ponto se alinha à grade de pixels, evitando bordas borradas.

Regras de Alinhamento🔗

1. Linhas horizontais/verticais: coordenadas inteiras (não 10.5, use 10 ou 11).
2. Strokes par (2px): centralize no inteiro.
3. Strokes ímpar (1px): desloque 0.5px para alinhar ao pixel grid.
4. Cantos de retângulos: alinhe às intersecções do grid.

Path > Simplify🔗

Após traçar curvas, Ctrl + L (Caminho > Simplificar) reduz nós desnecessários mantendo a forma — menos nós, curvas mais limpas e SVG menor.

Node Tool🔗

A Ferramenta de Nós (N ) permite ajuste cirúrgico: arraste nós para posições exatas no grid, Ctrl + arrastar restringe ao eixo, converta nós suaves em cantos, delete redundantes com Del .

Verificação em Zoom 1:1🔗

Zoom de 100% (Ctrl + 5 ) mostra como o ícone renderiza em tamanho real. Bordas borradas indicam desalinhamento.

Simetria🔗

Desenhe metade, duplique (Ctrl + D ), espelhe horizontalmente (H ), alinhe e una (Ctrl + + ).

Exportação Otimizada🔗

O SVG final deve ser o menor possível para não impactar o carregamento.

Save As > Optimized SVG🔗

1. Arquivo > Salvar Como > Optimized SVG (*.svg).
2. Opções recomendadas:
   • Significant digits: 4
   • Shorten color values: ativado (#fff em vez de #ffffff)
   • Convert CSS to XML attributes: ativado
   • Strip xml/stylesheet declaration: ativado para inline
   • Remove metadata e comments: ativado
   • Group collapsing e Enable viewboxing: ativado

Limpeza Pré-Exportação🔗

Arquivo > Limpar documentos remove definições não utilizadas e gradientes órfãos. Verifique o XML Editor (Shift + Ctrl + X ) para nós residuais e camadas ocultas.

Pós-Processo com SVGO🔗

svgo --stringency=high icone.svg -o icone-otimizado.svg

SVGO remove atributos desnecessários e reduz o tamanho em 30-50%. Para lotes:

for i in icone-*.svg; do svgo --stringency=high "$i" -o "dist/$i"; done

Casos de Uso🔗

• Navegação (menu, busca, perfil): stroke 2px, cantos arredondados, viewBox 24x24.
• Ação (editar, excluir, salvar): fill para primários, stroke para secundários.
• Status (sucesso, erro, alerta): fill com cores semânticas (verde, vermelho, amarelo, azul).
• Favicon/PWA: exporte em múltiplos tamanhos via CLI:

inkscape icone.svg --export-type=png --export-width=16 --export-filename=favicon-16.png
inkscape icone.svg --export-type=png --export-width=32 --export-filename=favicon-32.png
inkscape icone.svg --export-type=png --export-width=192 --export-filename=android-chrome-192.png
inkscape icone.svg --export-type=png --export-width=512 --export-filename=android-chrome-512.png

Referências🔗

• Inkscape Manual — Techniques overview
• Inkscape — Learn (tutoriais oficiais)
• W3C — Scalable Vector Graphics (SVG) 1.1 (Second Edition)