Imagen a SVG

Sobre convertir una imagen en SVG

Un PNG es una rejilla de píxeles. Si lo amplías, obtienes píxeles más grandes. Un SVG es un conjunto de formas descritas con matemáticas, así que se mantiene nítido a cualquier tamaño: en una tarjeta de visita, en una valla publicitaria, en una pantalla que todavía no existe.

El problema es que casi nunca tienes el SVG. Tienes un logotipo que alguien te envió por correo como PNG de 400 px, y ahora hay que ponerlo en un rótulo.

Esta herramienta traza la imagen convirtiéndola en formas. Encuentra los bordes entre colores y dibuja trazados vectoriales de verdad a lo largo de ellos, así que lo que sale es un SVG como es debido: se puede escalar, recolorear y abrir en cualquier programa de diseño.

Lo que el vectorizado puede y no puede hacer

Vectorizar no es recuperar el archivo original. Es dibujar alrededor de lo que se ve, y el resultado depende por completo de lo que le des.

Funciona bien con:

• Logotipos y logos tipográficos con colores planos
• Iconos, símbolos y pictogramas
• Dibujos lineales, bocetos y entintados
• Diagramas, mapas y planos
• Plantillas, siluetas y sellos

No funciona con fotografías. Una foto no tiene bordes limpios entre colores: tiene millones de transiciones graduales. Vectorizar eso da miles de manchitas de color: técnicamente un SVG, normalmente *más grande* que la foto de la que salió, y sin ninguna utilidad. La herramienta detecta lo que parece una foto y te lo dice, en vez de entregarte un archivo de 12 MB que parece pintura derramada.

Los ajustes

Empieza diciendo qué es la imagen: Logotipo o icono, Dibujo lineal o Ilustración detallada. Eso solo coloca los tres deslizadores en un punto de partida sensato; luego puedes ajustar.

• El número de colores es lo que más importa. El vectorizado reduce la imagen a una paleta pequeña y dibuja alrededor de cada región. Un logotipo de dos colores vectorizado con 8 recoge el borde del suavizado como formas extra; con 2 sale limpio. Menos colores es casi siempre mejor que más.
• El suavizado endereza el temblor que el antialiasing deja a lo largo de un borde. Súbelo si los contornos se ven dentados; bájalo si se está redondeando detalle real.
• El detalle decide lo pequeña que puede ser una forma antes de descartarse. Bájalo para tirar motas y ruido; súbelo para conservar rasgos finos en un dibujo intrincado.

Vectoriza, mira el resultado a la derecha, ajusta, vectoriza otra vez. Son segundos.

Dejar fuera el fondo

Dejar fuera el fondo descarta la gran forma plana que hay detrás del dibujo, de modo que el SVG tiene fondo transparente en lugar de un rectángulo blanco.

Úsalo para un logotipo que va a ir en la página de otra persona o sobre una cabecera de color. Déjalo sin marcar si el fondo forma parte de verdad del diseño.

Revisa los bordes antes de usarlo

Amplía el panel vectorizado de la derecha. Las esquinas que deberían ser afiladas, las curvas que deberían ser suaves y el texto pequeño son los sitios donde el vectorizado enseña sus límites.

Si el resultado está casi bien pero sucio, prueba primero con menos colores. Si el original es una imagen muy pequeña, el vectorizado solo puede adivinar un detalle que nunca estuvo ahí: un favicon de 64 px no se convertirá en un logotipo nítido.

No se sube nada

La imagen se lee y se vectoriza dentro de tu navegador. Nunca llega a un servidor, lo que importa cuando el archivo es un logotipo aún no publicado, la marca de un cliente o una obra bajo acuerdo de confidencialidad.

También significa que no hay límite de tamaño ni espera. Las imágenes muy grandes se reducen antes de vectorizar, porque a partir de cierto punto los píxeles de más solo añaden ruido, no detalle.

Para qué se usa

• Un logotipo que solo existe como PNG y ahora tiene que ir a rotulación o imprenta
• Un icono que hay que recolorear o redimensionar desde código
• Un boceto o dibujo lineal que se prepara para corte, grabado o bordado
• Una plantilla o silueta para una cortadora de vinilo o un láser
• Convertir un diagrama en algo editable
• Conseguir un SVG para una web, donde se ve nítido en cualquier pantalla

Conviene saber

• El SVG lleva una viewBox correcta, así que escala bien cuando le pones un ancho en CSS o HTML
• Copiar el código SVG deja el marcado en el portapapeles, listo para pegar en una página o un componente
• El resultado se abre en Illustrator, Inkscape, Figma y Affinity, donde los trazados se pueden editar a mano
• Miles de formas significan que los ajustes no encajan con esta imagen, no que la herramienta haya fallado: reduce los colores
• Para ir al revés, usa SVG a PNG o SVG a JPG
• Para quitarle el fondo a una foto, usa Quitar el fondo

Cómo se usa

• Haz clic en Haz clic para subir o arrastra tu logotipo o dibujo al recuadro
• Elige qué es: Logotipo o icono, Dibujo lineal o Ilustración detallada
• Pulsa Vectorizar y mira el resultado a la derecha
• Si los bordes salen sucios, ajusta primero el número de colores y vectoriza otra vez
• Marca Dejar fuera el fondo si necesitas transparencia
• Pulsa Descargar SVG, o Copiar el código SVG para pegarlo directamente en una página

Herramientas relacionadas

• SVG a PNG — la dirección contraria
• SVG a JPG — un SVG como imagen plana
• Quitar el fondo — recortar un sujeto de una foto
• Ampliar imagen — agrandar un mapa de bits sin vectorizarlo
• Generador de favicon — convertir el resultado en el icono de un sitio
• Comprimir imagen — cuando al final un mapa de bits era la respuesta correcta