Bagaimana cara mengubah SVG menjadi PNG dengan ImageMagick?


388

Saya memiliki file SVG yang memiliki ukuran 16x16. Ketika saya menggunakan program konversi ImageMagick untuk mengubahnya menjadi PNG, maka saya mendapatkan PNG 16x16 piksel yang terlalu kecil:

convert test.svg test.png

Saya perlu menentukan ukuran piksel dari keluaran PNG. -sizeparameter tampaknya diabaikan, -scaleparameter menskala PNG setelah dikonversi ke PNG. Hasil terbaik hingga sekarang saya dapatkan dengan menggunakan -densityparameter:

convert -density 1200 test.svg test.png

Tapi saya tidak puas, karena saya ingin menentukan ukuran output dalam piksel tanpa melakukan matematika untuk menghitung nilai kerapatan. Jadi saya ingin melakukan sesuatu seperti ini:

convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png

Jadi apa parameter ajaib yang harus saya gunakan di sini?


6
mis. -size 1024x1024berfungsi dengan baik, apa versi imagemagick Anda?
Dejan Marjanovic


2
ImageMagick-6.9.0-Q16. convert -resize 1024x1024 foo.svg foo.png berfungsi dengan baik.
Jichao

11
@Jichao -resizehanya meregangkan gambar yang dikonversi, dengan hasil kualitas yang buruk.
Elist

5
convert -size 1024x1024 test.svg test.pngberfungsi dengan baik dengan ImageMagick 7.0.7-0 Q16 (versi saat ini di Chocolatey repo untuk Windows). Pastikan itu -sizemuncul sebelum nama file input, jika gambar 16x16 akan ditingkatkan untuk memberikan hasil yang buram.
Futal

Jawaban:


502

Saya belum bisa mendapatkan hasil yang baik dari ImageMagick dalam hal ini, tetapi Inkscape melakukan pekerjaan yang bagus di Linux dan Windows:

inkscape -z -w 1024 -h 1024 input.svg -e output.png

Sunting (Mei 2020): Pengguna Inkscape 1.0, harap perhatikan bahwa argumen baris perintah telah berubah:

inkscape -w 1024 -h 1024 input.svg --export-filename output.png

Berikut adalah hasil penskalaan 16x16 SVG ke 200x200 PNG menggunakan perintah ini:

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Hanya untuk referensi, versi Inkscape saya (di Ubuntu 12.04) adalah:

Inkscape 0.48.3.1 r9886 (Mar 29 2012)

dan pada Windows 7, itu adalah:

Inkscape 0.48.4 r9939 (Dec 17 2012)

15
+1 sejauh menyangkut imagemagick. Tampaknya ada masalah dengan mesin SVG. Dalam kebanyakan kasus saya tidak bisa mendapatkan hasil yang akurat dengannya. Inkscape, OTOH, berfungsi dengan sangat baik.
Glutanimate

13
Saya pikir Inkscape adalah contoh tunggal paling mengesankan dari OSS setelah Linux itu sendiri. Terima kasih atas tipnya!
kim3er

8
Bekerja dengan baik di OSX juga.
Jonas Granvik

12
Pada OSX, dengan Inkscape terinstal untuk X11, itu berhasil bagi saya menggunakan:/Applications/Inkscape.app/Contents/Resources/bin/inkscape -z -e test.png -w 1024 -h 1024 test.svg
chmullig

11
@Rrd Untuk menjaga latar belakang transparan dengan ImageMagick, gunakan -background noneopsi baris perintah.
John

142

Coba svgexport :

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

svgexport adalah alat baris perintah lintas-platform sederhana yang telah saya buat untuk mengekspor file svg ke jpg dan png, lihat di sini untuk opsi lebih lanjut. Untuk menginstal svgexport, instal npm , kemudian jalankan:

npm install svgexport -g

Sunting: Jika Anda menemukan masalah dengan perpustakaan, kirimkan di GitHub, terima kasih!


4
svgexport bekerja sangat baik untuk saya. Output mencocokkan rendering browser lebih dekat daripada ImageMagick.
t9mike

5
Kualitas ekspor benar-benar setinggi itu. Sekarang ini telah menjadi alat favorit saya, terima kasih shakiba! :)
Alessio Periloso

