Cómo descargar una imagen SVG, o convertirla

Míralo — 19 segundos

Sale vector, o sale mapa de bits

tutorial · convertir

Mira cómo el sufijo del campo de nombre pasa de .svg a .png y aparece el selector de tamaño junto al selector de formato: el popup solo ofrece tamaño cuando el tamaño significa algo.

Qué muestra la grabación

1. La imagen es un SVG, así que no tiene tamaño fijo
2. Elige la imagen que quieres
3. Llévate el vector si vas a editarlo
4. O cambia a PNG si necesitas un mapa de bits
5. Dibujado en tu equipo a 1×, 2× o 4×
6. El mismo icono, ahora un PNG con píxeles perfectos

Elige a conciencia

¿Cuál necesitas de verdad?

Es una decisión que conviene tomar a propósito, porque convertir es de ida. Un vector siempre puede convertirse luego en mapa de bits; un mapa de bits nunca vuelve a ser vector.

Quédate el SVG cuando el destino sea una web o una app, una herramienta de diseño donde vayas a editar las formas, impresión de cualquier tipo, o cualquier sitio donde el tamaño aún no esté decidido. Se mantiene nítido a todos los tamaños, el archivo suele ser más pequeño que un PNG equivalente y puedes reestilizarlo con CSS.

Convierte a PNG cuando el destino no acepte un SVG, y bastantes no lo hacen. La mayoría de los clientes de correo, muchos gestores de contenido antiguos, algunas plataformas de chat y redes sociales y un montón de plantillas de presentación o rechazan el SVG o lo dibujan de forma poco fiable. PowerPoint y Keynote son notoriamente inconsistentes con él. Si vas a pegarlo en un documento que tiene que verse idéntico en el equipo de otra persona, PNG es la respuesta segura.

Convierte a JPG rara vez, y solo para una ilustración de estilo fotográfico. El JPG no tiene transparencia, así que un icono sale sobre un fondo sólido, y su compresión deja artefactos visibles alrededor de los bordes duros de los que están hechos los iconos. Para cualquier cosa con color plano y bordes nítidos, el PNG es más pequeño y más limpio.

Descargar de cualquiera de las dos formas

Los dos primeros pasos son comunes; el selector de formato es donde se separan.

1. Abre el popup y encuentra la imagen. Pulsa el botón de la barra de herramientas y avanza hasta el gráfico que quieres. Funciona tanto si la imagen es una fuente <img>, marcado en línea o un fondo CSS.
2. Para el vector, simplemente descarga. Deja el formato en SVG, escribe un nombre y pulsa Descargar el actual. Obtienes el marcado original con el espacio de nombres reparado.
3. Para un mapa de bits, cambia antes el formato. Pulsa PNG o JPG en el selector. Aparece a su lado un selector de tamaño, y el sufijo del campo de nombre cambia para coincidir.
4. Elige un tamaño y descarga. 1×, 2× o 4× el tamaño intrínseco del vector. La conversión se ejecuta en tu equipo, sobre un canvas, y el resultado se descarga como cualquier otra cosa.

De qué es múltiplo el multiplicador de tamaño

Escala el tamaño intrínseco del propio vector: su width y height si los declara, y si no la extensión de su viewBox. Así, un icono de 24×24 a 4× te da un PNG de 96×96. Si el vector no declara ningún tamaño, algo común en los símbolos de sprite, se recurre a un cuadrado sensato en vez de los 300×150 por defecto de un canvas vacío.

En la práctica: 2× es el valor por defecto correcto para cualquier cosa que se vea en pantalla, porque cubre las pantallas retina. 4× es para impresión o para un gráfico que se vaya a mostrar en grande. 1× es para cuando necesitas cuadrar un tamaño exacto en píxeles y sabes lo que haces.

Transparencia

El PNG conserva el fondo transparente; el JPG no puede y lo rellena. Si conviertes un icono a JPG y aparece detrás una caja blanca o negra inesperada, no es un fallo: el formato no tiene forma de expresar transparencia. Usa PNG.

La conversión ocurre aquí, no en otro sitio

Conviene decirlo claro, porque «conversor de SVG a PNG» es, si no, una categoría de web que te exige subir tu archivo. Aquí el vector se dibuja en un canvas dentro del popup y se vuelve a leer como imagen. Es el mismo marcado saneado que produciría una descarga, dibujado a través de un elemento de imagen aislado para que nada de él se ejecute. No se sube nada, y la conversión funciona con la red desconectada.

Cuando la conversión falla

Un caso la rompe de forma fiable: un SVG que incrusta dentro una imagen rasterizada de otro origen. Dibujarlo en un canvas lo «contamina», y entonces el navegador se niega a dejar leer los píxeles de vuelta: es una regla de seguridad, no una limitación de la extensión. Verás un mensaje concreto diciéndolo. El vector en sí se sigue descargando bien; lo único que no puede seguir es la conversión a mapa de bits.

Quédate el SVG para

Web, apps, herramientas de diseño, impresión: donde el tamaño final aún no esté fijado.

Convierte para

Correo, presentaciones, gestores de contenido antiguos y cualquier sitio donde se rechace el SVG.

Tamaños

1×, 2× o 4× el tamaño intrínseco del vector. 2× encaja con casi todas las pantallas.

Dónde

En tu equipo, sobre un canvas. No se sube nada para convertirlo.

Conviene saber

Preguntas frecuentes