วิธีนำเข้าและแก้ไขไฟล์ SVG ใน Figma, Canva หรือ WordPress

คุณมี SVG แล้ว ต่อไปคืออะไร?

เครื่องมือแปลงไฟล์ส่วนใหญ่จะหยุดที่ปุ่มดาวน์โหลด แต่ไฟล์จะไม่มีประโยชน์ถ้ายังอยู่ในโฟลเดอร์ดาวน์โหลด นักออกแบบเปิดใน Figma เพื่อใส่สีแบรนด์ ผู้จัดการชุมชนนำไปวางใน Canva เพื่อสร้างโพสต์ นักพัฒนาเว็บนำไปใส่ใน WordPress เป็นโลโก้ส่วนหัว ขั้นตอนนี้เองที่พิสูจน์ว่า PixelToPath เข้ากับเวิร์กโฟลว์จริง ไม่ใช่แค่เดโม

SVG ของ PixelToPath ไม่ใช่ภาพนิ่ง แต่เป็นชุดของเส้นพาธ: แต่ละรูปทรงมีการเติมสี และอาจมีเส้นขอบ การเปลี่ยนสีฟ้าของโลโก้เป็นสีแดงเบอร์กันดี, การแยกไอคอน, การขยายสำหรับสตอรี่ 1080x1920: ทั้งหมดนี้สามารถทำได้ในเครื่องมือที่คุณใช้งานอยู่แล้ว โดยไม่ต้องกลับไปที่ Illustrator

ทำไม Figma, Canva และ WordPress ถึงชอบรูปแบบนี้

เมื่อนำเข้า PNG และ JPG จะกลายเป็นบิตแมป การเปลี่ยนสีโลโก้ PNG ใน Figma เป็นการวางเลเยอร์ทับ ไม่ใช่การเปลี่ยนสีเส้นพาธ Canva จะไม่แสดงแผงเปลี่ยนสี WordPress จะแสดงไฟล์ที่หนักและเบลอบนหน้าจอ Retina SVG แก้ปัญหาทั้งสามข้อนี้ได้ในคราวเดียว

โดยรูปธรรม SVG จาก PixelToPath จะให้:

• เส้นพาธที่แก้ไขได้: หนึ่งสีต่อรูปทรง แก้ไขได้ใน Figma (เติมสี) หรือ Canva (แผงเปลี่ยนสี)
• ไฟล์ที่มีน้ำหนักเบา ซึ่งต่ำกว่าขีดจำกัด 3 MB ของ Canva มาก และโหลดบนเว็บไซต์ WordPress ได้เร็วกว่า PNG @2x
• ความคมชัดที่เหมือนกันทั้งใน Favicon, แบนเนอร์ LinkedIn หรือ Roll-up: ไฟล์เดียวใช้ได้ทั้งหมด
• ผลงานที่ส่งมอบให้ลูกค้า: พวกเขาสามารถเปิดในเครื่องมือที่มีได้ ไม่จำเป็นต้องใช้ Creative Cloud

Figma: นำเข้า SVG และเปลี่ยนสี

Figma นำเข้า SVG เป็นกลุ่มเวกเตอร์ ไม่ใช่รูปถ่าย นี่คือจุดเด่น: แต่ละรูปทรงยังคงเป็นเลเยอร์ที่คุณสามารถเปลี่ยนสี ย้าย หรือซ่อนได้

1. ดาวน์โหลด .svg จาก PixelToPath และเปิดไฟล์ Figma ของคุณ
2. ลากไฟล์จากโปรแกรมสำรวจไฟล์ไปที่แคนวาสโดยตรง หรือเลือก: ไฟล์ → นำเข้า หรือกด Ctrl+Shift+K (Cmd+Shift+K บน Mac) เพื่อวาง SVG
3. เลเยอร์จะปรากฏเป็นกลุ่ม ดับเบิลคลิกเพื่อเข้าไป หรือคลิกขวา → ยกเลิกการจัดกลุ่ม (Shift+Ctrl+G / Shift+Cmd+G) หากต้องการจัดการรูปทรงทีละชิ้น
4. เลือกเส้นพาธ ในแผงด้านขวา ในส่วนเติมสี (Fill) ให้คลิกที่แผงสี: รหัสสีหกหลัก, ตัวอย่างสี, หลอดดูดสี รูปทรงทั้งหมดจะเปลี่ยนสี โดยที่ขอบยังคงคมชัด
5. สำหรับโลโก้สีเดียว ให้เลือกรูปทรงทั้งหมดในกลุ่มแล้วใช้สีเดียว จากนั้นส่งออกเป็น SVG, PNG หรือ PDF จากส่วนส่งออกหากผลงานไม่ต้องเป็นเวกเตอร์อีกต่อไป

หาก Figma แสดงภาพแบนๆ แทนเลเยอร์เวกเตอร์ แสดงว่าไฟล์นั้นมีบิตแมปอยู่ (PNG ที่ซ่อนอยู่) ซึ่งไม่ใช่กรณีของการส่งออกจาก PixelToPath ในโหมดขาวดำหรือโปสเตอร์ ให้แปลงไฟล์ต้นฉบับด้วยหนึ่งในสองโหมดนี้ ไม่ใช่โหมดภาพถ่าย

Canva: วาง SVG และเปลี่ยนสี

Canva รองรับ SVG ทั้งแบบฟรีและ Pro การเปลี่ยนสีใช้งานได้เมื่อไฟล์นั้นเรียบง่าย: สีทึบ โหนดน้อย ไม่มีการไล่ระดับสี นี่คือสิ่งที่ PixelToPath สร้างในโหมดโปสเตอร์หรือขาวดำ

1. ใน Canva ให้เปิดการออกแบบ ในแผงด้านซ้าย → อัปโหลด → อัปโหลดไฟล์ เลือก .svg ของคุณ (ขนาดน้อยกว่า 3 MB; ไฟล์จาก PixelToPath มีขนาดต่ำกว่านี้มาก)
2. เมื่อไฟล์อยู่ในส่วนอัปโหลดแล้ว ให้ลากลงบนเพจ ปรับขนาดที่มุม: เวกเตอร์ยังคงคมชัด แม้ในรูปแบบสตอรี่หรือ A4
3. คลิกที่ SVG ในแถบเครื่องมือ แผงสีจะปรากฏขึ้น หนึ่งสีต่อเฉดสีในไฟล์ คลิกแผงสี เลือกสีใหม่: Canva จะนำไปใช้กับรูปทรงทั้งหมดที่มีสีนั้น
4. หากไม่มีแผงสีปรากฏขึ้น แสดงว่า SVG ซับซ้อนเกินไป (มีการไล่สี มีสีมากเกินไป มีเส้นพาธแบบภาพถ่าย) กลับไปที่ PixelToPath เปลี่ยนเป็นโหมดโปสเตอร์หรือขาวดำ ส่งออกและนำเข้าใหม่

Canva แนะนำให้ใช้โปรไฟล์ SVG 1.1 จัดกลุ่มรูปทรงที่มีสีเดียวกัน และไม่มีพื้นผิว พรีเซ็ตโลโก้ของ PixelToPath ตรงตามข้อกำหนดเหล่านี้แล้ว ไม่จำเป็นต้องใช้ Illustrator เพื่อ "เตรียม" ไฟล์

WordPress: อนุญาตการอัปโหลด SVG โดยไม่มีช่องโหว่

WordPress ปฏิเสธ SVG ตามค่าเริ่มต้น และนั่นไม่ใช่เรื่องที่ทำไปงั้นๆ SVG เป็น XML: อาจมี JavaScript, เอนทิตีภายนอก, และเพย์โหลด XSS ผู้เยี่ยมชมหรือบัญชีผู้แก้ไขที่ถูกบุกรุกสามารถอัปโหลด SVG ที่เป็นอันตรายเพื่อรันโค้ดในระบบแอดมินได้ จึงมีการบล็อกไว้ คุณต้องอนุญาตรูปแบบนี้และล้างไฟล์ให้ปลอดภัย

อย่าเพียงแค่เพิ่ม image/svg+xml ใน functions.php หากไม่มีการล้างไฟล์ คุณจะเปิดช่องโหว่ วิธีที่ปลอดภัย: ใช้ปลั๊กอินที่ได้รับการดูแลซึ่งล้างสคริปต์ เหตุการณ์ onload และเอนทิตี XML เราแนะนำ Safe SVG (โดย 10up) ที่มีการติดตั้งกว่าล้านครั้ง

