Guias e artigos

SVG vs PNG: Qual Formato Você Deve Usar?

Use SVG para ícones de sites, logotipos e interfaces porque os vetores ficam nítidos em qualquer tela. Use PNG quando precisar de uma imagem de pixels fixos para e-mails ou redes sociais.

Como Animar Ícones SVG com CSS

Adicione uma classe CSS ao seu SVG inline e aplique keyframes com transform ou stroke-dasharray. Nosso editor gera animações suaves a 60fps sem JavaScript.

Como Editar Ícones SVG no Figma ou no Navegador

Copie o código SVG do SVG Nexus e cole diretamente no Figma ou Illustrator para editar nós e cores, ou abra o ícone no nosso Estúdio Vetorial no navegador.

Como Usar Ícones SVG no React, Next.js e Vue

Selecione a aba React TSX ou Vue 3 em qualquer página de ícone para copiar um componente pronto compatível com currentColor e Tailwind CSS.

SVG em linha contra tag de imagem

Use SVG em linha ou componentes quando precisar mudar a cor ao passar o mouse e animar com CSS. Use a tag de imagem com largura, altura e texto alternativo se quiser que a busca de imagens indexe o ícone.

Evite conflitos de ID de gradiente e recorte

Conjuntos multicoloridos costumam repetir IDs internos como paint0_linear. Se dois ícones compartilham um ID na mesma pagina, o gradiente errado e desenhado. O SVG Nexus cria um escopo proprio para cada ID por ícone.

Ícones acessíveis e espelho RTL

Oculte ícones decorativos com aria-hidden e focusable false. De um aria-label claro para botoes com apenas ícone. Espelhe setas na horizontal para idiomas da direita para a esquerda.

Limpar arquivos SVG de terceiros

SVG e um formato XML, então um arquivo não confiavel pode trazer scripts e manipuladores de eventos. Remova as tags script e sirva os SVG com politica de segurança estrita e cabecalho nosniff.