Convierte un SVG en una data URI que puedes pegar en CSS o HTML sin archivo aparte. Primero se optimiza el SVG y luego se codifica como URL (lo más corto, normalmente), en Base64 o dentro de una línea background-image: url("data:image/svg+xml,…") lista. Ideal para iconos pequeños, marcas de verificación y patrones que deben cargarse con la hoja de estilos.
Cómo se usa
- Abre un SVG, suéltalo sobre la vista previa o pega su código. Al principio se carga un ejemplo.
- Optimizar: elige cuántos decimales conservar y qué limpiezas aplicar. Se muestra el tamaño antes y después; copia el código, un data URI o una línea CSS, o descarga el archivo.
- A PNG: indica el ancho o el alto (o toca 2×, 4×, 1024…), elige PNG, JPG o WebP y un fondo, y descarga.
- Vectorizar: suelta un PNG o JPG, elige el número de colores y el detalle y descarga el SVG.
- Código: edita el código y mira cómo se actualiza la vista previa mientras escribes.
- El optimizador nunca cambia el ancho, el alto ni el viewBox del SVG, conserva los IDs que se usan y redondea los trazados sin desviarse. Revisa los archivos complejos en la vista previa antes de sustituir el original.
- Dos decimales bastan para la mayoría de iconos; usa 3–4 en planos técnicos grandes.
- La vectorización funciona mejor con logos, iconos e ilustraciones planas. Las fotos se convierten en muchas formas grandes; usa menos colores para un efecto póster.
- Los archivos se procesan en tu navegador. Los scripts dentro de un SVG nunca se ejecutan aquí: las vistas previas se muestran como imágenes.
Por qué los SVG pesan tanto
Los programas de diseño exportan mucho más que el dibujo: metadatos del editor, comentarios, ID y definiciones sin usar, grupos vacíos, atributos con valores por defecto y coordenadas con seis decimales o más. En un icono típico, todo eso puede ser la mayor parte del archivo. El optimizador lo elimina, redondea los trazados a la precisión que elijas y fusiona grupos inútiles, sin tocar nunca el ancho, el alto ni el viewBox raíz y conservando los ID que se usan.
Dos decimales son seguros para la mayoría de iconos y logos en pantalla; los planos técnicos grandes pueden necesitar tres o cuatro. Compara siempre la vista previa antes de sustituir el original, sobre todo con máscaras, filtros o fuentes incrustadas.
Vectorial o mapa de bits
Un SVG describe formas, así que se ve nítido a cualquier tamaño y suele ocupar muy poco en iconos, logos y diagramas; para fotos son mejores JPG, PNG o WebP. Cuando una plataforma exige mapa de bits, como el icono de una tienda de apps, un favicon PNG o una imagen para redes, exporta al tamaño exacto: un viewBox de 24 × 24 dibujado a 1024 px queda nítido porque el vector se vuelve a dibujar, no se estira. JPG no admite transparencia, así que elige un color de fondo.
Vectorizar y data URI
La vectorización funciona mejor con ilustraciones planas de pocos colores y bordes claros, como logos, iconos, firmas o dibujos de líneas; una foto se convierte en muchas formas grandes. Para iconos pequeños en CSS, una data URI codificada como URL suele ser más corta que Base64, porque SVG es texto y Base64 añade un 33 %.
Preguntas frecuentes
¿Optimizar cambia el aspecto de mi SVG?
No debería. El optimizador conserva el viewBox y los ID referenciados y redondea las coordenadas a la precisión que fijes. Si un archivo complejo se desplaza un poco, sube el número de decimales y vuelve a comparar en la vista previa.
¿Cómo convierto un SVG a PNG en alta resolución?
Abre el SVG, ve a A PNG y fija un ancho o alto, o toca 2×, 4× o un tamaño como 1024. La imagen se vuelve a dibujar desde el vector a ese tamaño, hasta 8192 px, así que queda nítida.
¿Se puede convertir un PNG o JPG en un SVG vectorial real?
Sí, vectorizándolo: la herramienta busca zonas de color parecido y las convierte en trazados. Logos e iconos con pocos colores dan buen resultado; las fotos generan archivos grandes con aspecto posterizado.
¿Uso una data URI en Base64 o codificada como URL?
Para SVG, la codificada como URL suele ser más pequeña y sigue siendo legible, porque Base64 aumenta el texto en un tercio. Base64 solo hace falta si alguna herramienta lo exige.
¿Es seguro abrir aquí un SVG de origen desconocido?
Sí. Un SVG puede contener scripts, pero aquí las vistas previas se muestran como imágenes, que el navegador dibuja sin ejecutar scripts, y no se sube nada.
¿El conversor mantiene la transparencia?
PNG y WebP conservan las zonas transparentes salvo que elijas un color de fondo. JPG no admite transparencia, así que esas zonas se rellenan de blanco o del color que indiques.