Guías y tutoriales

SVG vs PNG: ¿Qué Formato Debes Usar?

Usa SVG para iconos web, logotipos e interfaces porque los vectores se ven nítidos en cualquier pantalla. Usa PNG cuando necesites una imagen de píxeles fijos para correos electrónicos o redes sociales.

Cómo Animar Iconos SVG con CSS

Añade una clase CSS a tu etiqueta SVG en línea y aplica keyframes con transform o stroke-dasharray. Nuestro editor genera animaciones fluidas a 60fps sin necesidad de JavaScript.

Cómo Editar Iconos SVG en Figma o en el Navegador

Copia el código SVG desde SVG Nexus y pégalo directamente en Figma o Illustrator para editar nodos y colores. También puedes abrir cualquier icono en nuestro Estudio Vectorial sin instalar programas.

Cómo Usar Iconos SVG en React, Next.js y Vue

Selecciona la pestaña React TSX o Vue 3 en cualquier página de icono para copiar un componente listo para producción compatible con currentColor y Tailwind CSS.

SVG en linea frente a etiqueta de imagen

Usa SVG en linea o componentes cuando necesites cambiar el color al pasar el cursor y animar con CSS. Usa la etiqueta de imagen con ancho, alto y texto alternativo si quieres que el buscador de imagenes indexe el icono.

Evita choques de identificadores de degradado y recorte

Los conjuntos multicolor suelen repetir identificadores internos como paint0_linear. Si dos iconos comparten un identificador en una pagina, se dibuja el degradado equivocado. SVG Nexus da un ambito propio a cada identificador por icono.

Iconos accesibles y espejo RTL

Oculta los iconos decorativos con aria-hidden y focusable false. Da un aria-label claro a los botones que solo tienen icono. Voltea las flechas en horizontal para idiomas de derecha a izquierda.

Limpiar archivos SVG de terceros

El SVG es un formato XML, asi que un archivo no confiable puede traer scripts y manejadores de eventos. Quita las etiquetas script y sirve los SVG con una politica de seguridad estricta y la cabecera nosniff.