วิธีแก้ไขไฟล์ SVG: ใช้โปรแกรมออกแบบหรือแก้โค้ด

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

ก่อนเลือกคำสั่งที่เปลี่ยนโครงสร้างมาก ให้ระบุสิ่งที่เลือกก่อน กลุ่ม พาธเดียวที่มีหลายส่วน และ PNG ที่ฝังอยู่ ต่างก็ดูเหมือนวัตถุเดียวบนผืนงานได้ แต่ต้องแก้คนละวิธี

เตรียมสำเนาและระบุวัตถุใน SVG

ต้องมีไฟล์ SVG สำเนาทำงาน โปรแกรมแก้ไข และโปรแกรมดูภาพที่รองรับ SVG เก็บต้นฉบับจนกว่าสำเนาที่ส่งออกจะผ่านการตรวจ

SVG ย่อมาจาก Scalable Vector Graphics มาร์กอัป XML อธิบายรูปทรงและพาธเวกเตอร์ได้ แต่ก็มีภาพฝังได้เช่นกัน พาธ อธิบายเส้นหรือรูปทรง ส่วน โหนด เป็นจุดบนพาธที่แก้ได้ในโปรแกรมเวกเตอร์ นามสกุล SVG อย่างเดียวไม่บอกว่าภาพที่เห็นมีจุดเหล่านี้ให้แก้หรือไม่

เปิดสำเนาและตรวจวัตถุที่เลือกในแผง Layers หรือ Objects หากจำเป็นให้ดูมาร์กอัปด้วยโปรแกรมข้อความ ระบุชนิดให้ตรงก่อนเปลี่ยนโครงสร้าง:

องค์ประกอบ <image> อ้างอิง PNG หรือ JPEG ได้ พิกเซลเหล่านั้นไม่ได้กลายเป็นพาธเพราะชื่อไฟล์ชั้นนอกลงท้าย .svg ขอบที่เป็นบล็อกเมื่อขยายเป็นเบาะแส แต่แผงวัตถุและแหล่งอ้างอิงช่วยวินิจฉัยได้เจาะจงกว่า บางโปรแกรมใส่ SVG เวกเตอร์ที่ถูกต้องเป็นวัตถุกราฟิกชิ้นเดียวด้วย การเลือกได้ครั้งเดียวจึงพิสูจน์อะไรได้ไม่มาก

พาธประกอบอาจรักษารู เช่นช่องกลางตัว “O” การแยกพาธอาจเปลี่ยนรูนั้น ใช้ การวินิจฉัยชนิดวัตถุ SVG เมื่อใช้ Ungroup ไม่ได้หรือไม่มีผล

เลือกโปรแกรมแบบภาพหรือแก้โค้ด

Inkscape เป็นโปรแกรมฟรีและโอเพนซอร์ส ใช้ได้บน macOS, Windows และ Linux และใช้ SVG เป็นรูปแบบหลัก Illustrator ก็เป็นทางเลือกหากใช้อยู่แล้ว Figma ย้ายชิ้นงานระหว่างโปรแกรมออกแบบด้วย SVG ได้ แต่ คำแนะนำการนำเข้าไม่รองรับองค์ประกอบ marker และ pattern ของ SVG ตรวจการนำเข้าไฟล์ซับซ้อนก่อนตัดสินใจใช้โปรแกรม

ขั้นตอนแก้ SVG ของ Canva ที่เผยแพร่ครอบคลุมการเปลี่ยนสีและเลย์เอาต์พื้นฐาน โปรแกรมในเบราว์เซอร์อาจเหมาะกับงานเล็ก ตรวจการรองรับสีเติม เส้น ข้อความ และเอฟเฟกต์ในไฟล์ รวมทั้งเงื่อนไขส่งออกปัจจุบัน หากต้องการเพียงแยกสีเติมทึบที่รองรับออกเป็นไฟล์ตามสีที่ตรงกันโดยรักษาตำแหน่ง ใช้ SVG Color Separator หากต้องเปลี่ยนรูปร่างพาธให้ใช้โปรแกรมเวกเตอร์

แก้รูปทรงแบบภาพแล้วตรวจไฟล์ส่งออก

ชื่อคำสั่งต่างกันตามโปรแกรม แต่ลำดับงานคือ:

1. เปิดสำเนาทำงาน เปรียบเทียบแบบที่นำเข้ากับต้นฉบับ หยุดหากตัวอักษร ลวดลาย หรือเอฟเฟกต์เปลี่ยนไปแล้ว
2. เลือกวัตถุที่ต้องการ เข้าไปในกลุ่มหรือแยกกลุ่มเฉพาะเมื่อแผงระบุว่าเป็นกลุ่ม หากเป็นพาธให้เปลี่ยนไปใช้เครื่องมือโหนดหรือเลือกโดยตรง
3. แก้หนึ่งอย่าง เปลี่ยนสีเติม ย้ายส่วนหนึ่ง หรือปรับไม่กี่โหนด เมื่อเปลี่ยนขนาดให้ล็อกอัตราส่วน เว้นแต่ตั้งใจยืด
4. ตรวจส่วนที่เปลี่ยน ดูเส้นโค้งและช่องเล็กในระยะใกล้ แล้วดูทั้งแบบที่ขนาดใช้งาน
5. บันทึกหรือส่งออก SVG ใหม่ เปิดใหม่ในโปรแกรมดูภาพและแอปที่จะใช้งาน ยืนยันส่วนที่แก้ ขนาดโดยรวม และวัตถุที่ต้องเลือกแยกได้

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

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

แก้โค้ด SVG เพื่อเปลี่ยนเล็กน้อยอย่างควบคุมได้

เปิดสำเนา SVG ใน VS Code หรือโปรแกรมข้อความธรรมดาอื่น รักษา namespace ชื่อองค์ประกอบ และเครื่องหมายคำพูด แก้ทีละอย่างและเรนเดอร์ก่อนแก้ต่อ

ลองเปลี่ยน fill โดยไม่เปลี่ยนพาธ

บันทึกตัวอย่างเป็น triangle.svg แล้วเปิดด้วยโปรแกรมที่รองรับ SVG:

<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>

1. แทน #3b82f6 ด้วย #f97316 ในแอตทริบิวต์ fill ของพาธ
2. บันทึกแล้วเปิดใหม่หรือรีเฟรชไฟล์
3. ตรวจว่าสามเหลี่ยมเป็นสีส้มและขอบไม่เปลี่ยน ข้อมูลพาธ d, id และ class ควรตรงกับต้นฉบับ

หากสีไม่เปลี่ยน ให้ตรวจแอตทริบิวต์ style กฎ class สีที่สืบทอด หรือ stroke ที่อาจควบคุมภาพ แก้กฎสีที่รับผิดชอบ แทนการแทนที่ทุกครั้งที่สีนั้นปรากฏในไฟล์

วิธีตรวจ: เราเรนเดอร์ตัวอย่างก่อนและหลังเปลี่ยน fill ด้วย SVG renderer แล้วตรวจพิกเซลที่ได้ สีสามเหลี่ยมเปลี่ยนแต่ข้อมูลพาธ ID และ class คงเดิม ตัวอย่างเล็กนี้ไม่ได้ทดสอบการนำเข้าหรือส่งออก SVG ซับซ้อนในโปรแกรมออกแบบ

เอาขอบว่างออกด้วย viewBox

viewBox ที่รากมีตัวเลขสี่ตัว: x ต่ำสุด, y ต่ำสุด, ความกว้าง และความสูง ตัวเลขกำหนดสี่เหลี่ยมในพื้นที่พิกัด SVG ที่แมปเข้ากับพื้นที่แสดงผล

ในตัวอย่างสามเหลี่ยมอยู่ระหว่าง x=8 ถึง 40 และ y=8 ถึง 40 เปลี่ยน viewBox="0 0 48 48" เป็น viewBox="8 8 32 32" โดยไม่แตะข้อมูลพาธ บันทึกและเรนเดอร์อีกครั้ง สามเหลี่ยมจะกินพื้นที่มากขึ้นในพื้นที่แสดงผล 48×48 เดิมเพราะไม่มีขอบว่าง

การแก้นี้เปลี่ยนการแมปผืนงาน ไม่ใช่รูปทรงพาธหรือ width และ height ของราก สำหรับภาพจริงให้เผื่อพื้นที่เส้นและเอฟเฟกต์ กรอบที่ชิดรูปทรงอาจตัดสิ่งเหล่านี้ ทางเลือกแบบภาพที่ปลอดภัยกว่ามักเป็นปรับหน้าหรือ artboard ให้พอดีภาพแล้วตรวจสำเนาส่งออก หากนำเข้าแล้วขนาดจริงผิด ให้ดู คู่มือขนาด SVG และ viewBox

หากภาพหาย ถูกตัด หรือยืด ให้คืน viewBox เดิมและตรวจค่าทั้งสี่กับอัตราส่วน อย่า “แก้” ปัญหาผืนงานด้วยการย้ายทุกโหนด

เมื่อ SVG ที่ลากเส้นมาต้องจัดระเบียบ

ภาพราสเตอร์เก็บพิกเซลบนตาราง การแปลงเป็นเวกเตอร์ สร้างรูปทรงใหม่จากพิกเซล ไฟล์ที่ลากเส้นมาจึงอาจจัดสีและขอบต่างจากแบบเดิม

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

