Herramienta gratis en el navegador

Vectorizar una imagen online gratis: de PNG o JPG a SVG

Suelta un PNG o JPG y este vectorizador de imágenes lo convierte en SVG en esta misma página: no se sube nada a ningún sitio. Reduce la imagen a colores planos, sigue el contorno de cada región de cada color y escribe un trazado por color. Es justo lo que necesita un logo, un dibujo lineal, un gráfico o un diagrama escaneado. No está pensado para fotografías, y más abajo explicamos con claridad por qué.

Gratis, sin registroFunciona en tu navegador, sin subir nadaVectorización en colores planos, de 2 a 16Descarga en SVG
Imagen original320 × 240 px

Generando el ejemplo…

Ejemplo incluido: un gráfico de barras que solo existe como PNG

SVG vectorizado5 trazados · 1324 puntos · 9.6 kB

Polígonos, un trazado por color. El fondo de cuadros asoma donde no se pintó nada.

Trazados
5
uno por capa de color
Puntos
1324
2338 antes de simplificar
Anillos
15
1 son huecos
Tamaño del SVG
9.6 kB
5 colores en la paleta

Suelta aquí un PNG, JPG, WebP, GIF o BMP

Tu navegador decodifica el archivo y lo vectoriza en esta página. Nunca se sube, así que no hay más límite de tamaño que lo que admita tu propio dispositivo.

Colores suficientes para las series, tolerancia baja para que los ejes queden rectos y fondo conservado.

Las imágenes más grandes se reducen a este tamaño antes de vectorizar, y eso es lo que mantiene la página ágil. Después, el SVG es independiente de la resolución, así que un tamaño de trabajo mayor te da precisión en los bordes, no tamaño de salida, y a cambio cuesta puntos.

La imagen se reduce a esta cantidad de colores planos mediante corte de mediana, y cada uno se convierte en un trazado. Dos colores dan una silueta; ocho suelen bastar para un gráfico.

Cuánto puede alejarse un contorno del borde de los píxeles al eliminar puntos. Con 0 obtienes la escalera exacta; a 1 px los bordes rectos ya quedan limpios y las curvas siguen siendo suaves.

Se descartan las regiones y los huecos más pequeños que este valor: bloques de JPEG, polvo del escáner y píxeles sueltos. Con este ajuste se descartaron 123 regiones.

  • #fcfcfa5 anillos, 450 puntos
  • #0072b24 anillos, 156 puntos
  • #d55e002 anillos, 12 puntos
  • #3341552 anillos, 466 puntos
  • #009e732 anillos, 240 puntos

Así se ve la vectorización en colores planos

Un dibujo lineal a tinta escaneado junto a su SVG vectorizado: el escaneo, gris y con motas; el trazado, negro sólido sobre un blanco limpio

Dibujo lineal escaneado

Dos colores, fondo blanco eliminado y un área mínima de región lo bastante alta para descartar el grano del papel. Un escaneo tiene miles de píxeles casi grises a lo largo de cada trazo; reducirlo a dos colores planos es lo que convierte el trazo en una forma.

Un gráfico de barras que solo existe como PNG junto al mismo gráfico vectorizado en SVG, con los bordes de las barras y las líneas de los ejes nítidos en la versión vectorial

Un gráfico que solo tienes en PNG

El motivo más habitual para llegar aquí: la figura está en una presentación o en un artículo antiguo y el script que generó el gráfico se ha perdido. Ocho colores bastan para las series y los ejes, y una tolerancia baja mantiene rectas las líneas de los ejes.

El mismo logo vectorizado dos veces, con dos colores y con ocho, donde la versión de ocho colores conserva el degradado como cuatro franjas visibles

Dos colores frente a ocho

Más colores no es mejor. Con dos, el logo es una silueta limpia; con ocho, el sombreado suave se convierte en cuatro franjas visibles, porque la vectorización en colores planos no puede representar un degradado y lo posteriza.

Un detalle de un diagrama ampliado ocho veces: a la izquierda, píxeles de mapa de bits en bloques; a la derecha, bordes vectoriales nítidos

Por qué una imagen vectorial escala sin perder nitidez

La misma esquina ampliada ocho veces. El mapa de bits no tiene nada más que mostrar que su propia cuadrícula de píxeles; el SVG vuelve a dibujar el borde al tamaño que pidan la imprenta o la revista.

