¿Cómo convertir una imagen PNG a un SVG? [cerrado]


266

¿Cómo convertir una imagen PNG a un SVG?


21
¿Programáticamente o no? ¿Qué idioma, plataforma?
Michael Petrotta

¿A través de alguna aplicación o mediante comandos del sistema operativo? Si a través del sistema operativo podría decir qué sistema operativo .. Gracias
Mahesh Velaga

Respuestas:


130

Hay un sitio web donde puede cargar su imagen y ver el resultado.

http://vectormagic.com/home

Pero si desea descargar su imagen svg, debe registrarse. (Si te registras, obtienes 2 imágenes gratis)


122

potraceno es compatible con PNG como archivo de entrada, pero PNM .
Por lo tanto, primero convertde PNG a PNM:

convert file.png file.pnm        # PNG to PNM
potrace file.pnm -s -o file.svg  # PNM to SVG

Explicar opciones

  • potrace -s=> El archivo de salida es S VG
  • potrace -o file.svg => Escribir salida en file.svg

Ejemplo

Archivo de entrada = 2017.png Fichero de entrada

convert 2017.png 2017.pnm

Archivo temporal = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

Archivo de salida = 2017.svg Archivo de salida

Guión

ykarikos propone un script png2svg.sh que he mejorado:

#!/bin/bash

File_png="${1?:Usage: $0 file.png}"

if [[ ! -s "$File_png" ]]; then
  echo >&2 "The first argument ($File_png)"
  echo >&2 "must be a file having a size greater than zero"
  ( set -x ; ls -s "$File_png" )
  exit 1
fi

File="${File_png%.*}"

convert "$File_png" "$File.pnm"        # PNG to PNM
potrace "$File.pnm" -s -o "$File.svg"  # PNM to SVG
rm "$File.pnm"                         # Remove PNM

Comando de una línea

Si desea convertir muchos archivos, también puede usar el siguiente comando de una línea:

( set -x ; for f_png in *.png ; do f="${f_png%.png}" ; convert "$f_png" "$f.pnm" && potrace "$f.pnm" -s -o "$f.svg" ; done )

Ver también

Vea también esta buena comparación de convertidores de trama a vector en Wikipedia.


2
La imagen pierde color cuando se convierte de pnm a svg usando potrace. ¿Hay alguna forma de preservar el color?
Codificador

1
Hola @mundella Siempre lo he usado potracepara iconos en blanco y negro. Gracias por sus comentarios. Pero lo siento, no tengo idea de cómo preservar los colores ... ¡Ho! Tengo una idea: si su imagen original tiene pocos colores (digamos tres colores únicos), puede crear tres imágenes iniciales (una para cada color). Luego convierta a SVG. Y finalmente, combine los tres contenidos SVG en un archivo (SVG está basado en XML). Espero que esto pueda ayudar ... Saludos ;-)
olibre

@olibre ¿Hay alguna plataforma para hacer pragmáticamente las mismas cosas
Ami Kamboj

1
Hola @AmiKamboj. No estoy seguro de entender tu pregunta. Los comandos converty potraceestán disponibles en muchas plataformas. Estoy usando computadoras basadas en Linux. Acabo de usar estos comandos ayer para producir un SVG a partir de un papel escaneado. Puede ver el resultado: cpp-frug.github.io/images/Cpp-President-2017.svg Por favor, explique más sobre su objetivo. ¿Qué quieres / maravilla? ¿Cuál es tu necesidad / deseo? Saludos ;-)
olibre

1
He usado casi todos los convertidores de x a svg en línea que existen. El paquete potrace npm los sacó a todos del agua. Es impresionante.
tsteve

59

Un png es un estilo de imagen de mapa de bits y un SVG es un diseño gráfico basado en vectores que admite mapas de bits, por lo que no es como si convirtiera la imagen en vectores, solo una imagen incrustada en un formato basado en vectores. Puede hacerlo utilizando http://www.inkscape.org/, que es gratuito. Lo incrustaría, sin embargo, también tiene un motor similar a Live Trace que intentará convertirlo en rutas si lo desea (usando potrace). Ver seguimiento en vivo en adobe illustrator (comercial) es un ejemplo:

http://graphicssoft.about.com/od/illustrator/ss/sflivetrace.htm


1
He usado la traza en vivo en Inkscape para recrear logotipos con originales perdidos hace mucho tiempo. A menos que la última versión haya realizado algunas mejoras, es un poco impredecible. Dicho esto, también he rastreado manualmente algunos logotipos en Inkscape y los he manejado bastante bien.
AnonJr

12
Aquí hay una explicación de cómo hacer esto en Inkscape: wiki.inkscape.org/wiki/index.php/Potrace
Erel Segal-Halevi

gran comentario Hemos notado que iOS 7.1 Safari no mostrará imágenes incrustadas en svg mientras que Chrome no tiene ningún problema con él
ProblemsOfSumit

28

Es posible que desee mirar potrace .


