twltr/svg-design

Design SVG

Skill Folha em Design; acessada por seu domínio ou nome.

Comece com o papel do gráfico na marca ou interface. Escolha sua composição, silhueta, proporções, tipografia e cor para esse contexto, preservando uma direção visual estabelecida quando existir. Em seguida, expresse o design como uma marcação SVG limpa e mínima. Cada elemento e atributo deve merecer seu lugar.

Esta skill é dona de logotipos, conjuntos de ícones, ativos de marca e gráficos web decorativos ou expressivos. Escolha por propósito: o logotipo de uma landing page e a arte decorativa do herói pertencem aqui; um diagrama explicando como seu produto funciona pertence a editorial-svg-diagrams. Composição de página e layout de interface pertencem a frontend-design.

Uma pequena decisão de logotipo

Briefing ilustrativo: Crie uma marca de montanha que permaneça reconhecível em um cabeçalho de site e em um ícone compacto de aplicativo. Comece com a silhueta externa e um recorte de crista distinto; omita linhas de neve finas que desaparecem quando reduzidas. Verifique a marca em ambos os tamanhos reais e em cada superfície destinada antes de adicionar cor ou detalhe. Se esses usos precisarem de níveis de detalhe diferentes, crie uma variante explícita de tamanho pequeno em vez de encolher uma marca ilegível.

Antes de uma composição substancial ou revisão visual, avalie a capacidade visual do modelo e o acesso a tamanhos de uso renderizados e superfícies. Se Puppeteer estiver disponível, use seu roteamento de fase/modelo atual para um autor ou revisor independente mais adequado, passando o briefing, a direção estabelecida e os tamanhos alvo. Reutilize um proprietário de delegação ativo; uma pequena edição adequada pode permanecer direta. As próprias verificações do designer não são aceitação independente. Capacidade ausente ou acesso renderizado deixa essa verificação em aberto; SVG válido por si só não estabelece um bom design.

Roteamento de Tópicos

Tarefa	Referência de carga
Combinações de bandeira de arco, formas de caminho comuns	references/path-patterns.md
Design de logotipo, tipografia, espaço negativo	references/logo-techniques.md
Design de ícones, sistemas de grade, alinhamento de pixels	references/icon-design.md
Gradientes, máscaras, clipes, filtros, transformações (decisões de design)	references/advanced-techniques.md
Animação (keyframes CSS, escalonamento, GPU, easing, específico de SVG)	references/animation.md
Otimização, sprites, configuração SVGO	references/optimization.md
Acessibilidade, armadilhas de navegador	references/accessibility-and-pitfalls.md
Fluxo de edição, operações booleanas, combinação de SVGs	references/editing-workflow.md

Esqueleto SVG

Para um ícone de UI contornado, comece com esta estrutura:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <!-- conteúdo -->
</svg>

Ajuste viewBox para corresponder à tela de design. Omita atributos width/height para permitir que o SVG escale com seu contêiner (adicione-os apenas quando um tamanho fixo for necessário).

Para logotipos e arte web, escolha a tela, preenchimentos e traços da composição, em vez de herdar os padrões de ícone.

Convenções de Tamanho de Tela

Tamanho	Caso de uso	Notas
0 0 16 16	Micro ícones, favicons	Heroicons micro, GitHub Octicons
0 0 20 20	Ícones UI pequenos, elementos de formulário	Heroicons mini
0 0 24 24	Ícones padrão (mais comum)	Lucide, Heroicons outline, Material
0 0 32 32	Ícones médios, navegação	Phosphor usa 256x256 internamente
0 0 48 48	Ícones grandes de exibição	Ícones de aplicativo, ilustrações
Personalizado	Logotipos, ilustrações	Corresponder à proporção natural

Para ícones UI padrão, use 24x24 por padrão, a menos que o sistema de ícones circundante use outra grade. Logotipos e gráficos web usam uma tela que se encaixa em sua composição.

Decisão entre Forma e Caminho

Use primitiva de forma quando...	Use <path> quando...
A forma é uma figura geométrica básica	A forma tem curvas, contornos complexos
Legibilidade importa (um círculo deve parecer <circle>)	Você precisa minimizar o número de elementos
Você precisa animar propriedades individuais (r, cx, cy)	Combinando várias formas em um único elemento
A forma será modificada programaticamente	Exportando de ferramentas de design (caminhos são universais)

Padrões de Estilo

Defina estes no elemento raiz <svg> para evitar repetição nos filhos:

Atributo	Padrão de ícone	Padrão de logotipo	Por quê
fill	none	varia	Ícones são tipicamente contornados, logotipos são preenchidos
stroke	currentColor	none ou currentColor	Herda a cor do texto do pai
stroke-width	2 (em 24x24)	varia	Espessura consistente entre ícones
stroke-linecap	round	round ou butt	Pontas arredondadas parecem mais limpas em tamanhos pequenos
stroke-linejoin	round	round ou miter	Previne picos afiados nas junções

currentColor é seu amigo. Ele permite que o SVG herde qualquer cor que o elemento pai tenha, tornando os ícones tematizáveis com zero CSS extra.

Espessura do Traço Relativa à viewBox

stroke-width está em unidades de viewBox, não em pixels. Sempre defina relativo às dimensões da sua tela:

