วิธีการแปลงภาพ PNG เป็น SVG? [ปิด]


266

วิธีการแปลงภาพ PNG เป็น SVG?


21
โดยทางโปรแกรมหรือไม่ ภาษาแพลตฟอร์มอะไร
Michael Petrotta

ผ่านบางแอปพลิเคชันหรือผ่านคำสั่งระบบปฏิบัติการ หากผ่านระบบปฏิบัติการคุณสามารถบอกได้ว่าระบบปฏิบัติการ
ไหน

คำตอบ:


130

มีเว็บไซต์ที่คุณสามารถอัพโหลดภาพและดูผลลัพธ์

http://vectormagic.com/home

แต่ถ้าคุณต้องการดาวน์โหลด svg-image ของคุณคุณต้องลงทะเบียน (ถ้าคุณลงทะเบียนคุณจะได้รับ 2 ภาพฟรี)


122

potraceไม่ไม่สนับสนุน PNGเป็นแฟ้มใส่ แต่PNM
ดังนั้นก่อนconvertจาก PNG ถึง PNM:

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

อธิบายตัวเลือกต่างๆ

  • potrace -s=> ไฟล์ที่ส่งออกคือS VG
  • potrace -o file.svg => เขียนผลลัพธ์ไปที่ file.svg

ตัวอย่าง

ไฟล์อินพุต = 2017.png ใส่ไฟล์

convert 2017.png 2017.pnm

ไฟล์ชั่วคราว = 2017.pnm

potrace 2017.pnm -s -o 2017.svg

ไฟล์ที่ส่งออก = 2017.svg ไฟล์ที่ส่งออก

ต้นฉบับ

ykarikosเสนอสคริปต์png2svg.shที่ฉันได้ปรับปรุง:

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

คำสั่งหนึ่งบรรทัด

หากคุณต้องการแปลงไฟล์จำนวนมากคุณยังสามารถใช้คำสั่งหนึ่งบรรทัดต่อไปนี้:

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

ดูสิ่งนี้ด้วย

ดูการเปรียบเทียบแรสเตอร์กับเวกเตอร์ตัวแปลงที่ดีใน Wikipedia


2
ภาพสูญเสียสีเมื่อแปลงจาก pnm เป็น svg โดยใช้ potrace มีวิธีการรักษาสีหรือไม่?
Coder

1
สวัสดี @mundella ฉันใช้potraceไอคอนสีดำและสีขาวเสมอ ขอบคุณสำหรับความคิดเห็นของคุณ แต่ขอโทษที่ไม่รู้ว่าจะเก็บสีอย่างไร ... โฮ! ฉันมีความคิด: หากภาพต้นฉบับของคุณมีสีไม่กี่สี (สมมติว่ามีสามสีที่ไม่ซ้ำกัน) คุณอาจสร้างภาพเริ่มต้นสามภาพ (หนึ่งภาพสำหรับแต่ละสี) จากนั้นแปลงเป็น SVG และสุดท้ายรวมเนื้อหา SVG สามรายการไว้ในไฟล์เดียว (SVG เป็นแบบ XML) หวังว่านี่จะช่วยได้ ... ไชโย ;-)
โอลิเบอร์

@olibre มีแพลตฟอร์มใด ๆ ในทางปฏิบัติทำสิ่งเดียวกัน
Ami Kamboj

1
สวัสดี @AmiKamboj ฉันไม่แน่ใจที่จะเข้าใจคำถามของคุณ คำสั่งconvertและpotraceมีอยู่ในหลายแพลตฟอร์ม ฉันกำลังใช้คอมพิวเตอร์ที่ใช้ Linux ฉันเพิ่งใช้คำสั่งเหล่านี้เมื่อวานนี้เพื่อผลิต SVG จากกระดาษสแกน คุณสามารถดูผลลัพธ์ได้: cpp-frug.github.io/images/Cpp-President-2017.svgโปรดอธิบายเพิ่มเติมเกี่ยวกับเป้าหมายของคุณ คุณต้องการ / สงสัยอะไร ความต้องการ / ความปรารถนาของคุณคืออะไร? Cheers ;-)
olibre

1
ฉันใช้ x ออนไลน์ทุกตัวเพื่อแปลง svg แพคเกจ npm potrace เป่ามันทั้งหมดออกจากน้ำ มันเจ๋งมาก.
2560