1
este Potrace es muy preciso cuando sabes cómo usarlo: pero no es multicolor 1.) convierte tu archivo a BMP 2.) (para la parte precisa) convierte bmp a alta resolución (estíralo) 3.) colorea las formas desea trazar en negro 4.) convertir 5.) cambiar el ancho y la altura al original 6.) apreciar el trazado preciso.
PauAI

18

Fácil

  1. Descargar Inkscape (es completamente gratis)
  2. Siga las instrucciones en este breve video de youtube

Como verá, si desea hacer muchas otras cosas inteligentes .svg, también puede hacerlo usando Inkscape.

Una observación no técnica: personalmente prefiero este método sobre las ofertas de sitios web "gratis" porque, aparte de requerir a menudo el registro, al cargar la imagen, en todos los términos prácticos, uno está dando la imagen al propietario del sitio web.


1
¿Por qué el voto negativo? Utilizo este enfoque con mucho éxito. Al menos tenga la cortesía de explicar por qué las personas pueden beneficiarse de sus ideas.
Pancho

55
Seguir esas instrucciones solo envuelve la imagen con SVG XML: no convierte nada en datos de ruta.
Robert

@Robert: gracias por la información, estaba felizmente ignorante ya que funcionó bien para mis propósitos. Sin embargo, esto no resta valor al hecho de que Inkscape puede realizar una conversión completa de PNG a SVG, y mucho más. Para ilustrar a cualquier persona interesada, modifiqué mi respuesta para incluir un breve video explicativo.
Pancho

¿Es eso realmente así? Revisé el SVG generado y parece tener datos de ruta, a diferencia del método mobilefish ...
dario_ramos

Hay algunas personas que están rechazando esto de vez en cuando sin ninguna causa justificable y estoy empezando a formar la opinión de que es malicioso. Si realmente hay una razón, no hay problema, deje de ser flojo y agregue valor a esta comunidad proporcionándola.
Pancho

15

con Adobe Illustrator:

Abra Adobe Illustrator. Haga clic en "Archivo" y seleccione "Abrir" para cargar el archivo .PNG en el programa. Edite la imagen según sea necesario antes de guardarla como un archivo .SVG. Haga clic en "Archivo" y seleccione "Guardar como". Cree un nuevo nombre de archivo o use el nombre existente. Asegúrese de que el tipo de archivo seleccionado sea SVG. Elija un directorio y haga clic en "Guardar" para guardar el archivo.

o

convertidor en línea http://image.online-convert.com/convert-to-svg

prefiero AI porque puedes hacer los cambios necesarios

buena suerte


3
+1 para online-convert.com. Lo probé ahora con un par de siluetas monocromas ... funcionó a la perfección ... También parece ser completamente libre.
nedR

Sí, uno de los mejores convertidores ... Gracias
JayD

1
No me di cuenta de que Illustrator tenía esto preparado. Tener todo como .ai ya, esto me ahorrará un montón de tiempo.
Doyle Lewis

10

Para mi sorpresa, potrace que el solo puede procesar en blanco y negro. Eso puede estar bien para su caso de uso, pero algunos pueden considerar que la falta de trazado de color es problemática.

Personalmente, he tenido resultados satisfactorios con Vector Magic

Aún así no es perfecto.


9

Una nota para aquellos que usan potrace e imagemagick , convertir imágenes PNG con transparencia a PPM no parece funcionar muy bien. Aquí hay un ejemplo que usa la -flattenbandera convertpara manejar esto:

sudo apt-get install potrace imagemagick
convert -flatten input.png output.ppm
potrace -s output.ppm -o output.svg
rm output.ppm

Otro fenómeno interesante es que puede usar PPM (256 * 3 colores, es decir, RGB), PGM (256 colores, es decir, escala de grises) o PBM (2 colores, es decir, blanco o negro solamente) como formato de entrada. Según mis limitadas observaciones, parecería que en las imágenes con suavizado, PPM y PGM (que producen SVG idénticos hasta donde puedo ver) reducen el área coloreada y PBM expande el área coloreada (aunque solo un poco). Presumiblemente esta es la diferencia entre una pixel > (256 / 2)prueba y una pixel > 0prueba. Puede cambiar entre los tres cambiando la extensión del archivo, es decir. los siguientes usan PBM :

sudo apt-get install potrace imagemagick
convert -flatten input.png output.pbm
potrace -s output.pbm -o output.svg
rm output.pbm

7

También puedes probar http://image.online-convert.com/convert-to-svg

Siempre lo uso para mis necesidades.


Realmente funciona de maravilla incluso en imágenes comlex. Realmente recomiendo esta herramienta.
Atıfcan Ergin

Desafortunadamente no funcionó para mí.
adamj

No funcionará bien si la imagen tiene transparencia
Genaut

No puede esperar que el script tome una foto de usted mismo y obtenga un SVG perfectamente en capas como resultado, no existe tal cosa. Si tiene una forma simple y desea obtener la (s) ruta (s), esto lo hace. Hice muchos íconos de fuentes con esa página y nunca fallé para mí.
thednp