Una corona circular vectorizada en SVG con el disco interior realmente transparente, sobre un fondo de cuadros, junto a una vista de alambre de sus dos anillos

Huecos que son huecos de verdad

El contorno exterior y el hueco que encierra se vectorizan como dos anillos que giran en sentidos opuestos, y el trazado se escribe con fill-rule evenodd. El centro de una letra O, de una corona circular o de un gráfico de anillo queda vacío en lugar de rellenarse por encima.

Una fotografía vectorizada en SVG, con manchas planas posterizadas y miles de regiones diminutas en lugar de tonos suaves

Qué pasa con una fotografía

Lo mostramos porque es la pregunta que todo el mundo hace. Una fotografía no tiene regiones planas que encontrar, así que el trazado se las inventa: miles de manchas, un archivo de varios megabytes y una imagen que se ve peor que la original a cualquier tamaño.

Cómo convertir una imagen en vectorial

Toda la conversión ocurre en la página: para vectorizar una imagen online aquí no hay cola de espera, ni cuenta, ni paso de subida, así que el único límite es lo que tu propio navegador pueda decodificar.

  • Suelta un PNG, JPG, WebP, GIF o BMP en el recuadro, o elige un archivo. El navegador lo decodifica y lo dibuja en un lienzo (canvas), remuestreado para que su lado más largo se ajuste al tamaño de trabajo que hayas elegido.
  • Elige el número de colores. Es la decisión que más importa: la imagen se reduce a esa cantidad de colores planos y cada uno se convierte en un único trazado del SVG.
  • Aumenta la tolerancia de simplificación hasta que los contornos dejen de parecer una escalera. Alrededor de 1 píxel es lo adecuado para la mayoría de las ilustraciones; 0 conserva el borde exacto de los píxeles.
  • Aumenta el área mínima de región hasta que desaparezcan las motas. Si no, el polvo del escáner, los bloques de compresión JPEG y los píxeles sueltos se convertirían cada uno en su propio polígono diminuto.
  • Activa la eliminación del fondo blanco si quieres que la ilustración quede sobre lo que haya detrás en lugar de sobre un rectángulo blanco. El papel escaneado blanquecino cuenta como blanco.
  • Revisa el número de puntos. Es la medida honesta de lo pesado que es el archivo; descarga el SVG cuando la cifra resulte razonable para el nivel de detalle que ves.

Qué hace realmente la vectorización

Conviene explicarlo con precisión, porque “vectorizar” se usa a la ligera y el resultado solo es tan bueno como lo que el proceso hace de verdad. Son cuatro pasos, todos en tu navegador.

  • Cuantización de color por corte de mediana (median cut). Los píxeles se reparten en un histograma de color de 32 768 casillas, que se divide una y otra vez hasta tener tantas cajas como colores pediste, y cada caja se convierte en un color de la paleta: la media real de sus píxeles. La caja elegida para la siguiente división es la que tiene el mayor producto de número de píxeles por amplitud de color, no simplemente la que tiene más píxeles, para que la enorme extensión de papel casi blanco de un escaneo no se trague toda la paleta.
  • Una máscara binaria por color y, después, seguimiento de contornos. El algoritmo recorre las aristas que separan un píxel relleno de un vecino vacío, lo que da el contorno exacto de la región, alineado con los ejes, en lugar de un contorno desplazado medio píxel hacia dentro. Dos regiones que se tocan por una esquina salen como dos formas, no como una sola figura en ocho unida por un punto.
  • Los huecos se trazan como anillos separados con el sentido de giro opuesto, y cada trazado se escribe con fill-rule evenodd, así que el hueco queda realmente vacío. El interior de una letra O sigue abierto.
  • Simplificación con Ramer-Douglas-Peucker, con la tolerancia que hayas fijado. Cada punto del resultado es un punto que estaba en el borde de los píxeles: no se interpola nada.
  • El resultado son polígonos. Esta herramienta no ajusta curvas de Bézier, así que un círculo vectorizado es un polígono de muchos lados y no un arco. Con una tolerancia razonable no se nota la diferencia ni en pantalla ni impreso, pero si abres el SVG en un editor encontrarás segmentos de línea, y conviene que lo sepas antes de prometerle a alguien una curva.

Qué imágenes se vectorizan bien y cuáles no