viewBox	stroke-width típico	Resultado visual
16x16	1,5	~9,4% da tela
24x24	2	~8,3% da tela
32x32	2-2,5	~6,3-7,8% da tela
48x48	3	~6,3% da tela
256x256	16	~6,3% da tela

Quando Converter Formas em Caminhos

Converta quando:

• Combinando várias formas em um único caminho composto (operações booleanas)
• Você precisa da forma como parte de uma composição de caminho maior
• Distribuindo para ambientes que suportam apenas <path>
• Otimizando para elementos DOM mínimos

Mantenha como formas quando:

• A legibilidade do código importa (um <circle> é auto-documentável)
• Você precisa animar propriedades específicas (animar r em um círculo é mais limpo do que animar dados de caminho)
• O SVG será modificado programaticamente

Modelo retângulo arredondado para caminho

Os parâmetros de arco aqui são propensos a erros. Use isto como referência:

<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> torna-se: -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule: evenodd vs nonzero

Use evenodd quando você tiver formas compostas com buracos. É mais simples porque você não precisa se preocupar com direção do enrolamento:

<!-- Rosca usando evenodd (direção não importa) -->
<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

Com nonzero (padrão), o círculo interno deve enrolar na direção oposta para criar o buraco.

Processo de Design de Logotipo

Ao criar logotipos (não ícones), siga este processo:

0. Resolva apenas uma lacuna material no briefing. Reutilize uma direção de marca fornecida, nome, público, casos de uso e referência. Se uma escolha ausente mudaria materialmente o design, faça uma pergunta curta usando a interação suportada pelo host atual. Use um padrão reversível sensato para escolhas secundárias; nunca assuma uma ferramenta de pergunta específica ou exija uma entrevista de mood-board.

1. Explore múltiplas metáforas, não múltiplos layouts de uma metáfora. Diversidade conceitual importa mais que variações de layout. Siga o processo completo de ideação em references/logo-techniques.md, que cobre brainstorming específico de domínio, requisitos de diversidade de categoria e prevenção de clichês.

2. Garanta variedade estrutural. Cada conjunto de logotipos deve abranger múltiplas categorias de abordagem, não apenas múltiplas metáforas dentro do mesmo estilo. Inclua pelo menos um de cada coluna ao apresentar 5+ opções: uma abordagem tipográfica/marca nominativa, um ícone simbólico, uma marca geométrica abstrata e um híbrido de letra com metáfora. Veja a tabela de diversidade de categoria em references/logo-techniques.md.

3. Visualize através do host disponível. Quando a comparação progressiva ajudar, use assets/preview.html desta skill e a estrutura em references/editing-workflow.md. Mostre ou inspecione a visualização através de um visualizador suportado pelo host atual; não presuma que um navegador, comando de shell ou janela em primeiro plano esteja disponível. Se nenhum visualizador puder renderizá-lo, declare o limite e forneça os arquivos SVG e uma prévia renderizada onde suportado. Nunca afirme que uma prévia não observada foi verificada visualmente.

4. Para logotipos coloridos, crie sempre uma variante -dark.svg. Bordas azul marinho escuro (#1E3A5F) que parecem ótimas no branco desaparecem em fundos escuros. Variantes escuras precisam de bordas mais claras (#4B8BBE), anéis mais claros (#3B6B8A) e centros quase brancos (#E2E8F0).

5. Planeje seu orçamento vertical antes de desenhar. Em uma tela 32x32 com 3 elementos empilhados, você tem ~30 unidades utilizáveis. Esboce a distribuição vertical primeiro (ex.: caixa=12, gap=2, camada=5, gap=2, camada=5) para evitar corte nas bordas da viewBox.

Antipadrões

Não faça	Faça em vez disso
Hardcodar width="24" height="24" sem viewBox	Use viewBox sempre; adicione width/height apenas se necessário
Definir fill="none" em um grupo <g>	Defina fill em elementos individuais ou no raiz <svg>
Usar unidades px dentro de SVG	Coordenadas SVG não têm unidades; elas mapeiam para viewBox
Incluir metadados de editor (<sodipodi:*>, <inkscape:*>)	Remova toda a sujeira de editor
Usar <text> para marcas nominativas em SVGs distribuídos	Converta texto em caminhos para portabilidade
Aninhar transformações três níveis de profundidade	Achate transformações em coordenadas de caminho
Usar xlink:href	Use href (xlink está obsoleto)
Esquecer xmlns em arquivos SVG independentes	Sempre inclua xmlns="http://www.w3.org/2000/svg"
Usar precisão decimal além de 2-3 casas para ícones	Arredonde para 2 decimais para ícones, 3 no máximo para arte complexa

Referências Cruzadas

• O design do site ou interface ao redor não é trabalho desta skill. Devolva-o a quem pediu o gráfico, com o papel e as restrições de tamanho do gráfico, e siga a tipografia, cores e hierarquia visual estabelecidas ou o sistema de design existente do projeto enquanto isso.
• Se editorial-svg-diagrams estiver disponível, use-o para figuras que explicam conceitos, relacionamentos, processos ou sistemas. Caso contrário, mantenha a saída desta skill focada em gráficos de marca e interface e explique a capacidade de diagramação indisponível se o resultado solicitado depender dela.