@thednp mi imagen salió en blanco y negro
iOSAndroidWindowsMobileAppsDev

7

¡Acabo de encontrar esta pregunta y respuestas ya que estoy tratando de hacer lo mismo! No quería usar algunas de las otras herramientas mencionadas. (No quiero regalar mi correo electrónico y no quiero pagar). Descubrí que Inkscape (v0.91) puede hacer un trabajo bastante bueno. Este tutorial es rápido y fácil de entender.

Es tan simple como seleccionar su mapa de bits en Inkskape y Shift + Alt + B.

Detección de bordes con la herramienta de mapa de bits Inksape Trace basada en potrace


4

Dependiendo de por qué desea convertir de .png a .svg, es posible que no tenga que pasar por el problema. La conversión de .png (ráster) a .svg (vector) puede ser una molestia si no está muy familiarizado con las herramientas disponibles, o si no es un diseñador gráfico de oficio.

Si alguien le envía un archivo grande de alta resolución (por ejemplo, 1024x1024), puede cambiar el tamaño a casi cualquier tamaño que desee en GIMP. A menudo, tendrá problemas para cambiar el tamaño de una imagen si la resolución (número de píxeles por pulgada) es demasiado baja. Para rectificar esto en GIMP, puede:

  1. File -> Open: su archivo .png
  2. Image -> Image Properties: verifique la Resolución y el espacio de color. Desea una resolución de alrededor de 300 ppp. En la mayoría de los casos, desea que el espacio de color sea RGB.
  3. Image -> Mode: establecer en RGB
  4. Image -> Scale Image: deje el tamaño solo, establezca y la resolución Y a 300 o más. Hit Scale.
  5. Image -> Scale Image: la resolución ahora debería ser 300 y ahora puede cambiar el tamaño de la imagen a casi cualquier tamaño que desee.

No es tan fácil como cambiar el tamaño de un archivo .svg, pero definitivamente más fácil y rápido que tratar de convertir un .png a .svg, si ya tiene una imagen grande de alta resolución.


2

Supongo que desea escribir software para hacer esto. Para hacerlo ingenuamente, solo buscaría líneas y establecería los vectores. Para hacerlo de forma inteligente, intenta ajustar formas en el dibujo (ajuste del modelo). Además, debe intentar determinar las regiones de mapa de bits (regiones que no puede modelar a través de vergüenzas o aplicar texturas. No recomendaría seguir esta ruta, ya que tomará bastante tiempo y requerirá un poco de gráficos y conocimiento de visión por computadora. Sin embargo, la salida será mucho y escalará mucho mejor que su salida original.



0

Esta herramienta está funcionando muy bien en este momento.

http://www.mobilefish.com/services/image2svg/image2svg.php


17
Esto incrusta la imagen en svg, no en gráficos vectoriales reales
Paul Gobée

Esto convirtió uno de mis pngs coloreados en el que otros convertidores en línea no pudieron convertir correctamente. Pensé que estaba funcionando ya que puedo abrirlo en el navegador, pero cuando intenté abrirlo en otra herramienta, tiene un error. Tal vez por el comentario mencionado anteriormente.
vida

-1

Si estás en algún sistema Linux, imagemagick es perfecto. Es decir

convert somefile.png somefile.svg

Esto funciona con montones de diferentes formatos.

Sin embargo, para otros medios, como videos y uso de audio (ffmpeg) , sé que has indicado claramente png a svg; Todavía está relacionado con los medios.

ffmpeg -i somefile.mp3 somefile.ogg

Solo un consejo para si desea revisar muchos archivos; un bucle con trucos básicos de shell.

for f in *.jpg; do convert $f ${f%jpg}png; done

Eso elimina el jpg y agrega png, que le dice a convertir lo que desea.


2
Imagemagick funciona en otras plataformas, no solo en 'Linux'.
Lunatik

25
Esto técnicamente funciona, sin embargo, el archivo svg generado no es realmente un gráfico vectorial, solo contiene el mapa de bits original "tal cual". Por lo tanto, cuando lo amplía, aún obtiene la calidad degradada de una imagen de trama.
Erel Segal-Halevi

77
@archeyDevil no, eso no es "convertir" a SVG, eso es "incrustar" el mapa de bits dentro de un SVG vacío. No le sirve a nadie.
Adam

44
@archeyDevil El título de la pregunta es "convertir ... a SVG". Tu respuesta no se convierte. Se incrusta. PNG es un formato de mapa de bits, SVG es un formato vectorial. Diferencia masiva Incrustar es inútil y no merece una pregunta SO. En mi humilde opinión
Adam

3
Soy consciente de que no se convierte. Lo hice sin embargo; publique esto para aquellos que no necesitan un análisis vectorial, pero solo necesitan un cambio rápido y sucio entre los tipos de archivo.
DarkFox 01 de
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.