¿Cómo convertir un archivo SVG a PNG con ImageMagick?

Tengo un archivo SVG que tiene definido un tamaño de 16×16. Cuando puedo usar ImageMagick del programa de conversión para convertir en un PNG, luego me sale un 16×16 píxeles PNG que es demasiado pequeño:

convert test.svg test.png

Necesito para especificar el tamaño en píxeles de la salida PNG. -size parámetro parece ser ignorado, -scale parámetro ajusta el PNG después de ha sido convertido a formato PNG. El mejor resultado hasta ahora me dieron por el uso de la -density parámetro:

convert -density 1200 test.svg test.png

Pero no estoy satisfecho, porque quiero especificar el tamaño de salida en píxeles sin hacer cálculos matemáticos para calcular el valor de la densidad. Así que quiero hacer algo como esto:

convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png

Entonces, ¿qué es la magia de parámetros tengo que usar aquí?

  • por ejemplo, -size 1024x1024 está trabajando bien, ¿cuál es su imagemagick versión?
  • ImageMagick es la versión 6.6.9.7. Tal vez depende de la SVG? Mi SVG define un tamaño fijo de 16×16 en la cabecera y todas las coordenadas son los valores absolutos y no los valores de porcentaje o algo así.
  • superuser.com/questions/516095/…
  • ImageMagick-6.9.0-P16. convert-resize 1024×1024 foo.svg foo.png funciona bien.
  • -resize sólo estira la imagen convertida, con buenos resultados de calidad.
  • convert -size 1024x1024 test.svg test.png funciona bien con ImageMagick 7.0.7-0 P16 (actual versión en Chocolate repo para Windows). Sólo asegúrese de que -size aparece antes de la entrada de nombre de archivo, otro una imagen de 16×16 serán convertidos a dar una borrosa resultado.
  • FYI ImageMagick es bastante horrible cuando se trata de SVG conversiones. Por ejemplo, la posición del texto es broken. He encontrado que la mejor opción era utilizar un Nodo del módulo que aprovecha la PhantomJS, como svg2png.

InformationsquelleAutor kayahr | 2012-03-24