Pasar de imagen a vector con este método consiste en encontrar regiones de un solo color. Todo lo que determina qué imágenes funcionan se deduce de esa única frase.

  • Funciona bien: logos y logotipos tipográficos, dibujo lineal a tinta, diagramas y figuras escaneados, diagramas de flujo, mapas, capturas de pantalla de gráficos, gráficos de barras y de líneas, iconos, sellos y emblemas, dibujos técnicos con rayado cruzado. Todos son regiones planas con bordes definidos.
  • Funciona con cuidado: capturas de pantalla y texto con suavizado de bordes (antialiasing). Los píxeles suaves de cada borde se asignan al color plano más cercano, lo que puede dejar un halo fino. Con más colores, el halo forma su propia capa; con menos, queda absorbido. El texto pequeño se vectoriza de forma legible, pero como contornos, no como letras editables.
  • No funciona: fotografías. Una fotografía es de tono continuo —no hay regiones planas que encontrar—, así que el trazado tiene que inventarlas, y lo que obtienes es un mapa de manchas posterizado con miles de regiones y un archivo más grande que el JPG de partida. Ningún ajuste lo arregla, porque el problema es la imagen, no los parámetros.
  • No funciona: degradados, sombras suaves, desenfoques, resplandores y superposiciones semitransparentes. Cada uno se convierte en un conjunto de franjas visibles. Si el original tiene un degradado, las opciones honestas son vectorizar a dos colores y volver a aplicar el degradado tú mismo en un editor, o buscar el archivo original.
  • Ya es vectorial: si la figura salió de una biblioteca de gráficos, una herramienta CAD o un programa de dibujo, busca primero el SVG, PDF o EPS original. Vectorizar un PNG exportado de un archivo vectorial siempre pierde algo: las coordenadas exactas, las agrupaciones, el texto como texto.

Los cuatro controles y lo que sacrifica cada uno

Cada control renuncia a una cosa para conseguir otra. Saber qué cuesta mover cada uno en cada sentido es más rápido que ir a ciegas.

  • Colores, de 2 a 16. Con muy pocos, partes distintas de la imagen se funden en una sola forma. Con demasiados, el suavizado de cada borde obtiene su propia capa, lo que multiplica el número de trazados sin añadir nada que se vea. Cuenta los colores planos que realmente puedes nombrar en la imagen y empieza por ahí.
  • Tolerancia de simplificación, en píxeles. Con 0, el contorno sigue exactamente la cuadrícula de píxeles y, ampliado, parece una escalera. Al aumentarla, la escalera se convierte en tramos rectos, y si la aumentas más empieza a recortar esquinas de detalles reales. Los elementos finos desaparecen primero, así que si un trazo se esfuma, esta es la razón.
  • Área mínima de región, en píxeles cuadrados. Descarta las regiones y los huecos más pequeños que el umbral. Un escaneo suele necesitar 20 o más; una exportación limpia, casi nada. Un hueco solo puede ser más pequeño que la región que lo rodea, así que aumentar este valor nunca deja un hueco suelto dentro de una forma descartada.
  • Eliminación del fondo blanco. Descarta cualquier capa cuyo color sea casi blanco en lugar de pintarla. Es útil para poner un dibujo lineal sobre una diapositiva de color; no es lo que quieres si el blanco forma parte de la ilustración, por ejemplo el blanco de los ojos o los huecos de un diagrama que deben seguir siendo opacos.
  • Tamaño de trabajo. Cuanto mayor, más píxeles se usan para medir el borde, así que el trazado es más fiel y tiene más puntos. No cambia el tamaño al que se puede dibujar el SVG —un vector no tiene resolución—, así que auméntalo para ganar precisión, no tamaño de salida.

Después de descargar

Un SVG es un archivo de texto lleno de coordenadas, y por eso compensa más que un PNG más grande.

  • Escala sin límite. El mismo archivo se imprime en una columna de revista de 90 mm y en un póster A0 sin pixelado ni remuestreo, que es el motivo habitual por el que una editorial pide ilustraciones vectoriales.
  • Cada color es un trazado, así que cambiar el color de una capa en Illustrator, Inkscape, Affinity o Figma es cuestión de un clic. Las capas se escriben de mayor a menor, así que el fondo queda al principio del archivo.
  • Se edita como geometría. Puedes borrar una región, mover un punto o unir dos formas. Lo que no puedes es editar el texto, porque las letras vectorizadas son contornos: si hay que cambiar las etiquetas, vuelve a etiquetar la figura original, no el trazado.
  • Se inserta directamente. LaTeX lo admite con el paquete svg o tras convertirlo a PDF, PowerPoint y Word lo importan como formas, y un navegador lo muestra en línea sin ninguna petición adicional.
  • Compara versiones y controla los cambios. Como es texto, dos vectorizaciones de la misma figura se pueden comparar línea a línea, algo que un PNG binario no permite.

