PNG เป็น SVG สำหรับ Canva และ Figma
โลโก้ของคุณเบลอเมื่อคุณขยายใน Canva หรือคุณต้องการเลเยอร์เวกเตอร์จริงใน Figma แปลง PNG เป็น SVG สีเรียบที่ปฏิบัติตามกฎการอัปโหลดของ Canva
วาง PNG ของคุณที่นี่
ลากและวางภาพ หรือกดเพื่อเลือกไฟล์
เลือกภาพPNG, JPG, WEBP, BMP, GIF
ตัวแปลงจะเปิดด้วยค่ากำหนดที่แนะนำด้านล่าง เปิดตัวแปลงไฟล์โดยไม่มีไฟล์
แรสเตอร์ต้นฉบับ
เวกเตอร์ SVG
วิธีแปลง PNG เป็น SVG สำหรับ Canva หรือ Figma
- เริ่มต้นจากไฟล์ PNG ที่สะอาดที่สุด. ใช้เวอร์ชันที่ใหญ่ที่สุดที่คุณมี ตัดแต่งให้เข้ากับงานศิลปะ สีเรียบและขอบแข็งติดตามได้ดี
- Upload and convert. ลาก PNG ด้านบนไปวาง; JPG, WEBP, BMP และ GIF ก็ใช้งานได้เช่นกัน ขนาดสูงสุด 15 MB โหมดพรีเซ็ตจะถูกนำไปใช้ และการดูตัวอย่างนั้นฟรีโดยไม่ต้องมีบัญชี
- Check the preview. มองหาจุดรบกวนที่กระจายอยู่ รายละเอียดที่หายไป และเฉดสีเดียวกันที่เกินมา แล้วปรับคุณภาพหากจำเป็น
- Download the SVG. ดาวน์โหลดโดยใช้ 1 เครดิต สำหรับ Canva ให้ตรวจสอบว่าไฟล์มีขนาดไม่เกิน 3 MB หากมีขนาดมากกว่านั้น ให้ลดคุณภาพแล้วแปลงไฟล์อีกครั้ง
- Import it. ใน Canva ให้เพิ่มผ่านอัปโหลดของคุณ ใน Figma ลาก SVG ไปวางบนผ้าใบ
การตั้งค่าที่แนะนำ
เหตุผลที่ PNG ใน Canva และ Figma เบลอ
PNG คือตารางของพิกเซล หากขยายขนาดสำหรับแบนเนอร์ใน Canva หรือกรอบขนาดใหญ่ใน Figma ขอบจะดูนุ่มและหยัก การแปลง PNG เป็น SVG สำหรับ Canva และ Figma จะเปลี่ยนพิกเซลเป็นรูปทรงเวกเตอร์ ทำให้กราฟิกยังคงคมชัดในทุกขนาด
นอกจากนี้ การที่คุณสร้างโลโก้บนแผนฟรีของ Canva ก็ช่วยได้เช่นกัน การอัปโหลด SVG ไปยัง Canva ไม่ได้จำกัดเฉพาะแผน Pro แต่การดาวน์โหลดผลงานของคุณเป็นรูปแบบ SVG เป็นฟีเจอร์ของแผนเสียเงิน ให้ดาวน์โหลดเป็น PNG แทน แล้วทำตามขั้นตอนแปลง PNG เป็น SVG ของ Canva ที่นี่
กฎของ Canva สำหรับการอัปโหลดไฟล์ SVG
ศูนย์ช่วยเหลือของ Canva ระบุข้อกำหนดบางประการสำหรับการอัปโหลด SVG นี่คือวิธีที่แต่ละข้อกำหนดแมปกับ SVGR
| Canva asks for | How to get there in SVGR |
|---|---|
| A file under 3 MB | ปรับคุณภาพไปยังไฟล์ที่เล็กลง หรือตัดต้นฉบับให้เหลือเฉพาะภาพประกอบ |
| SVG 1.1 | ไม่ใช่การตั้งค่าใน SVGR; หาก Canva ปฏิเสธไฟล์ ให้ตรวจสอบแถวขนาดและเกรเดียนต์ก่อน |
| ขยายเส้นทุกเส้น เส้นทาง และกล่องข้อความทั้งหมด | ผลลัพธ์ประกอบด้วยรูปทรงที่เติมเต็มไม่มีเส้นขอบ; ปิดการรู้จำข้อความเพื่อไม่ให้เพิ่มข้อความแบบสด |
| หลีกเลี่ยงการใช้พื้นผิวและไล่สี | เมื่อตั้งค่าประเภทการออกแบบเป็น Design และปิด Recognize text SVGR จะติดตามสีเรียบ ให้เริ่มจากงานศิลปะแบบเรียบ เนื่องจากเกรเดียนต์ในไฟล์ต้นฉบับจะปรากฏเป็นแถบสี |
สิ่งที่คุณจะเห็นเมื่อคุณนำเข้า SVG เข้าไปใน Figma
Figma นำเข้า SVG เป็นเลเยอร์เวกเตอร์ ดังนั้นคุณสามารถเลือก เปลี่ยนสี และปรับขนาดรูปทรงได้โดยตรง นั่นคือจุดประสงค์ของการแปลง PNG เป็น SVG ใน Figma: คุณจะได้รูปทรงที่แก้ไขได้แทนที่จะเป็นภาพแบนราบ
SVGR จัดเรียงรูปทรงซ้อนกันแทนที่จะตัดช่องว่าง ช่องตรงกลางของตัว O หรือช่องว่างภายในวงแหวนคือรูปทรงที่มีสีเดียวกับพื้นหลังวางทับบนรูปทรงทึบ ดังนั้นใน Figma คุณจะเห็นเลเยอร์ที่ซ้อนกัน ซึ่งดูถูกต้องเมื่ออยู่บนพื้นหลังที่ตรงกัน แต่จะปรากฏชัดเจนเมื่ออยู่บนสีอื่น
เพื่อสร้างรูที่แท้จริง ให้เลือกวัตถุบนและวัตถุด้านล่างแล้วใช้คำสั่ง Subtract จาก boolean operations ของ Figma
ข้อความ: รูปที่ติดตามหรือข้อความสด?
เมื่อปิดการรู้จำข้อความ ตัวอักษรจะถูกติดตามเป็นรูปทรง ดูเหมือนต้นฉบับทุกประการและใช้งานได้ทั้งในแอปทั้งสอง แต่คุณไม่สามารถพิมพ์ซ้ำได้
เมื่อเปิดใช้งาน ข้อความที่ตรวจพบจะกลายเป็นข้อความ SVG แบบสด (live SVG text) และ SVGR จะดำเนินการปรับแต่งสี ซึ่งอาจเพิ่มการเติมแบบไล่เฉดสี Canva ขอให้ออกแบบข้อความให้ขยาย (expanded) ดังนั้นจึงควรปิดฟีเจอร์นี้ใน Canva Figma นำเข้าข้อความ SVG เป็นข้อความแบบสด แต่มีข้อจำกัด: ความโปร่งใสของข้อความถูกเพิกเฉย ขนาดฟอนต์แบบ em ถูกอ่านเป็นพิกเซล และค่าระยะห่างตัวอักษร (letter-spacing) บนสแปนข้อความแต่ละชิ้นถูกเพิกเฉย
สำหรับโลโก้ ให้ปิดการรู้จำข้อความ หากคุณต้องการหัวข้อที่แก้ไขได้ ให้พิมพ์ซ้ำใน Figma ด้วยฟอนต์ที่ถูกต้อง
ขอบเขตของความรู้
- การแปลง PNG เป็น SVG สำหรับ Canva และ Figma เหมาะสำหรับกราฟิกแบน ไม่ใช่วิธีสำหรับภาพถ่าย การแปลงภาพถ่ายด้วย Trace จะกลายเป็นไฟล์ขนาดใหญ่และซับซ้อน; สำหรับ Canva ให้อัปโหลดภาพถ่ายนั้นโดยตรงเป็นไฟล์ JPG หรือ PNG
- PNG ที่มีขอบนุ่มอาจมีสีที่เกือบเหมือนกันกลับมา เช่น โทนสีดำเกือบดำหลายสี หากต้องการพาเลตต์ที่สะอาด ให้เปลี่ยนสีเป็นสีเดียวใน Figma หรือโปรแกรมแก้ไขอื่น
- วิธีที่ Canva ให้คุณเปลี่ยนสี SVG ที่อัปโหลดขึ้นอยู่กับไฟล์ และเราไม่ได้ทดสอบกับทุกการออกแบบ อัปโหลดไฟล์ทดสอบหนึ่งไฟล์ก่อนสร้างเทมเพลตโดยอิงจากไฟล์นั้น
- การจัดเรียงชั้นรูปทรงมีความสำคัญใน Canva เช่นกัน เมื่อใช้พื้นหลังโปร่งใส ด้านในของตัว O จะคงสีพื้นเดิมไว้ และปรากฏเป็นจุดบนสีอื่นใด ตัดรูเหล่านั้นใน Figma หรือใช้ Path > Difference ใน Inkscape ก่อนอัปโหลด
- การตั้งค่าพื้นหลังแบบโปร่งใสจะลบรูปทรงที่วาดด้วยสีจากมุมภาพ ซึ่งคือสิ่งที่ผู้คนหมายถึงคำว่า "พื้นหลัง" หากงานศิลปะของคุณรุกล้ำเข้าไปในทั้งสี่มุม หรือมุมต่างๆ มีสีต่างกัน จะไม่มีอะไรถูกลบออก และพื้นหลังจะคงอยู่ — ให้งานศิลปะมีขอบว่างที่เรียบและสม่ำเสมอ แล้วแปลงไฟล์อีกครั้ง พื้นที่ที่ถูกงานศิลปะปิดล้อมอย่างสมบูรณ์จะไม่ถูกลบออก และ PNG ที่มีช่องความโปร่งใสอยู่แล้วจะคงสภาพเดิม
- เส้นโค้งถูกวาดขึ้นจากส่วนโค้งเล็กๆ จำนวนมาก เมื่อวาดจากภาพขนาดเล็ก เส้นเหล่านี้อาจดูเป็นมุมๆ เมื่อขยายขนาด จึงควรเริ่มจากสำเนาขนาดใหญ่ที่สุดที่มี
คำถามที่พบบ่อย
ฉันสามารถอัปโหลด SVG ไปยัง Canva ในแผนฟรีได้หรือไม่?
ใช่ การอัปโหลด SVG ไม่ได้จำกัดเฉพาะแผน Pro เท่านั้น แต่การดาวน์โหลดผลงานของคุณเป็นรูปแบบ SVG เป็นฟีเจอร์ของแผนเสียเงิน กรุณาเก็บไฟล์ให้มีขนาดไม่เกิน 3 MB
ทำไม SVG ของฉันถึงไม่แสดงผลถูกต้องใน Canva?
Canva ขอไฟล์ SVG 1.1 ขนาดไม่เกิน 3 MB โดยให้ขยายเส้นขอบ เส้นโค้ง และข้อความออก และไม่มีพื้นผิวหรือไล่สี ตรวจสอบข้อความแบบสดและการไล่สีก่อน: แปลงอีกครั้งโดยปิดการรู้จำข้อความ จากแหล่งข้อมูลสีเรียบ
ทำไมมีรูปทรงซ้อนกันอยู่บน Figma?
SVGR จัดเรียงรูปทรง: รูในตัวอักษรหรือวงแหวนคือรูปทรงที่มีสีพื้นหลังวางทับบนรูปทรงทึบ เลือกทั้งสองแล้วใช้ Subtract เพื่อเปลี่ยนให้เป็นรูที่แท้จริง
Can I edit the text?
เมื่อปิด Recognize text ข้อความจะอยู่ในรูปแบบรูปทรง: คุณสามารถเปลี่ยนสีและปรับรูปร่างได้ แต่ไม่สามารถแก้ไขข้อความได้ เมื่อเปิด Figma จะนำเข้าข้อความแบบแก้ไขได้ แต่จะละเลยความโปร่งใสของข้อความและระยะห่างระหว่างตัวอักษรบางรายการ Canva ต้องการให้ข้อความถูกขยาย ดังนั้นให้ปิดตัวเลือกนี้ใน Canva
Is the file too big?
Canva จำกัดขนาดการอัปโหลด SVG ไว้ที่ 3 MB ปรับคุณภาพไปทาง "ไฟล์เล็กลง" ตัดต่อให้เข้ากับงานศิลปะ หรือลดจำนวนสีในไฟล์ต้นฉบับ จากนั้นแปลงอีกครั้ง
ฉันสามารถเวกเตอร์ไรซ์ภาพสำหรับ Canva ได้หรือไม่หากเป็นไฟล์ JPG หรือภาพหน้าจอ?
ใช่ SVGR รับไฟล์ PNG, JPG, WEBP, BMP และ GIF ขนาดสูงสุด 15 MB การแปลงและดูตัวอย่างฟรีโดยไม่ต้องสมัครบัญชี ส่วนการดาวน์โหลดคิดค่าใช้ 1 เครดิต
กรณีการใช้งานที่เกี่ยวข้อง
พร้อมแปลงข้อมูลหรือยัง?
การแปลงและดูตัวอย่างเป็นฟรี โดยไม่ต้องมีบัญชี การดาวน์โหลด SVG หรือ PDF ใช้เครดิตหนึ่งหน่วย