15 Kommentare

  1. 440

    No he sido capaz de obtener buenos resultados de ImageMagick en esta instancia, pero Inkscape hace un buen trabajo en Linux y Windows:

    inkscape -z -e test.png -w 1024 -h 1024 test.svg

    Aquí está el resultado de la ampliación de una 16×16 SVG para un 200×200 PNG usando este comando:

    ¿Cómo convertir un archivo SVG a PNG con ImageMagick?

    ¿Cómo convertir un archivo SVG a PNG con ImageMagick?

    Apenas para la referencia, mi versión de Inkscape (en Ubuntu 12.04) es:

    Inkscape 0.48.3.1 r9886 (Mar 29 2012)

    y en Windows 7, es:

    Inkscape 0.48.4 r9939 (Dec 17 2012)
    • +1 como mucho como imagemagick es de que se trate. Parece ser que hay un problema con el SVG del motor. En la mayoría de los casos, no fue capaz de obtener resultados precisos con ella. Inkscape, OTOH, funciona perfectamente bien.
    • Creo que Inkscape es el más impresionante ejemplo de OSS después de Linux en sí mismo. Gracias por la sugerencia!
    • Funciona muy bien en OSX demasiado.
    • Gran. Mi problema no era cambiar el tamaño, pero que ImageMagick convertido áreas transparentes en el SVG en las áreas en blanco en el PNG. Inkscape se mantiene la transparencia correctamente.
    • Otra cosa positiva es que Inkscape es mucho más rápido que imagemagick a convertir.
    • Usted puede usar-d 1200 establecer los DPI.
    • En OSX, con Inkscape instalado para X11, que trabajó para mí el uso de: /Applications/Inkscape.app/Contents/Resources/bin/inkscape -z -e test.png -w 1024 -h 1024 test.svg
    • Nota: Inkscape no parece haber una opción para respetar la relación de aspecto cuando se exportan. Si usted necesita eso, trate de usar rsvg (o rsvg-convert) en su lugar.
    • Para mantener el fondo transparente con ImageMagick, uso -background none opción de línea de comandos.
    • Inkscape es badass. En mac configurar un alias de alias inkscape="/Applications/Inkscape.app/Contents/Resources/bin/inkscape"
    • Esto funciona de maravilla en OSX. He instalado inkscape con homebrew barril (caskroom.io) y el comando trabajado fuera de la caja.
    • Yo era capaz de instalar esto en OSX usando homebrew con brew install homebrew/x11/inkscape
    • Si sólo se especifica la anchura O la altura, Inkscape mantener la relación de aspecto.
    • También vale la pena mencionar, para establecer un fondo blanco con inkscape en lugar de transparencia por defecto : -b white.
    • Solución agradable. El único problema es que muestra una interfaz gráfica de usuario símbolo para cada imagen que desea convertir. Cuál es la forma correcta para suprimir esa? edit: no importa, mi comando estaba equivocado. Correctamente escrito, no se producen salidas de cualquier tipo.
    • Las versiones más recientes de OS X cambiar el directorio de trabajo actual. Supongo que hay buenas razones para esto, pero significa que usted necesita para utilizar rutas absolutas para el archivo argumentos.
    • La construcción de la utilización de este método no tiene este problema: inkscape.org/en/download/mac-os/#alternative_install_0.92 Suena como el tema es si se tiene instalado en el /usr/local/bin/inkscape como un binario, o como un script que cambia CWD y execs el binario en /Applications.
    • Lote convertir en una línea usando bash y Inkscape: Si desea convertir todos los archivos svg en un directorio a un tamaño específico (30×30): for file in *.svg; do inkscape -z -e "${file/.svg/.png}" -w 30 -h 30 $file; done
    • Inkscape sólo naufragios mi SVG. Es como es ignorar a transformar declaraciones, sino también la impresión de que algunas cosas de negro, que no tiene un color de fondo cuando se procesa correctamente.
    • Nunca he visto eso antes, así que no estoy seguro de cuál puede ser el problema. Uno de los comentarios se recomienda el uso de -background none para mantener la transparencia. Yo también miró a su alrededor un poco y encontré que hay una de Inkscape error, que no se puede ejecutar en…
    • Ese error puede dar cuenta de los fondos negros sobre algunos de los elementos, para asegurarse. El texto no se transforma es un poco terrible, pero svgexport lo está haciendo, así que por el momento mi mejor idea para la conversión es el uso de phantomjs.
    • en mi humilde opinión, inkscape es una basura. Trató de instalar con cerveza, en primer lugar se ha instalado un ridic cantidad de dependencias, a continuación, colgado de 20 minutos durante el final make. Ahora no puede deshacerse de él
    • Para añadir una nota: Usted puede usar simplemente único parámetro entre la anchura y la altura y el otro parámetro de escala automática. Por ejemplo, usted puede simplemente utilizar -w 1024 y -h se escala automáticamente.

  2. 126

    Intentar svgexport:

    svgexport input.svg output.png 64x
    svgexport input.svg output.png 1024:1024

    svgexport es una simple cruz-plataforma de la herramienta de línea de comandos que he hecho para la exportación de archivos svg a jpg y png, ver aquí para obtener más opciones. Para instalar svgexport instale el mecanismo nacional de prevención, a continuación, ejecute:

    npm install svgexport -g

    Edit: Si usted encuentra un problema con la biblioteca, por favor presentarlo en GitHub, gracias!

    • svgexport trabajado muy bien para mí. La salida de los partidos de representación del navegador mucho más de cerca que ImageMagick.
    • svgexport calidad es realmente muy alta. Ahora se ha convertido en mi herramienta favorita, gracias shakiba! 🙂
    • esto funcionó bien para mí. Protector en tiempo Real en comparación con hacerlo manualmente en una interfaz gráfica de usuario de la herramienta. Bastante difícil encontrar una aplicación GUI de mac en la gama más económica de todas formas que se encarga de SVG bien
    • svgexport no hacer nada por mí en OSX, sólo acabó con la imagen en blanco
    • Funciona muy bien, pero produce una gran imagen. El uso de optipng, yo era capaz de comprimir mi logotipo de texto en vez de 3 megabytes a ~20kB.
    • Inkscape no funcionan bien en MacOS, pero este hizo el trabajo, Buen trabajo !
    • No funciona con imágenes en SVG.
    • Puede usted por favor enviar un problema en GitHub con un ejemplo?
    • De hecho, creo que puede funcionar; se volvió mi SVG invocado implícita de las dimensiones de la imagen que son (creo) parte de SVG 2. Chrome hace bien, pero supongo que se han comenzado a implementar SVG 2.
    • Puede usted por favor la guía de ¿cómo puedo utilizar en Windows. Mejor aún, si usted me puede decir cómo puedo utilizar el código en mi Visual Studio 2015 de la aplicación?
    • Por favor, puedes abrir un tema en github? Es difícil discutir en los comentarios.
    • Sólo lo hizo. El tema está abierto en github.
    • evgexport crea ENORMES archivos png dependiendo del tamaño. Recomendamos svg2png que también utiliza PhantomJS para la exportación, pero crea mucho más pequeñas imágenes.
    • Soporta svg marcador de conversión ?
    • De acuerdo con @Aaron_H, he intentado tanto y svg2png hace esto mejor. svgexport producido un enorme 308 KB archivo mientras svg2png el mismo resultado que la calidad del archivo a 25 KB.
    • Excelente!! Gracias! +1!

  3. 100

    Esto no es perfecto, pero hace el trabajo.

    convert -density 1200 -resize 200x200 source.svg target.png

    Básicamente aumenta el DPI lo suficientemente alto (sólo el uso de un educado/seguro suponer) que el tamaño está hecho con la calidad adecuada. Yo estaba tratando de encontrar una solución adecuada a este, pero después de un tiempo decidió que esto era lo suficientemente bueno para mis necesidades actuales.

    Nota: Uso de 200×200! para forzar la resolución dada

    • Opacidad y sombras perdidas en mi caso.
    • No tengo complejo de svg para esto funcionó para mí. -resize 200% no funcionó y tuve que especificar el tamaño en píxeles.
    • Para mantener el fondo transparente con ImageMagick, uso -background none opción de línea de comandos. Para mantener la proporción de la imagen, también se puede especificar sólo una dimensión, como -resize 200 de ancho o -resize x200 de altura. Ver: imagemagick.org/script/command-line-processing.php#geometry para exhaustiva ImageMagick geometría opciones.
    • no me funciona tampoco. El resultado es todo borroso.
    • (esto se aplica a linux, se pueden aplicar a windows) si activa detallado en la IM, a continuación, parecería que la mensajería instantánea se utiliza inkscape para crear un intermedio archivo eps. por lo tanto, me permito sugerir el uso de inkscape directamente como sugerido por @808sound
    • Y el lote versión es for file in ./*.svg; do convert -density 1200 -background none -resize 200x200 $file `basename $file .svg`.png; done
    • Cuidado: se aproxima trazados de curvas con segmentos de i.stack.imgur.com/foL91.png

  4. 54

    Si usted está en MacOS X y tener problemas con Imagemagick a convertir, usted puede intentar volver a instalar con RSVG lib.
    El Uso De HomeBrew:

    brew remove imagemagick
    brew install imagemagick --with-librsvg

    Comprobar que es delegar correctamente:

    $ convert -version
    Version: ImageMagick 6.8.9-8 Q16 x86_64 2014-12-17 http://www.imagemagick.org
    Copyright: Copyright (C) 1999-2014 ImageMagick Studio LLC
    Features: DPC Modules
    Delegates: bzlib cairo fontconfig freetype jng jpeg lcms ltdl lzma png rsvg tiff xml zlib

    Debe mostrar rsvg.

    • No funciona para mí. Específicamente me encontré convert ic_comment_48px.svg -size 30x30 ic_comment_30px.png y la imagen de salida es de 48 x 48. Aseguró que imagemagick es delegar a rsvg como te he explicado.
    • A mi me funciono perfectamente – el valor predeterminado convert hizo convertir svg a png, pero los resultados fueron sin esperanza; después de la reinstalación, son perfectas. También, la conversión es mucho más rápido.
    • Esto funcionó a mí en Mac OSX. No me parece que la nueva conversión más rápido, pero mucho más precisa. Recomiendo a todos los usuarios de Mac OSX dar a este un intento.
    • Esto debe ser aceptado respuesta, oh bien. Gracias, funcionó como un encanto, y yo nunca habría sabido tomar estos pasos lo contrario
    • Esta respuesta todavía ayuda mucho, también unter OSX sierra alta.
    • En mojave puedo obtener invalid option: --with-librsvg

  5. 35

    Inkscape no parece funcionar cuando svg unidades no son px (por ejemplo, cm). Tengo una imagen en blanco. Tal vez, podría ser fijado por cambiando el dpi, pero era demasiado complicado.

    Svgexport es un node.js programa y por lo general no es útil.

    Imagemagick a convertir funciona bien con:

     ~$ convert -background none -size 1024x1024 infile.svg outfile.png

    Si utiliza -resize, la imagen es borrosa y el archivo es mucho más grande.

    MEJOR

    ~$ rsvg  -w 1024 -h 1024 infile.svg  outfile.png

    Es más rápido, tiene el menor número de dependencias, y la salida es de aproximadamente 30% menor que la de convertir. Instalar librsvg2-bin para conseguirlo. No parece ser un hombre de la página, pero puede escribir:

    ~$ rsvg --help

    para obtener algún tipo de ayuda. Simple es bueno.

    • Esto es fácilmente la mejor respuesta (no sé por qué veinte diferentes respuestas que se dan a la misma imagemagick respuesta); conserva los colores y las sombras y no destrozar nada. Sin embargo, para que coincida con el imagemagick tamaño de comportamiento (en particular, WxH medio de la escala de la imagen para que quepa en una caja de ese tamaño, conservando la relación de aspecto), el -a parámetro debe ser utilizado con rsvg.
    • Esto trastoca mis imágenes, todo tipo de extraños artefactos. inkscape hizo un mejor trabajo.
    • Se advirtió, brew install rsvg en OSX instala un millón de cosas – GDK, OpenSSL, Python, etc.
    • FYI, el actual comando de instalación es brew install librsvg y el comando de conversión es rsvg-convert.
  6. 18

    Después de seguir los pasos en Jose de Alban de la respuesta, yo era capaz de conseguir ImageMagick para funcionar bien utilizando el siguiente comando:

    convert -density 1536 -background none -resize 100x100 input.svg output-100.png

    El número 1536 viene de un estadio de béisbol de la estimación de densidad, vea esta respuesta para obtener más información.

  7. 15

    Para cambiar la escala de la imagen, la opción -density debe ser utilizado. Que yo sepa el estándar de densidad es de 72 y mapas del tamaño 1:1. Si desea que la salida png a ser dos veces tan grande como el original svg, establezca la densidad 72*2=144:

    convert -density 144 source.svg target.png
    • Tenga en cuenta que convertir las opciones tienen que ser antes el archivo de entrada. I. e. convert source.svg -density 144 target.png no cambies el tamaño de la imagen.
    • En realidad, la densidad estándar parece ser 90. Por lo que sería convert -density 180 source.svg target.png
  8. 7

    ¿por qué no darle una oportunidad a inkscape línea de comandos, este es mi archivo bat para convertir todos svg en esta dir png:

    PARA %%x IN (*.svg) ¿C:\Ink\App\Inkscape\inkscape.exe %%x -z –export-dpi=500 –export-área de dibujo –export-png=»%%~nx.png»

  9. 4

    Llegué a este post -, pero yo sólo quería hacer la conversión por lotes y rápida, sin el uso de cualquiera de los parámetros (debido a varios archivos con diferentes tamaños).

    rsvg drawing.svg drawing.png

    Para mí, los requisitos eran probablemente un poco más fácil que para el autor original. (Quería usar SVGs en MS PowerPoint, pero no permite)

    • Para referencia, en macOS esta se instala con brew install librsvg y el comando de conversión es rsvg-convert.
  10. 2

    Una cosa que sólo poco me fue la creación de la -density DESPUÉS de que el nombre del archivo de entrada. Que no funciona. Mover a la primera opción de convertir (antes que nada) hizo el trabajo (para mí, YMMV, etc).

  11. 1

    He resuelto este problema mediante la modificación de la width y height atributos de la <svg> etiqueta para que coincida con mi intención de tamaño de salida y, a continuación, convertirlo usar ImageMagick. Funciona como un encanto.

    Aquí está mi código de Python, una función que devolverá el archivo JPG del contenido:

    import gzip, re, os
    from ynlib.files import ReadFromFile, WriteToFile
    from ynlib.system import Execute
    from xml.dom.minidom import parse, parseString
    
    
    def SVGToJPGInMemory(svgPath, newWidth, backgroundColor):
    
        tempPath = os.path.join(self.rootFolder, 'data')
        fileNameRoot = 'temp_' + str(image.getID())
    
        if svgPath.lower().endswith('svgz'):
            svg = gzip.open(svgPath, 'rb').read()
        else:
            svg = ReadFromFile(svgPath)
    
        xmldoc = parseString(svg)
    
        width = float(xmldoc.getElementsByTagName("svg")[0].attributes['width'].value.split('px')[0])
        height = float(xmldoc.getElementsByTagName("svg")[0].attributes['height'].value.split('px')[0])
    
        newHeight = int(newWidth / width * height) 
    
        xmldoc.getElementsByTagName("svg")[0].attributes['width'].value = '%spx' % newWidth
        xmldoc.getElementsByTagName("svg")[0].attributes['height'].value = '%spx' % newHeight
    
        WriteToFile(os.path.join(tempPath, fileNameRoot + '.svg'), xmldoc.toxml())
        Execute('convert -background "%s" %s %s' % (backgroundColor, os.path.join(tempPath, fileNameRoot + '.svg'), os.path.join(tempPath, fileNameRoot + '.jpg')))
    
        jpg = open(os.path.join(tempPath, fileNameRoot + '.jpg'), 'rb').read()
    
        os.remove(os.path.join(tempPath, fileNameRoot + '.jpg'))
        os.remove(os.path.join(tempPath, fileNameRoot + '.svg'))
    
        return jpg
    • ¿por qué iba a devolver una imagen generada por ordenador como jpeg :(?
  12. 1

    Para simple de SVG a PNG conversión encontré cairosvg (https://cairosvg.org/) se comporta mejor que ImageMagick. Pasos para instalar y ejecutar en todos los archivos SVG en su directorio.

    pip3 install cairosvg

    Abrir un interprete de python en el directorio que contiene .archivos svg y ejecutar:

    import os
    
    for file in os.listdir('.'):
        name = file.split('.svg')[0]
        cairosvg.svg2png(url=name+'.svg',write_to=name+'.png') 

    Esto también asegurará que usted no sobrescribir el original .archivos svg, pero mantendrá el mismo nombre. A continuación, puede mover todos sus .png archivos a otro directorio con:

    $ mv *.png [new directory]
    • se estrelló para mí en windows 10: importación cairocffi como el cairo Archivo «c:\program files (x86)\python35-32\lib\site-packages\cairocffi_init_.py», línea 39, en <módulo> el cairo = dlopen(ffi, ‘el cairo’, ‘el cairo-2’, ‘el cairo-gobject-2’, ‘el cairo.así.2’) Archivo «c:\program files (x86)\python35-32\lib\site-packages\cairocffi_init_.py», línea 36, en dlopen elevar OSError(«dlopen() no se pudo cargar la biblioteca: %s» % ‘ / ‘.únete a(nombres)) OSError: dlopen() no se pudo cargar una biblioteca: el cairo / el cairo-2 / el cairo-gobject-2 / el cairo.así.2
  13. 1

    Sin librsvg, usted puede conseguir un negro png/jpeg imagen. Tenemos que instalar librsvg a convert archivo svg con imagemagick.

    Ubuntu

     sudo apt-get install imagemagick librsvg
     convert -density 1200 test.svg test.png
    

    MacOS

     brew install imagemagick librsvg
     convert -density 1200 test.svg test.png
    
  14. 1

    En ImageMagick, se obtiene un mejor SVG representación si uno utiliza Inkscape o RSVG con ImageMagick de su propio interior MSVG/XML prestados. RSVG es un delegado que necesita ser instalado con ImageMagick. Si Inkscape está instalado en el sistema, ImageMagick usará automáticamente. Yo uso Inkscape en ImageMagick a continuación.

    No hay «magia» de los parámetros que va a hacer lo que quiera.

    Pero, uno puede calcular de forma muy sencilla la exacta densidad necesaria para representar la salida.

    Aquí es un pequeño botón de 50×50 cuando se representan en el valor predeterminado de la densidad de 96:

    convert button.svg button1.png


    ¿Cómo convertir un archivo SVG a PNG con ImageMagick?

    Supongamos que queremos que la salida será de 500. La entrada es de 50 el valor de la densidad de 96 (las versiones anteriores de Inkscape se puede usar 92). Así que usted puede calcular la necesaria densidad en proporción a los índices de las dimensiones y las densidades.

    512/50 = X/96
    X = 96*512/50 = 983

    convert -density 983 button.svg button2.png


    ¿Cómo convertir un archivo SVG a PNG con ImageMagick?

    En ImageMagick 7, usted puede hacer el cálculo en línea de la siguiente manera:

    magick -density "%[fx:96*512/50]" button.svg button3.png
    
    or
    
    in_size=50
    in_density=96
    out_size=512
    
    magick -density "%[fx:$in_density*$out_size/$in_size]" button.svg button3.png
  15. 0

    La respuesta por @808sound no me funciona. Yo quería cambiar el tamaño de
    ¿Cómo convertir un archivo SVG a PNG con ImageMagick?

    y consiguió
    ¿Cómo convertir un archivo SVG a PNG con ImageMagick?

    Así que en lugar de abrir Inkscape, luego fue a File, Export as PNG filey una interfaz gráfica de usuario cuadro emergente que me permitió establecer las dimensiones exactas que necesitaba.

    Versión en Ubuntu 16.04 Linux:
    Inkscape 0.91 (September 2016)

    (Esta imagen es de Kenney.nl’s de los activos de los paquetes de por el camino)

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea