Como criar um ícone SVG escalável e acessível.
Um ícone SVG deve ser simples, escalável e livre de scripts ou referências externas desnecessárias. Decida se ele é decorativo ou significativo e forneça o rótulo acessível adequado no ponto de uso.
Adapte o fluxo à sua tarefa.
Defina o significado do ícone, o viewBox, o estilo de traço ou preenchimento e o tamanho pretendido. Produza um SVG mínimo sem referências externas desnecessárias e examine-o nos tamanhos reais. Decida o tratamento de acessibilidade no ponto de uso, incluindo o nome do controle ao redor.
- O que você fornece
- Conceito de ícone simples e restrições de estilo.
- O que você recebe
- Rascunho SVG editável com viewBox e rotulagem acessível.
Veja a entrada e o resultado.
Entrada e saída ilustrativas · exemplo didático, não uma execução real do WebAct
Exemplo campo
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
Exemplo completo
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Give the surrounding button an accessible name such as Add item.
Carregue esta entrada no prompt e copie para o WebAct para testar a tarefa. Seu resultado pode ser diferente da ilustração.
Decisões e solução de problemas.
Um SVG decorativo dentro de um botão rotulado deve ser anunciado separadamente?
Em geral, oculte o ícone decorativo da tecnologia assistiva e deixe que o nome acessível do botão comunique a ação.
Por que o ícone parece cortado quando as coordenadas do caminho parecem corretas?
O traço ultrapassa a geometria do caminho. Confira o viewBox, as margens e os limites renderizados com a espessura de traço pretendida.
Teste com sua própria fonte.
Substitua o exemplo pelo seu material no prompt. Mantenha os requisitos necessários e copie a tarefa para o WebAct.
Personalizar e copiar a tarefa ↑