59

png เป็นรูปแบบบิตแมปภาพและ SVG เป็นการออกแบบกราฟิกแบบเวกเตอร์ที่รองรับบิตแมปดังนั้นจึงไม่ใช่ราวกับว่ามันจะแปลงภาพเป็นเวกเตอร์เพียงแค่ภาพที่ฝังในรูปแบบเวกเตอร์ คุณสามารถทำได้โดยใช้http://www.inkscape.org/ซึ่งฟรี มันจะฝัง แต่ก็มี Live Trace เช่นเอ็นจิ้นซึ่งจะพยายามแปลงเป็นเส้นทางหากคุณต้องการ (ใช้ potrace) ดูการติดตามสดใน adobe illustrator (commericial) เป็นตัวอย่าง:

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


1
ฉันใช้การติดตามสดใน Inkscape เพื่อสร้างโลโก้ใหม่ด้วยต้นฉบับที่หายไปนาน เว้นแต่ว่าเวอร์ชั่นล่าสุดจะทำการปรับปรุงบางอย่างมันเป็นเรื่องที่น่ายินดีมาก ต้องบอกว่าฉันยังได้ติดตามโลโก้บางส่วนใน Inkscape ด้วยตนเองและจัดการได้ค่อนข้างดี
AnonJr

12
นี่คือคำอธิบายวิธีการทำสิ่งนี้ใน Inkscape: wiki.inkscape.org/wiki/index.php/Potrace
Erel Segal-Halevi

ความคิดเห็นที่ดี เราสังเกตว่า iOS 7.1 Safari จะไม่แสดงภาพที่ฝังอยู่ใน svg ในขณะที่ Chrome ไม่มีปัญหากับมัน
ProblemsOfSumit

28

คุณอาจต้องการที่จะดูที่potrace


1
Potrace นี้มีความแม่นยำมากเมื่อคุณรู้วิธีใช้งาน: แต่ไม่ใช่ multicolor 1. ) แปลงไฟล์ของคุณเป็น BMP 2) (สำหรับส่วนที่ถูกต้อง) แปลง bmp เป็นความละเอียดสูง (strech it) 3. ) ระบายสีรูปร่าง คุณต้องการติดตามเป็นสีดำ 4. ) แปลง 5. ) เปลี่ยนความกว้างและความสูงเป็นต้นฉบับ 6. ) ชื่นชมการติดตามที่แม่นยำ
PauAI

18

ง่าย

  1. ดาวน์โหลดInkscape (ฟรีทั้งหมด)
  2. ทำตามคำแนะนำในวิดีโอ youtubeสั้น ๆ นี้

ดังที่คุณเห็นหากคุณต้องการทำสิ่งอื่น ๆ อีกมากมายที่ฉลาด. svg คุณสามารถทำได้โดยใช้ Inkscape ด้วย

การสังเกตที่ไม่ใช่ด้านเทคนิค: โดยส่วนตัวแล้วฉันชอบวิธีนี้มากกว่าการให้บริการเว็บไซต์ "ฟรี" เพราะนอกจากจะต้องลงทะเบียนบ่อยครั้งโดยการอัพโหลดภาพในแง่ที่เป็นประโยชน์ทั้งหมดหนึ่งคือการให้ภาพแก่เจ้าของเว็บไซต์


1
ทำไมต้องลงคะแนน? ฉันใช้วิธีนี้อย่างประสบความสำเร็จ อย่างน้อยก็มีมารยาทที่จะอธิบายว่าทำไมผู้คนจึงได้รับประโยชน์จากข้อมูลเชิงลึกของคุณ
Pancho

5
การทำตามคำแนะนำเหล่านี้จะล้อมรูปภาพด้วย SVG XML เท่านั้น - ไม่แปลงอะไรเป็นข้อมูลเส้นทาง
Robert

@ Robert - ขอบคุณสำหรับข้อมูลฉันไม่รู้ความสุขเพราะมันทำงานได้ดีสำหรับวัตถุประสงค์ของฉัน อย่างไรก็ตามสิ่งนี้ไม่ได้เบี่ยงเบนจากข้อเท็จจริงที่ว่า Inkscape สามารถทำการแปลง PNG เป็น SVG ที่สมบูรณ์ - และอีกมากมาย เพื่อแสดงให้เห็นถึงผู้ที่สนใจฉันได้แก้ไขคำตอบของฉันให้ใส่คลิปวิดีโอสั้น ๆ ที่มีคำอธิบาย
Pancho