1. ในหน้าแอดมิน WordPress: ปลั๊กอิน → เพิ่มใหม่ ค้นหา Safe SVG (โดย 10up) ติดตั้งและใช้งาน
2. ไปที่ ตั้งค่า → สื่อ จำกัดการอัปโหลด SVG เฉพาะผู้ดูแลระบบ (หรือบทบาทที่เชื่อถือได้) อย่าเปิดให้ผู้เขียนทุกคนอัปโหลดได้หากเว็บไซต์มีผู้มีส่วนร่วมหลายคน
3. สื่อ → เพิ่มใหม่ วางไฟล์ .svg จาก PixelToPath ปลั๊กอินจะล้างไฟล์เมื่อนำเข้าและแสดงตัวอย่างในไลบรารีสื่อ ซึ่ง WordPress ไม่ได้ทำเป็นค่าเริ่มต้น
4. ในบทความหรือหน้าเว็บ ให้แทรกบล็อกรูปภาพและเลือก SVG สำหรับโลโก้ส่วนหัว ให้ใช้ ปรับแต่ง / เอกลักษณ์ของไซต์ หรือบล็อกรูปภาพในเทมเพลตธีม (เครื่องมือแก้ไขไซต์)
5. วิธีสำหรับนักพัฒนา: ไม่ต้องผ่านไลบรารีสื่อ วางไฟล์ลงในธีม (assets/logo.svg) และอ้างอิงในเทมเพลต หรือฝังอินไลน์เพื่อจัดรูปแบบด้วย CSS ไม่มีการอัปโหลด จึงไม่มีความเสี่ยงด้านความปลอดภัยในไลบรารีสื่อ

Safe SVG ยังสามารถจำกัดสิทธิ์ผู้ที่สามารถอัปโหลดได้ อัปเดตปลั๊กอินอยู่เสมอ: การล้างไฟล์คือการควบคุมที่แท้จริง ไม่ใช่แค่การคลิก "อนุญาต SVG" เพียงอย่างเดียว

SVG ใดจาก PixelToPath ที่ควรใช้วางในเครื่องมือเหล่านี้?

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

• โลโก้, ไอคอน, ตัวอักษร: ขาวดำ หรือ โปสเตอร์ นี่คือสีทึบ Figma และ Canva สามารถเปลี่ยนสีได้ในคลิกเดียว
• หลีกเลี่ยงโหมดภาพถ่ายหากคุณตั้งใจจะแก้ไขสี โหมดนี้จะสร้างรูปทรงเล็กๆ จำนวนมาก; Canva มักจะไม่แสดงแผงสีที่มีประโยชน์
• ครอบตัดรูปภาพต้นฉบับก่อนแปลง: พื้นหลังน้อยลง โหนดน้อยลง SVG จะอ่านได้ง่ายขึ้นในเลเยอร์ของ Figma
• หนึ่งรูปแบบต่อหนึ่งการใช้งาน: SVG ขาวดำสำหรับ Figma (แบรนด์ดิ้ง), SVG สีสำหรับ Canva (โพสต์), ไฟล์ที่คลีนแล้วอันเดียวกันสำหรับ WordPress (ส่วนหัว)

เวิร์กโฟลว์นี้เปลี่ยนชีวิตประจำวันอย่างไร

เมื่อ SVG อยู่ในเครื่องมือของคุณ คุณจะไม่ต้องแปลงไฟล์ใหม่ทุกครั้ง:

• แบรนด์บุ๊กใน Figma: PNG ของลูกค้าจะกลายเป็นคอมโพเนนต์ที่คุณสามารถเปลี่ยนสีได้ (สีหลัก สีตรงข้าม ขาวดำ) โดยไม่ต้องวาดใหม่
• โพสต์ Canva: SVG ไฟล์เดียวใช้ได้ทั้ง 6 สีของแคมเปญ สตอรี่และภาพสไลด์คมชัด
• โลโก้ WordPress: ไฟล์เดียวในส่วนหัว คมชัดบนมือถือและจอ Retina เบากว่าไฟล์ PNG เดิม
• การส่งมอบงานฟรีแลนซ์: คุณส่งมอบ SVG พร้อมคู่มือ Figma / Canva ลูกค้าจะไม่ติดขัดอีกต่อไป
• ไอคอนอินเทอร์เฟซ: นำเข้าทั้งหมดเข้าสู่ Figma ทีละชุด จัดแนวบนกริด 24 px แล้วส่งออกทีเดียว

เก็บ PNG ไว้ใช้กับภาพถ่าย สำหรับสิ่งอื่นๆ ที่ต้องเปลี่ยนสีหรือต้องการความคมชัด แค่ใช้ PixelToPath ร่วมกับ Figma / Canva / WordPress ก็เพียงพอแล้ว