Bagaimana cara mengubah gambar PNG ke SVG? [Tutup]


266

Bagaimana cara mengubah gambar PNG ke SVG?


21
Secara terprogram atau tidak? Bahasa apa, platform?
Michael Petrotta

Melalui beberapa aplikasi atau melalui perintah sistem operasi? Jika melalui sistem Operasi bisa tolong beri tahu sistem operasi mana .. Terima kasih
Mahesh Velaga

Jawaban:


130

Ada situs web tempat Anda dapat mengunggah gambar Anda, dan lihat hasilnya.

http://vectormagic.com/home

Tetapi jika Anda ingin mengunduh svg-image Anda, Anda harus mendaftar. (Jika Anda mendaftar, Anda mendapatkan 2 gambar gratis)


122

potracetidak tidak mendukung PNG sebagai file input, tapi PNM .
Karena itu, pertama convertdari PNG ke PNM:

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

Jelaskan opsi

  • potrace -s=> File keluaran adalah S VG
  • potrace -o file.svg => Tulis output ke file.svg

Contoh

File input = 2017.png Masukkan file

convert 2017.png 2017.pnm

File sementara = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

File keluaran = 2017.svg Berkas keluaran

Naskah

ykarikos mengusulkan skrip png2svg.sh yang telah saya perbaiki:

#!/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

Perintah satu baris

Jika Anda ingin mengonversi banyak file, Anda juga dapat menggunakan perintah satu baris berikut:

( 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 )

Lihat juga

Lihat juga perbandingan konverter raster dan vektor yang bagus ini di Wikipedia.


2
Gambar kehilangan warna ketika dikonversi dari pnm ke svg menggunakan potrace. Apakah ada cara untuk mempertahankan warna?
Coder

1
Hai @mundella. Saya selalu menggunakan potraceikon hitam putih. Terima kasih atas tanggapan Anda. Tapi maaf tidak tahu bagaimana cara mempertahankan warna ... Ho! Saya punya ide: Jika gambar asli Anda memiliki beberapa warna (misalkan tiga warna unik), Anda dapat membuat tiga gambar awal (satu untuk setiap warna). Kemudian konversikan ke SVG. Dan akhirnya, gabungkan ketiga konten SVG dalam satu file (SVG berbasis XML). Semoga ini bisa membantu ... Ceria ;-)
olibre

@olibre Apakah ada platform yang secara pragmatis melakukan hal yang sama
Ami Kamboj

1
Hai @AmiKamboj. Saya tidak yakin untuk memahami pertanyaan Anda. Perintah convertdan potracetersedia di banyak platform. Saya menggunakan komputer berbasis Linux. Saya baru saja menggunakan perintah ini kemarin untuk menghasilkan SVG dari kertas yang dipindai. Anda dapat melihat hasilnya: cpp-frug.github.io/images/Cpp-President-2017.svg Tolong jelaskan lebih lanjut tentang target Anda. Apa yang Anda inginkan / heran? Apa kebutuhan / keinginan Anda? Cheers ;-)
olibre

1
Saya telah menggunakan hampir semua konverter x to svg online di luar sana. Paket potrace npm membuat mereka kehabisan air. Itu mengagumkan.
tveve

59

Png adalah gaya gambar bitmap dan SVG adalah desain grafis berbasis vektor yang mendukung bitmap sehingga tidak seolah-olah akan mengubah gambar menjadi vektor, hanya gambar yang disematkan dalam format berbasis vektor. Anda dapat melakukan ini menggunakan http://www.inkscape.org/ yang gratis. Ini akan menanamkannya, namun ia juga memiliki mesin seperti Jejak Langsung yang akan mencoba mengubahnya menjadi jalur jika Anda mau (menggunakan potrace). Lihat jejak langsung di ilustrator adobe (komersial) adalah contoh:

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