เป็นเช่นนั้นจริงเหรอ? ฉันตรวจสอบ SVG ที่สร้างขึ้นและดูเหมือนว่ามีข้อมูลเส้นทางซึ่งแตกต่างจากวิธี mobilefish ...
dario_ramos

มีบางคนที่กำลังลงคะแนนเสียงให้เป็นครั้งคราวโดยไม่มีสาเหตุที่สมเหตุสมผลและฉันเริ่มเห็นว่ามันเป็นอันตราย หากมีเหตุผลจริงๆ - ไม่มีปัญหาหยุดความขี้เกียจและเพิ่มคุณค่าให้กับชุมชนนี้ด้วยการมอบให้
Pancho

15

ด้วย adobe illustrator:

เปิด Adobe Illustrator คลิก "ไฟล์" และเลือก "เปิด" เพื่อโหลดไฟล์. PNG ลงในโปรแกรมแก้ไขภาพตามต้องการก่อนบันทึกเป็นไฟล์. SVG คลิก "ไฟล์" และเลือก "บันทึกเป็น" สร้างชื่อไฟล์ใหม่หรือใช้ชื่อที่มีอยู่ ตรวจสอบว่าประเภทไฟล์ที่เลือกคือ SVG เลือกไดเรกทอรีและคลิก "บันทึก" เพื่อบันทึกไฟล์

หรือ

แปลงออนไลน์ http://image.online-convert.com/convert-to-svg

ฉันชอบ AI เพราะคุณสามารถทำการเปลี่ยนแปลงใด ๆ ที่จำเป็น

โชคดี


3
+1 สำหรับ online-convert.com ลองตอนนี้ด้วยเงาสองสีขาวดำ .. ดำเนินการอย่างไร้ที่ติ .. ดูเหมือนว่าจะเป็นอิสระอย่างสมบูรณ์
nedR

ใช่หนึ่งในตัวแปลงที่ดีกว่า ... ขอบคุณ
JayD

1
ไม่ได้ตระหนักถึง Illustrator ที่ปรุงสิ่งนี้แล้วการมีทุกอย่างเป็น. i แล้วสิ่งนี้จะช่วยฉันได้หลายครั้ง
Doyle Lewis

10

เพื่อความประหลาดใจของฉันpotraceมันเปิดออกสามารถประมวลผลขาวดำเท่านั้น อาจเป็นเรื่องที่ดีสำหรับคุณที่ใช้เคส แต่บางคนอาจคิดว่าการติดตามสีขาดหายไปนั้นเป็นปัญหา

ส่วนตัวแล้วฉันได้ผลลัพธ์ที่น่าพอใจด้วย Vector Magic

ยังไม่สมบูรณ์แบบ


9

หมายเหตุสำหรับผู้ที่ใช้potraceและimagemagickการแปลงภาพPNGด้วยความโปร่งใสเป็นPPMนั้นดูเหมือนจะทำงานได้ไม่ดีนัก นี่คือตัวอย่างที่ใช้-flattenแฟล็กconvertเพื่อจัดการสิ่งนี้:

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

อีกปรากฏการณ์ที่น่าสนใจคือคุณสามารถใช้PPM (256 * 3 สีเช่น. RGB), PGM (256 สีเช่น. สีเทา) หรือPBM (2 สีเช่นสีขาวหรือสีดำเท่านั้น) เป็นรูปแบบอินพุต จากการสังเกตที่ จำกัด ของฉันมันจะปรากฏว่าในภาพที่มี anti-aliased, PPMและPGM (ซึ่งผลิตSVG ที่เหมือนกันเท่าที่ฉันเห็น) หดพื้นที่สีและPBMขยายพื้นที่สี (แม้ว่าจะมีเพียงเล็กน้อย) สันนิษฐานว่าเป็นความแตกต่างระหว่างการpixel > (256 / 2)ทดสอบและการpixel > 0ทดสอบ คุณสามารถสลับระหว่างสามไฟล์ด้วยการเปลี่ยนนามสกุลไฟล์เช่น ใช้PBMต่อไปนี้:

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

7

คุณสามารถลอง http://image.online-convert.com/convert-to-svg