1
ini bekerja dengan baik untuk saya juga. Penghemat waktu nyata dibandingkan dengan melakukannya secara manual dalam alat GUI. Cukup sulit untuk menemukan aplikasi GUI di mac dalam kisaran yang lebih murah pula yang menangani SVG dengan baik
Erik Engheim

4
Bekerja dengan baik, tetapi menghasilkan gambar yang besar. Dengan menggunakan optipng, saya dapat memampatkan logo teks saya dari 3 megabita menjadi ~ 20 kB.
miek

2
evgexport membuat file png BESAR tergantung pada ukurannya. Rekomendasikan svg2png yang juga menggunakan PhantomJS untuk ekspor, tetapi membuat gambar yang jauh lebih kecil.
Aaron_H

112

Ini tidak sempurna tetapi berhasil.

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

Pada dasarnya itu meningkatkan DPI cukup tinggi (hanya menggunakan tebakan berpendidikan / aman) yang mengubah ukuran dilakukan dengan kualitas yang memadai. Saya mencoba mencari solusi yang tepat untuk ini tetapi setelah beberapa saat memutuskan ini cukup baik untuk kebutuhan saya saat ini.

Catatan: Gunakan 200x200! untuk memaksa resolusi yang diberikan


4
Opacity dan bayangan hilang dalam kasus saya.
jiyinyiyong

2
Saya tidak punya svg kompleks jadi ini bekerja untuk saya. -resize 200%tidak berfungsi dan saya harus menentukan ukuran dalam piksel.
jozxyqk

18
@jiyinyiyong Untuk menjaga latar belakang transparan dengan ImageMagick, gunakan -background noneopsi baris perintah. Untuk menjaga rasio gambar, Anda juga bisa menentukan hanya satu dimensi seperti -resize 200untuk lebar atau -resize x200untuk tinggi. Lihat: imagemagick.org/script/command-line-processing.php#geometry untuk opsi geometri ImageMagick yang lengkap .
John

tidak bekerja untuk saya juga. Hasilnya semua buram.
mbonnin

(ini berlaku untuk linux, mungkin berlaku untuk windows) jika Anda mengaktifkan -verbose pada IM maka akan muncul bahwa IM itu sendiri menggunakan inkscape untuk membuat file eps menengah. oleh karena itu saya akan menyarankan menggunakan inkscape langsung seperti yang disarankan oleh @ 808sound
-bradley

55

Jika Anda menggunakan MacOS X dan mengalami masalah dengan konversi Imagemagick, Anda dapat mencoba menginstalnya dengan lib RSVG. Menggunakan HomeBrew:

brew remove imagemagick
brew install imagemagick --with-librsvg

Verifikasi bahwa itu didelegasikan dengan benar:

$ 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

Itu harus ditampilkan rsvg.


Tidak bekerja untuk saya. Secara khusus saya berlari convert ic_comment_48px.svg -size 30x30 ic_comment_30px.pngdan gambar output adalah 48 x 48. Pastikan imagemagick mendelegasikan ke rsvg seperti yang telah Anda jelaskan.
Shane Creighton-Young

1
Bekerja dengan sempurna untuk saya - default convertmemang mengkonversi svg ke png, tetapi hasilnya sia-sia; setelah menginstal ulang, mereka sempurna. Juga, konversi secara signifikan lebih cepat.
ssc

1
Ini berhasil saya di Mac OSX. Saya tidak menemukan konversi baru lebih cepat, tetapi jauh lebih akurat. Saya sangat merekomendasikan semua pengguna Mac OSX untuk mencoba ini.
HelloWorld

1
Ini seharusnya jawaban yang diterima, oh well. Terima kasih, bekerja seperti pesona, dan saya tidak akan pernah tahu untuk mengambil langkah-langkah ini jika tidak
sdailey

8
Pada mojave saya mendapatkaninvalid option: --with-librsvg
zaitsman

39

Inkscape tampaknya tidak berfungsi ketika unit svg tidak px(mis. Cm). Saya mendapat gambar kosong. Mungkin, itu bisa diperbaiki dengan memutar-mutar dpi, tapi itu terlalu merepotkan.

Svgexport adalah program node.js dan secara umum tidak berguna.

Konversi Imagemagick berfungsi dengan baik:

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

Jika Anda menggunakan -resize, gambarnya kabur dan filenya jauh lebih besar.