1
Saya telah menggunakan jejak langsung di Inkscape untuk membuat kembali logo dengan dokumen asli yang telah lama hilang. Kecuali versi terbaru telah membuat beberapa perbaikan, itu sedikit untung-untungan. Karena itu, saya juga secara manual melacak beberapa logo di Inkscape dan berhasil dengan cukup baik.
AnonJr

12
Berikut adalah penjelasan cara melakukan ini di Inkscape: wiki.inkscape.org/wiki/index.php/Potrace
Erel Segal-Halevi

komentar yang bagus Kami telah memperhatikan bahwa iOS 7.1 Safari tidak akan menampilkan gambar tertanam dalam svg sementara Chrome tidak memiliki masalah dengan itu
ProblemsOfSumit

28

Anda mungkin ingin melihat potrace .


1
Potrace ini sangat akurat ketika Anda tahu cara menggunakannya: tetapi tidak multicolor 1.) konversikan file Anda menjadi BMP 2.) (untuk bagian yang akurat) konversikan bmp ke resolusi tinggi (strech it) 3.) warnai bentuknya Anda ingin melacak dalam warna hitam 4.) mengkonversi 5.) mengubah lebar dan tinggi ke aslinya 6.) menghargai penelusuran yang akurat.
PauAI

18

Mudah

  1. Unduh Inkscape (sepenuhnya gratis)
  2. Ikuti petunjuk di video youtube singkat ini

Seperti yang akan Anda lihat, jika Anda ingin melakukan banyak hal .svg pintar lainnya, Anda dapat melakukannya menggunakan Inkscape juga.

Pengamatan non-teknis: Saya pribadi lebih suka metode ini daripada penawaran situs web "gratis" karena, selain sering memerlukan pendaftaran, dengan mengunggah gambar, dalam semua hal praktis, seseorang memberikan gambar kepada pemilik situs web.


1
Mengapa downvote? Saya menggunakan pendekatan ini dengan sangat sukses. Setidaknya miliki kesopanan untuk menjelaskan mengapa orang bisa mendapat manfaat dari wawasan Anda.
Pancho

5
Mengikuti instruksi-instruksi tersebut hanya membungkus gambar dengan SVG XML - itu tidak mengubah apa pun menjadi data jalur.
Robert

@ Robert - terima kasih atas informasinya, saya sangat bodoh karena berfungsi dengan baik untuk tujuan saya. Namun ini tidak mengurangi fakta bahwa Inkscape mampu melakukan konversi PNG ke SVG lengkap - dan banyak lagi. Untuk mengilustrasikan bagi siapa pun yang tertarik, saya mengubah jawaban saya dengan menyertakan klip video penjelasan singkat.
Pancho

Benarkah begitu? Saya memeriksa SVG yang dihasilkan dan tampaknya memiliki data jalur, tidak seperti metode mobilefish ...
dario_ramos

Ada beberapa orang yang melakukan downvoting ini dari waktu ke waktu tanpa alasan yang dapat dibenarkan dan saya mulai membentuk pendapat bahwa itu berbahaya. Jika memang ada alasan - tidak ada masalah, berhentilah malas dan tambahkan beberapa nilai ke komunitas ini dengan memberikannya.
Pancho

15

dengan adobe illustrator:

Buka Adobe Illustrator. Klik "File" dan pilih "Open" untuk memuat file .PNG ke dalam program. Edit gambar sesuai kebutuhan sebelum menyimpannya sebagai file .SVG. Klik "File" dan pilih "Save As." Buat nama file baru atau gunakan nama yang ada. Pastikan jenis file yang dipilih adalah SVG. Pilih direktori dan klik "Simpan" untuk menyimpan file.

atau

converter online http://image.online-convert.com/convert-to-svg

saya lebih suka AI karena Anda dapat membuat perubahan yang diperlukan

semoga berhasil


3
+1 untuk online-convert.com. Mencoba sekarang dengan beberapa siluet monokrom .. dilakukan dengan sempurna .. Juga tampaknya benar-benar gratis.
nedR

Ya salah satu konverter yang lebih baik ... Terima kasih
JayD