ฉันมักจะใช้มันเพื่อความต้องการของฉัน


ฉันใช้งานได้อย่างมีเสน่ห์ถึงแม้จะเป็นภาพ comlex ฉันแนะนำเครื่องมือนี้จริงๆ
Atıfcan Ergin

โชคไม่ดีสำหรับฉัน
adamj

ทำงานได้ไม่ดีหากภาพมีความโปร่งใส
Genaut

คุณไม่สามารถคาดหวังว่าสคริปต์จะถ่ายภาพตัวเองและทำให้ SVG ที่เป็นเลเยอร์สมบูรณ์แบบออกมาเป็นผลให้ไม่มีสิ่งนั้นเลย หากคุณมีรูปร่างที่เรียบง่ายและต้องการได้รับเส้นทางสิ่งนี้ก็จะเป็นเช่นนั้น ฉันทำไอคอนตัวอักษรจำนวนมากกับหน้านั้นและไม่เคยล้มเหลวสำหรับฉัน
thednp

@thednp รูปของฉันออกมาขาวดำ
iOSAndroidWindowsMobileAppsDev

7

ฉันเพิ่งพบคำถามและคำตอบนี้เมื่อฉันพยายามทำสิ่งเดียวกัน! ฉันไม่ต้องการใช้เครื่องมืออื่นที่กล่าวถึง (ไม่ต้องการให้อีเมลของฉันออกไปและไม่ต้องการจ่าย) ฉันพบว่า Inkscape (v0.91) สามารถทำได้ดีมาก บทช่วยสอนนี้ได้อย่างรวดเร็วและง่ายต่อการเข้าใจ

มันง่ายเหมือนการเลือกบิตแมปของคุณใน Inkskape และShift + Alt + B

การตรวจจับขอบด้วยเครื่องมือบิตแมป Inksape Trace ขึ้นอยู่กับ potrace


4

ขึ้นอยู่กับ สาเหตุคุณต้องการแปลงจาก. png เป็น. svg คุณอาจไม่ต้องเจอปัญหา การแปลงจาก. png (แรสเตอร์) เป็น. svg (เวกเตอร์) อาจเป็นเรื่องเจ็บปวดหากคุณไม่คุ้นเคยกับเครื่องมือที่มีอยู่หรือหากคุณไม่ใช่นักออกแบบกราฟิกโดยการแลกเปลี่ยน

หากมีคนส่งไฟล์ความละเอียดสูงขนาดใหญ่ (เช่น 1024x1024) ถึงคุณคุณสามารถปรับขนาดไฟล์ให้เล็กลงตามขนาดที่คุณต้องการใน GIMP บ่อยครั้งที่คุณจะมีปัญหาในการปรับขนาดภาพถ้าความละเอียด (จำนวนพิกเซลต่อนิ้ว) ต่ำเกินไป หากต้องการแก้ไขสิ่งนี้ใน GIMP คุณสามารถ:

  1. File -> Open: ไฟล์. png ของคุณ
  2. Image -> Image Properties: ตรวจสอบความละเอียดและพื้นที่สี คุณต้องการความละเอียดประมาณ 300 ppi ในกรณีส่วนใหญ่คุณต้องการให้พื้นที่สีเป็น RGB
  3. Image -> Mode: ตั้งค่าเป็น RGB
  4. Image -> Scale Image: เว้นขนาดไว้คนเดียวตั้งค่าและความละเอียด Y เป็น 300 หรือมากกว่า Hit Scale
  5. Image -> Scale Image: ความละเอียดควรเป็น 300 และคุณสามารถปรับขนาดภาพให้เล็กลงได้ตามที่คุณต้องการ

ไม่ใช่เรื่องง่ายเหมือนกับการปรับขนาดไฟล์. svg แต่แน่นอนว่าง่ายกว่าและเร็วกว่าการแปลง. png เป็น. svg หากคุณมีภาพขนาดใหญ่และความละเอียดสูงอยู่แล้ว


2