โครงสร้างหลายชิ้น

โครงสร้างเรียบง่ายขึ้น

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

เมื่อนำวิธีนี้มาใช้กับ PerfectVector

PerfectVector เหมาะกับกรณีที่ต้องสร้างพาธจากราสเตอร์ เช่น PNG หรือ JPEG ต้นฉบับ หรือเนื้อหาราสเตอร์ใน SVG ส่วนเวกเตอร์ที่มีอยู่และต้องการรักษา ให้ใช้วิธีทั่วไปด้านบน

สำหรับการแปลงภาพของคุณ ทำตามลำดับนี้:

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

ตัวอักษรราสเตอร์ถูกสร้างใหม่เป็นรูปทรง อย่าคาดว่าจะเป็นข้อความที่พิมพ์แก้ได้ เตรียมแก้ด้วยมือหรือวาดใหม่เมื่ออักษร เส้นโค้ง หรือช่องเล็กสำคัญไม่คงอยู่หลังลากเส้น

คำถามที่พบบ่อย

แก้ SVG ฟรีได้อย่างไร? ใช้ Inkscape สำหรับการแก้แบบภาพ หรือโปรแกรมข้อความธรรมดาสำหรับมาร์กอัป เครื่องมือเบราว์เซอร์อาจมีฟีเจอร์ฟรีด้วย ตรวจเงื่อนไขส่งออกปัจจุบันและการรองรับฟีเจอร์ SVG ที่ไฟล์ใช้

แก้ SVG ใน VS Code ได้ไหม? ได้ แก้ XML สำหรับสีเติมเล็กน้อย ขนาด viewBox หรือ ID และ class ที่ต้องใช้ บันทึกสำเนาและเรนเดอร์ภายหลัง ใช้โปรแกรมแบบภาพเมื่อต้องปรับรูปร่างเส้นโค้ง

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

แก้ SVG ใน Canva ได้ไหม? ขั้นตอน SVG ของ Canva ที่เผยแพร่ครอบคลุมสีและเลย์เอาต์พื้นฐาน ตรวจไฟล์นำเข้าและเงื่อนไขดาวน์โหลด SVG ปัจจุบัน หากต้องแก้ขอบแม่นยำหรือควบคุม ID และ class ใช้โปรแกรมเวกเตอร์หรือมาร์กอัป

แก้ผลลัพธ์ PerfectVector ก่อนปลดล็อกได้ไหม? สำหรับการแปลงของคุณ ให้เทียบภาพตัวอย่างก่อน แล้วปลดล็อกผลลัพธ์ก่อนใช้ตัวควบคุมแก้ไขและส่งออก ตรวจ SVG ที่ส่งออกในแอปที่จะใช้งาน

แหล่งอ้างอิง

1. W3C — Scalable Vector Graphics (SVG) 2 — โมเดลเอกสาร รูปทรง พาธ และสไตล์ SVG
2. W3C — เนื้อหาฝังใน SVG — ภาพราสเตอร์อาจยังฝังอยู่ในเอกสาร SVG
3. W3C — ระบบพิกัด การแปลง และหน่วยของ SVG — การแมป viewBox และความต่างระหว่างขนาดรูปทรงกับพื้นที่แสดงผล
4. Inkscape — เกี่ยวกับโปรแกรม — ข้อมูลแพลตฟอร์ม รูปแบบ SVG และโอเพนซอร์สอย่างเป็นทางการ
5. Adobe — การบันทึกงานใน Illustrator — ตั้งค่าส่งออก SVG และข้อมูลแก้ไข Illustrator ที่เก็บไว้
6. Figma — คัดลอกชิ้นงานระหว่างเครื่องมือออกแบบ — ขั้นตอนย้าย SVG และข้อจำกัด marker/pattern
7. Canva — โปรแกรมแก้ไข SVG — ขั้นตอนสี ขนาด และเลย์เอาต์พื้นฐานที่เผยแพร่
8. PerfectVector — นโยบายราคา — เงื่อนไขภาพตัวอย่าง ปลดล็อกผลลัพธ์ และดาวน์โหลดซ้ำปัจจุบัน

เก็บ SVG ที่ใช้ได้และแก้รูปทรงเดิม หากต้นฉบับเป็นราสเตอร์หรือต้องเปลี่ยนพาธที่ลากมา ลองภาพต้นฉบับใน PerfectVector เทียบภาพตัวอย่างกับต้นฉบับ ปลดล็อกก่อนแก้ แล้วตรวจรูปทรงกับขนาดที่ส่งออกในแอปถัดไป