1
Tidak menyadari Illustrator telah memasak ini. Memiliki segalanya seperti .ai sudah, ini akan menghemat banyak waktu.
Doyle Lewis

10

Yang mengejutkan saya, ternyata ternyata potrace , hanya bisa memproses hitam putih. Itu mungkin baik untuk kasus penggunaan Anda, tetapi beberapa mungkin menganggap kurangnya pelacakan warna menjadi masalah.

Secara pribadi, saya mendapatkan hasil yang memuaskan dengan Vector Magic

Tetap saja itu tidak sempurna.


9

Catatan untuk mereka yang menggunakan potrace dan imagemagick , mengubah gambar PNG dengan transparansi ke PPM tampaknya tidak bekerja dengan baik. Berikut adalah contoh yang menggunakan -flattenbendera convertuntuk menangani ini:

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

Fenomena menarik lainnya adalah Anda dapat menggunakan PPM (256 * 3 warna, yaitu. RGB), PGM (256 warna, yaitu. Skala abu-abu) atau PBM (2 warna, mis. Hanya putih atau hitam) sebagai format input. Dari pengamatan terbatas saya, akan terlihat bahwa pada gambar yang anti-alias, PPM dan PGM (yang menghasilkan SVG identik sejauh yang saya bisa lihat) mengecilkan area berwarna dan PBM memperluas area berwarna (walaupun hanya sedikit). Agaknya ini adalah perbedaan antara pixel > (256 / 2)tes dan pixel > 0tes. Anda dapat beralih di antara ketiganya dengan mengubah ekstensi file, yaitu. berikut menggunakan PBM :

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

7

Anda juga dapat mencoba http://image.online-convert.com/convert-to-svg

Saya selalu menggunakannya untuk kebutuhan saya.


Saya benar-benar bekerja seperti pesona bahkan dalam gambar comlex. Saya sangat menyarankan alat ini.
Atıfcan Ergin

Sayangnya tidak berhasil untuk saya.
adamj

Tidak berfungsi dengan baik jika gambar memiliki transparansi
Genaut

Anda tidak dapat mengharapkan skrip untuk mengambil foto diri Anda dan mendapatkan SVG berlapis sempurna sebagai hasilnya, tidak ada hal seperti itu. Jika Anda memiliki bentuk yang sederhana dan Anda ingin mendapatkan jalur, ini berhasil. Saya membuat banyak ikon font dengan halaman itu dan tidak pernah gagal untuk saya.
thednp

@thednp gambar saya keluar hitam dan putih
iOSAndroidWindowsMobileAppsDev

7

Saya baru saja menemukan pertanyaan dan jawaban ini ketika saya mencoba melakukan hal yang sama! Saya tidak ingin menggunakan beberapa alat lain yang disebutkan. (Tidak ingin memberikan email saya, dan tidak mau membayar). Saya menemukan bahwa Inkscape (v0.91) dapat melakukan pekerjaan yang cukup bagus. Ini tutorial cepat untuk dan mudah dimengerti.

Ini sesederhana memilih bitmap Anda di Inkskape dan Shift + Alt + B.

Deteksi Tepi dengan alat bitmap Inksape Trace berdasarkan potrace


4

Bergantung pada mengapa Anda ingin mengonversi dari .png ke .svg, Anda mungkin tidak harus melalui masalah. Mengubah dari .png (raster) ke .svg (vektor) bisa menyebalkan jika Anda tidak terlalu mengenal alat yang tersedia, atau jika Anda bukan perancang grafis berdasarkan perdagangan.