ฉันสมมติว่าคุณต้องการเขียนซอฟต์แวร์เพื่อทำสิ่งนี้ หากต้องการทำอย่างไร้เดียงสาคุณเพียงแค่หาเส้นและตั้งเวกเตอร์ ในการทำอย่างชาญฉลาดคุณพยายามปรับรูปร่างให้พอดีกับรูปวาด (การปรับแบบจำลอง) นอกจากนี้คุณควรพยายามตรวจสอบภูมิภาคบิตแมป (ภูมิภาคที่คุณไม่สามารถจำลองผ่านความอับอายหรือการใช้พื้นผิวฉันไม่แนะนำให้ไปเส้นทางนี้เนื่องจากจะใช้เวลาค่อนข้างนานและต้องใช้ความรู้ด้านกราฟิกและคอมพิวเตอร์เล็กน้อย อย่างไรก็ตามเอาต์พุตจะมากและปรับขนาดได้ดีกว่าเอาต์พุตดั้งเดิมของคุณ


2

http://online-converting.com/image/convert-to-svg/ทำงานได้ดีสำหรับการแปลงเป็น svg


นี้เอาสีใด ๆ จากภาพที่มีปัญหาเช่นเดียวกับpotraceในบรรทัดคำสั่ง - ทำให้ผมสงสัยว่าการใช้เว็บไซต์ภายใน ...
SSC

0

เครื่องมือนี้ใช้งานได้ดีในตอนนี้

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


17
สิ่งนี้ฝังรูปภาพเป็น svg ไม่ใช่กราฟิกแบบเวกเตอร์จริง
Paul Gobée

นี่เป็นการแปลง pngs สีของฉันซึ่งผู้แปลงออนไลน์อื่นไม่สามารถแปลงได้อย่างถูกต้อง ฉันคิดว่ามันใช้งานได้เพราะฉันสามารถเปิดในเบราว์เซอร์ได้ แต่เมื่อฉันลองเปิดมันในเครื่องมืออื่นมันมีข้อผิดพลาด อาจเป็นเพราะความคิดเห็นที่ระบุไว้ข้างต้น
vida

-1

หากคุณใช้ระบบ Linux บางระบบ imagemagick นั้นสมบูรณ์แบบ กล่าวคือ

convert somefile.png somefile.svg

ใช้งานได้กับหลายรูปแบบ

สำหรับสื่ออื่น ๆ เช่นวิดีโอและการใช้เสียง (ffmpeg) ฉันรู้ว่าคุณระบุ png กับ svg อย่างชัดเจน มันยังเกี่ยวข้องกับสื่อ

ffmpeg -i somefile.mp3 somefile.ogg

เพียงแค่เคล็ดลับหากคุณต้องการผ่านไฟล์จำนวนมาก วนรอบโดยใช้เทคนิคเชลล์พื้นฐาน ..

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

ซึ่งจะลบ jpg และเพิ่ม png ซึ่งจะบอกให้คุณแปลงสิ่งที่คุณต้องการ


2
Imagemagick ทำงานบนแพลตฟอร์มอื่น ๆ ไม่ใช่แค่ 'Linux'
Lunatik

25
เทคนิคนี้ใช้งานได้ แต่ไฟล์ svg ที่สร้างขึ้นไม่ได้เป็นกราฟิกแบบเวกเตอร์จริงๆ - เพียงแค่มีบิตแมปดั้งเดิม "ตามที่เป็น" ดังนั้นเมื่อคุณขยายภาพคุณจะยังคงได้คุณภาพของภาพแรสเตอร์ที่ด้อยลง
Erel Segal-Halevi

7
@archeyDevil ไม่นั่นไม่ใช่ "การแปลง" เป็น SVG นั่นคือ "การฝัง" บิตแมปภายใน SVG ที่ว่างเปล่า ไม่มีประโยชน์กับใครเลย
อดัม

4
@archeyDevil ชื่อคำถามคือ "แปลง ... เป็น SVG" คำตอบของคุณไม่ได้แปลง มันฝัง PNG เป็นรูปแบบบิตแมป SVG เป็นรูปแบบเวกเตอร์ ความแตกต่างอย่างมาก การฝังนั้นไม่มีประโยชน์และไม่คุ้มค่ากับคำถาม SO ดังนั้น
อดัม

3
ฉันรู้ว่ามันไม่ได้แปลง อย่างไรก็ตามฉันทำ โพสต์สิ่งนี้สำหรับผู้ที่ไม่ต้องการพระยะโฮวา แต่เพียงต้องการการเปลี่ยนแปลงอย่างรวดเร็วและสกปรกระหว่างประเภทไฟล์
DarkFox
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.