Preguntas frecuentes

¿Este vectorizador de imágenes es gratis y sin registro?

Sí, y no tienes que registrarte en nada. La vectorización se hace en tu navegador: no cuesta créditos, no lleva marca de agua y puedes vectorizar gratis tantas imágenes o logos como quieras. Tener cuenta no cambia nada en esta página.

¿Cómo vectorizar un PNG y convertirlo a SVG?

Suelta el PNG en el recuadro de esta página, elige cuántos colores planos quieres, aumenta la tolerancia de simplificación hasta que los contornos se vean limpios, aumenta el área mínima de región hasta que desaparezcan las motas y descarga el SVG. Para vectorizar un logo o un dibujo lineal suelen bastar de dos a cuatro colores y una tolerancia cercana a 1 píxel; para un gráfico, ocho colores y una tolerancia más baja.

¿Se sube mi imagen a algún servidor?

No. El navegador decodifica el archivo, lo dibuja en un lienzo y el código de vectorización de esta página lee esos píxeles. Ninguna petición de red transporta tu imagen, lo que también significa que la herramienta funciona sin conexión una vez cargada la página y que las figuras confidenciales o inéditas nunca salen de tu dispositivo.

¿Sirve para vectorizar una fotografía?

No de forma útil, y es mejor decirlo que dejar que lo descubras tú. La vectorización funciona buscando regiones de un único color plano, y una fotografía no tiene ninguna: el tono varía de forma continua. Lo que obtienes es un mapa de manchas posterizado: miles de regiones diminutas, un archivo a menudo más grande que el JPG original y una imagen que se ve peor a cualquier tamaño. Si necesitas convertir una fotografía en dibujo lineal, eso es un trabajo de ilustración, no de conversión.

¿Ajusta curvas o el resultado son polígonos?

Polígonos. Los contornos se construyen a partir del borde real de los píxeles y se simplifican con Ramer-Douglas-Peucker, así que cada punto del SVG era un punto del borde y no se interpola nada en forma de arco. Con una tolerancia de alrededor de 1 píxel, un círculo vectorizado se ve suave, pero es un polígono de muchos lados, y un editor te mostrará segmentos de línea en lugar de manejadores de Bézier.

¿Por qué mi SVG vectorizado tiene bordes dentados?

O bien la tolerancia está en 0 o cerca de 0, lo que conserva la escalera de píxeles tal cual, o bien el tamaño de trabajo es pequeño en relación con el detalle. Primero aumenta la tolerancia a 1 píxel aproximadamente: eso convierte la escalera en tramos rectos. Si la ilustración es intrincada, aumenta también el tamaño de trabajo para que el borde se mida sobre más píxeles antes de simplificarlo.

¿Cómo consigo un fondo transparente en lugar de un rectángulo blanco?

Activa la eliminación del fondo blanco. Cualquier capa cuyo color cuantizado sea casi blanco se descarta en lugar de pintarse, así que el SVG no tiene relleno donde estaba el papel y se ve lo que haya detrás. El papel escaneado blanquecino se trata como blanco. Déjala desactivada cuando el blanco forme parte de la ilustración.

¿Qué diferencia hay entre una imagen de mapa de bits y una imagen vectorial?

Una imagen de mapa de bits —PNG, JPG, GIF, WebP— es una cuadrícula fija de píxeles, así que al ampliarla solo consigues que los píxeles se vean más grandes. Una imagen vectorial —SVG, EPS, ilustraciones en PDF— guarda las formas como coordenadas y se vuelve a dibujar al tamaño que se pida, y por eso la piden las editoriales y las imprentas. Convertir una imagen en vectorial significa recuperar formas a partir de píxeles, y eso solo es posible donde los píxeles forman regiones planas bien definidas.

¿Hay que redibujar la figura en lugar de convertirla?

Si el original es una fotografía, un degradado o un diagrama del que ya no tienes el archivo fuente, SciFigure AI dibuja una figura limpia y con etiquetas a partir de una descripción, en lugar de vectorizar un mapa de bits.

Abre el creador de diagramas científicos