TERBAIK

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

Ini tercepat, memiliki dependensi paling sedikit, dan output sekitar 30% lebih kecil dari konversi. Instal librsvg2-bin untuk mendapatkannya. Tampaknya tidak ada halaman manual tetapi Anda dapat mengetik:

~$ rsvg --help

untuk mendapatkan bantuan. Sederhana itu bagus.


2
Ini dengan mudah jawaban terbaik (saya tidak tahu mengapa dua puluh jawaban berbeda memberikan respons imagemagick yang sama); itu mempertahankan warna dan bayangan dan tidak memotong-motong apa pun. Namun, untuk mencocokkan perilaku mengubah ukuran imagemagick (khususnya, WxH berarti skala gambar agar sesuai dalam kotak ukuran itu, menjaga aspek rasio), -aparameter harus digunakan dengan rsvg.
Mahmoud Al-Qudsi

1
Ini merusak gambar saya, segala macam artefak aneh. inkscape melakukan pekerjaan yang lebih baik.
dadu yang elegan

1
Berhati-hatilah, brew install rsvgdi OSX menginstal sejuta hal - GDK, OpenSSL, Python, dll.
Timmmm

4
FYI, perintah instal saat ini adalah brew install librsvgdan perintah konversi adalah rsvg-convert.
waldyrious

Saya menemukan librsvg (atau rsvg-convertdalam kasus Arch) untuk memberikan hasil terbaik dan paling konsisten ketika mengkonversi svgs rumit ke png. Tindak lanjuti dengan optipngmengurangi ukuran file output.
maktel

18

Setelah mengikuti langkah-langkah dalam jawaban Jose Alban , saya bisa membuat ImageMagick berfungsi dengan baik menggunakan perintah berikut:

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

Angka 1536 berasal dari perkiraan kepadatan, lihat jawaban ini untuk informasi lebih lanjut.


15

Untuk mengubah skala gambar, opsi -densityharus digunakan. Sejauh yang saya tahu kepadatan standar adalah 72 dan memetakan ukuran 1: 1. Jika Anda ingin output png dua kali lebih besar dari svg asli, atur kerapatan menjadi 72 * 2 = 144:

convert -density 144 source.svg target.png

Perhatikan bahwa opsi konversi harus sebelum file input. Yaitu convert source.svg -density 144 target.pngtidak akan mengubah skala gambar.
Skippy le Grand Gourou

Sebenarnya kepadatan standar tampaknya 90. Jadi itu akan menjadiconvert -density 180 source.svg target.png
adius

7

mengapa Anda tidak mencoba baris perintah inkscape, ini file bat saya untuk mengonversi semua svg dalam dir ini ke png:

UNTUK %% x IN (* .svg) LAKUKAN C: \ Ink \ App \ Inkscape \ inkscape.exe %% x -z --export-dpi = 500 --export-area-drawing --export-png = "% % ~ nx.png "


4

Saya datang ke posting ini - tetapi saya hanya ingin melakukan konversi secara batch dan cepat tanpa menggunakan parameter apa pun (karena beberapa file dengan ukuran yang berbeda).

rsvg drawing.svg drawing.png

Bagi saya persyaratannya mungkin sedikit lebih mudah daripada untuk penulis asli. (Ingin menggunakan SVG di MS PowerPoint, tetapi tidak memungkinkan)


1
Untuk referensi, pada macOS ini diinstal dengan brew install librsvgdan perintah konversi rsvg-convert.
waldyrious

di Ubutni itu adalah rsvg-convert juga, paketnya adalah librsvg2-bin dan hasilnya perlu -o
drawing.png

4

Di ImageMagick, seseorang mendapat rendering SVG yang lebih baik jika seseorang menggunakan Inkscape atau RSVG dengan ImageMagick daripada MSVG / XML internal yang diberikan. RSVG adalah delegasi yang perlu diinstal dengan ImageMagick. Jika Inkscape diinstal pada sistem, ImageMagick akan menggunakannya secara otomatis. Saya menggunakan Inkscape di ImageMagick di bawah ini.

Tidak ada parameter "ajaib" yang akan melakukan apa yang Anda inginkan.

Tetapi, seseorang dapat menghitung dengan sangat sederhana kepadatan yang dibutuhkan untuk membuat output.

