Convertidor de SVG a PNG, JPG y WebP

Qué hace esta herramienta

Un SVG es un dibujo descrito con texto: formas, trazados y colores en lugar de píxeles. Por eso se ve nítido a cualquier tamaño, y también por eso muchos sitios no lo aceptan. Las redes sociales, los clientes de correo, las presentaciones, las tiendas de aplicaciones y casi todos los formularios de subida piden PNG, JPG o WebP. Esta herramienta dibuja tu SVG con el tamaño en píxeles que elijas y lo guarda en uno de esos tres formatos.

Todo ocurre en tu navegador. El archivo se lee en tu dispositivo, se dibuja en un lienzo y se codifica allí, así que no se sube nada y no hay cola.

Cómo convertir un SVG

1. Suelta el archivo en el recuadro, elígelo o pega el código SVG en el campo de texto. El botón "Probar un ejemplo" carga un icono pequeño para que veas el resultado enseguida.
2. Elige el formato. PNG no pierde calidad y conserva la transparencia, WebP pesa menos y también la conserva, JPG es el más ligero para fotografías pero no admite transparencia.
3. Elige el tamaño y descarga. La vista previa se actualiza al cambiar cualquier cosa y la línea de debajo indica el tamaño en píxeles y el peso del archivo que recibirás.

Elegir el tamaño

Un SVG no tiene píxeles propios, así que el tamaño lo decides tú. Hay tres formas: una escala (veces el tamaño natural), un ancho exacto o un alto exacto. Con el ancho o el alto, el otro lado sigue la proporción, de modo que la imagen nunca se deforma.

El tamaño natural se lee del archivo. Si el elemento raíz tiene width y height, se usan. Si solo tiene viewBox, algo habitual en los iconos, el viewBox da el tamaño y la proporción: un icono con viewBox="0 0 24 24" mide 24 por 24 píxeles a escala 1, 96 por 96 a escala 4 y 512 por 512 si pides un ancho de 512. Un logotipo apaisado con viewBox="0 0 24 12" y ancho 480 sale de 480 por 240. Si el archivo no tiene ni tamaño ni viewBox, la herramienta supone 300 por 150, como hacen los navegadores, y te lo indica.

El lado más largo puede llegar a 8192 píxeles y la imagen entera a unos 50 millones de píxeles, que es lo que un navegador dibuja con fiabilidad.

PNG, JPG o WebP

• PNG para logotipos, iconos y todo lo que tenga bordes nítidos o transparencia. Los archivos pesan más, pero no se pierde nada.
• WebP para lo mismo cuando el destino lo acepta: suele pesar bastante menos que el PNG y conserva la transparencia. El control de calidad se aplica.
• JPG solo si el destino lo exige. No tiene transparencia, así que la herramienta siempre rellena el fondo con un color (blanco por defecto) y el control de calidad se aplica. Los bordes duros y los colores planos muestran un leve ruido en bloques con calidad baja.

Para un fondo transparente, deja activado el interruptor "Fondo transparente" y elige PNG o WebP. Desactívalo para rellenar la imagen con el color que quieras.

Qué pasa con los scripts y los enlaces

Un SVG no es solo una imagen: el formato permite scripts, controladores de eventos y enlaces a otros archivos. Un SVG de origen desconocido debe tratarse como cualquier archivo en el que no confías. Aquí el archivo solo se carga como imagen, algo que el navegador nunca deja ejecutar código, y antes la herramienta elimina los elementos script, los marcos incrustados, los atributos de evento como onclick, los enlaces a otras direcciones web y las importaciones de CSS. Se muestra el recuento y nada se ejecuta.

Cuando el resultado se ve mal

• El texto cambia de fuente. Un SVG dibujado como imagen no puede cargar fuentes de la web. Convierte el texto en contornos en tu programa de dibujo o incrusta la fuente.
• La imagen sale en blanco. Comprueba que el código esté completo y que el elemento raíz sea svg. El código pegado sin xmlns se corrige solo, pero una etiqueta sin cerrar no.
• Falta una imagen externa. Las imágenes que apuntan a otras direcciones web se eliminan a propósito. Incrústalas como datos en el archivo.
• Los bordes se ven blandos. Aumenta el tamaño. Ampliar un SVG no pierde calidad; ampliar el PNG exportado, sí.