Jika seseorang mengirimi Anda file berukuran besar dan beresolusi tinggi (mis. 1024x1024), Anda dapat mengubah ukurannya menjadi hampir semua ukuran yang Anda inginkan di GIMP. Seringkali, Anda akan mengalami masalah mengubah ukuran gambar jika resolusi (jumlah piksel per inci) terlalu rendah. Untuk memperbaiki ini di GIMP, Anda dapat:

  1. File -> Open: file .png Anda
  2. Image -> Image Properties: periksa Resolusi, dan ruang warna. Anda menginginkan resolusi sekitar 300 ppi. Dalam kebanyakan kasus, Anda ingin ruang warna menjadi RGB.
  3. Image -> Mode: diatur ke RGB
  4. Image -> Scale Image: biarkan ukurannya sendiri, atur dan resolusi Y ke 300 atau lebih besar. Skala Hit.
  5. Image -> Scale Image: resolusi sekarang harus 300 dan sekarang Anda dapat mengubah ukuran gambar ke hampir semua ukuran yang Anda inginkan.

Tidak semudah mengubah ukuran file .svg, tetapi jelas lebih mudah dan lebih cepat daripada mencoba mengubah .png menjadi .svg, jika Anda sudah memiliki gambar besar beresolusi tinggi.


2

Saya berasumsi bahwa Anda ingin menulis perangkat lunak untuk melakukan ini. Untuk melakukannya secara naif Anda hanya akan menemukan garis dan mengatur vektor. Untuk melakukannya dengan cerdas, Anda mencoba memasangkan bentuk ke gambar (fitting model). Selain itu, Anda harus berusaha memastikan wilayah bitmaped (wilayah yang tidak dapat Anda modelkan melalui rasa malu atau menerapkan tekstur. Saya tidak akan merekomendasikan menempuh rute ini karena akan memakan sedikit waktu dan memerlukan sedikit pengetahuan grafis dan visi komputer. Namun, output akan jauh lebih baik dan skala lebih baik daripada output asli Anda.



0

Alat ini bekerja dengan sangat baik sekarang.

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


17
Ini menanamkan gambar dalam svg, bukan grafik vektor sungguhan
Paul Gobée

Ini mengonversi salah satu png berwarna saya di mana pengonversi daring lainnya tidak dapat mengonversi dengan benar. Saya pikir itu berfungsi karena saya bisa membukanya di browser tetapi ketika saya mencoba membukanya di alat lain, ada kesalahan. Mungkin karena komentar di atas.
vida

-1

Jika Anda menggunakan sistem Linux, imagemagick sempurna. Yaitu

convert somefile.png somefile.svg

Ini berfungsi dengan banyak format yang berbeda.

Namun untuk media lain seperti penggunaan video dan audio (ffmpeg) saya tahu Anda menyatakan png ke svg; Masih terkait media.

ffmpeg -i somefile.mp3 somefile.ogg

Hanya tip untuk jika Anda ingin melihat banyak file; loop menggunakan trik dasar shell ..

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

Itu menghapus jpg dan menambahkan png yang memberitahu konversi apa yang Anda inginkan.


2
Imagemagick bekerja pada platform lain, bukan hanya 'Linux'.
Lunatik

25
Secara teknis ini berfungsi, bagaimanapun, file svg yang dihasilkan bukan benar - benar grafik vektor - hanya berisi bitmap asli "sebagaimana adanya". Dengan demikian, ketika Anda memperbesarnya, Anda masih mendapatkan kualitas terdegradasi dari gambar raster.
Erel Segal-Halevi

7
@archeyDevil tidak, itu bukan "mengkonversi" ke SVG, itu "menanamkan" bitmap di dalam SVG kosong. Tidak ada gunanya bagi siapa pun.
Adam

4
@archeyDevil Judul pertanyaannya adalah "convert ... to SVG". Jawaban Anda tidak bertobat. Ini menanamkan. PNG adalah format bitmap, SVG adalah format vektor. Perbedaan besar. Penyematan tidak berguna dan tidak layak untuk pertanyaan SO IMHO
Adam

3
Saya sadar itu tidak mengkonversi. Namun saya lakukan; posting ini untuk mereka yang tidak membutuhkan vektor persay, tetapi hanya perlu perubahan cepat dan kotor antara tipe file.
DarkFox
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.