Berikut adalah tombol 50x50 kecil ketika diberikan pada kepadatan default 96:

convert button.svg button1.png


masukkan deskripsi gambar di sini

Misalkan kita ingin output menjadi 500. Inputnya adalah 50 pada kepadatan default 96 (versi Inkscape yang lama mungkin menggunakan 92). Jadi, Anda dapat menghitung kerapatan yang dibutuhkan secara proporsional dengan rasio dimensi dan kerapatan.

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


convert -density 983 button.svg button2.png


masukkan deskripsi gambar di sini

Di ImageMagick 7, Anda dapat melakukan perhitungan in-line sebagai berikut:

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

persamaan di DSL magick sangat membantu!
cyrf

2

Satu hal yang hanya menggigit saya adalah menyetel -densitySETELAH nama file input. Itu tidak berhasil. Memindahkannya ke opsi pertama di convert (sebelum yang lainnya) membuatnya bekerja (untuk saya, YMMV, dll).


2

Untuk konversi SVG ke PNG sederhana, saya menemukan cairosvg ( https://cairosvg.org/ ) berkinerja lebih baik daripada ImageMagick. Langkah-langkah untuk menginstal dan menjalankan semua file SVG di direktori Anda.

pip3 install cairosvg

Buka shell python di direktori yang berisi file .svg Anda dan jalankan:

import os

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

Ini juga akan memastikan Anda tidak menimpa file .svg asli Anda, tetapi akan tetap menggunakan nama yang sama. Anda kemudian dapat memindahkan semua file .png Anda ke direktori lain dengan:

$ mv *.png [new directory]

jatuh untuk saya pada windows 10: impor cairocffi sebagai Kairo File "c: \ program files (x86) \ python35-32 \ lib \ situs-paket \ cairocffi_ init_ py", baris 39, di <module> Kairo = dlopen (FFI , 'cairo', 'cairo-2', 'cairo-gobject-2', 'cairo.so.2') File "c: \ file program (x86) \ python35-32 \ lib \ situs-paket \ cairocffi_ init_ .py ", baris 36, di dlopen menaikkan OSError (" dlopen () gagal memuat perpustakaan:% s "% '/' .join (nama)) OSError: dlopen () gagal memuat perpustakaan: cairo / cairo- 2 / cairo-gobject-2 / cairo.so.2
Pete Lomax

Bagus, cairosvgdi Ubuntu-19,04 melakukan pekerjaan untuk saya.
fhgd

2

Tanpa librsvg, Anda mungkin mendapatkan gambar png / jpeg hitam. Kita harus menginstal librsvgke convertfile svg dengan 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

Saya tidak memiliki perpustakaan ini diinstal dan saya tidak mendapatkan gambar hitam juga.
Aaron Franke

1

Saya telah memecahkan masalah ini dengan mengubah widthdan heightatribut <svg>tag agar sesuai dengan ukuran output yang saya inginkan dan kemudian mengubahnya menggunakan ImageMagick. Bekerja seperti pesona.

Ini kode Python saya, sebuah fungsi yang akan mengembalikan konten file JPG:

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

2
mengapa Anda mengembalikan gambar yang dihasilkan komputer sebagai jpeg :(?
Willi Mentzel

1

Jawaban teratas oleh @ 808sound tidak bekerja untuk saya. Saya ingin mengubah ukuran Paket UI Kenney.nl

dan mendapatkan Paket Kenney UI kacau

Jadi alih-alih saya membuka Inkscape, lalu pergi ke File, Export as PNG filedan sebuah kotak GUI muncul yang memungkinkan saya untuk mengatur dimensi persis yang saya butuhkan.

Versi aktif Ubuntu 16.04 Linux: Inkscape 0.91 (September 2016)

( Omong-omong, gambar ini dari paket aset Kenney.nl )


1

Pada macOS menggunakan minuman, menggunakan librsvg secara langsung berfungsi dengan baik

brew install librsvg
rsvg-convert test.svg -o test.png

Banyak opsi tersedia melalui rsvg-convert --help


0

Di Linux dengan Inkscape 1.0 untuk mengkonversi dari svg ke png perlu digunakan

inkscape -w 1024 -h 1024 input.svg --export-file output.png

tidak

inkscape -w 1024 -h 1024 input.svg --export-filename output.png
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.