Elysia Tools
Navegação
Workflow Playbook
Limpe ícones aprovados, escolha referências internas ou externas, confira identificadores e cores na página real e exporte alternativas raster individuais.
Temas
Este roteiro entrega um conjunto reutilizável de ícones a uma equipe frontend. Guarde um SVG independente aprovado por ícone, com função e tamanho pequeno previsto. Analise com svg-minifier-analyzer e compare a aparência depois da otimização. Revise viewBox ausentes: uma caixa inferida das dimensões pode cortar desenhos deslocados. Inclua gradientes, máscaras e recortes no inventário. Ícones de aba e manifestos pertencem a svg-favicon-icon-workflows.
svg-sprite-generator combina até 30 arquivos. Registre identificadores gerados e duplicatas removidas; a comparação usa viewBox e conteúdo com espaços normalizados. Não suponha que o nome de origem permanece igual. Identificadores superiores únicos não evitam colisões de gradientes ou recortes internos. Preserve a arte multicolorida. Depois de retirar cores monocromáticas, confira regiões vazadas e defina preenchimento ou traço no consumidor: remover fill=none pode preencher uma área antes vazia.
No modo symbol, insira o arquivo baixado uma vez e referencie os identificadores reais. Para arquivo externo, use o caminho definitivo e confira o fragmento ou grupo efetivamente consumido. Teste os exemplos com todos os ícones, fundos claros e escuros e estados ativos. Uma prévia isolada correta não prova que a referência implantada funciona. A remoção de scripts e atributos de eventos não garante limpeza completa de qualquer SVG; use originais revisados. Dê nomes acessíveis a controles sem texto e trate elementos decorativos separadamente.
Se precisar de imagens raster, use svg-to-png ou svg-to-webp em cada fonte independente. Uma coleção oculta de símbolos não equivale a uma prancha visível. Verifique pixels, alfa e legibilidade, depois entregue sprite, mapa de arquivos e identificadores, alternativas e notas de teste. Use css-authoring-layout-and-cascade-workflows para conflitos de regras e web-accessibility-audits para a revisão ampla da página.
Guia de fluxo de trabalho
Analise cada SVG, compare antes e depois e mantenha geometria, cores e viewBox aprovados em uma fonte recuperável.
Combine arquivos com modo e prefixo escolhidos, revise duplicatas e avisos de viewBox e confira referências internas.
Adapte exemplos ao caminho e fragmentos emitidos; teste todos os ícones, estados e nomes acessíveis na aplicação.
Converta fontes aceitas em PNG ou WebP conforme o destino e verifique dimensões, alfa e leitura em tamanho pequeno.
Use symbol para uma coleção inserida uma vez; confirme fragmento e URL na aplicação antes de adotar arquivo externo.
Preserve cores da arte multicolorida; remova cores apenas de formas monocromáticas revisadas e confira preenchimento e traço, pois retirar fill=none altera vazios.
Exporte PNG ou WebP a partir do SVG individual aceito quando o destino não usa sprites; a coleção oculta não é uma imagem visível.