วิธีเปลี่ยนสี SVG และแก้ปัญหาที่พบบ่อย

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

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

SVG เก็บสีไว้ที่ไหน

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

หลักการมีเท่านี้ วิธีเปลี่ยนสีทุกแบบด้านล่างเป็นเพียงวิธีต่างกันในการหารูปทรงแล้วเขียน fill หรือ stroke ใหม่ นี่คือเหตุผลที่ผลลัพธ์ต่างกันมากระหว่างไฟล์: ยิ่งรูปทรงน้อยและสะอาด การเปลี่ยนสียิ่งง่าย

เลือกวิธีของคุณ

วิธีที่ 1: เครื่องมือเปลี่ยนสี SVG ออนไลน์

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

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

วิธีที่ 2: แอปออกแบบเวกเตอร์

Inkscape ฟรีและทำทุกอย่างที่งานนี้ต้องการได้ ส่วน Illustrator และ Figma ทำงานในลักษณะเดียวกัน

1. เปิด SVG แล้วคลิกส่วนที่จะเปลี่ยน หากเลือกทั้งงานเป็นก้อนเดียว แสดงว่าจัดกลุ่มอยู่: ดับเบิลคลิกเพื่อเข้ากลุ่ม หรือยกเลิกการจัดกลุ่ม
2. เปลี่ยนสีเติมในแผง Fill & Stroke ของ Inkscape หรือช่องสีเติมของ Illustrator และ Figma
3. เมื่อสีที่เห็นเป็นสีเดียวถูกแยกอยู่หลายรูปทรง อย่าคลิกทีละชิ้น คลิกขวารูปทรงแล้วใช้ Select Same → Fill Color ใน Inkscape หรือใช้ Select → Same → Fill Color ที่มีเอกสารของ Illustrator ทุกรูปทรงที่มีสีเติมนั้นถูกเลือก แล้วเปลี่ยนครั้งเดียวได้ทั้งหมด
4. ส่งออกหรือบันทึกเป็น SVG แบบธรรมดา

แอปออกแบบยังเหมาะกับงานเกินกว่าการเปลี่ยนสี เช่น ขยับรูปทรงหรือแก้เส้นโค้ง ดูเครื่องมือที่กว้างขึ้นในคู่มือ แก้ไข SVG

วิธีที่ 3: โปรแกรมแก้ไขข้อความ

เพราะ SVG เป็นข้อความ โปรแกรมใดก็ใช้ได้: Notepad, TextEdit หรือ VS Code

1. เปิดไฟล์ .svg แล้วค้นหา fill=
2. เปลี่ยนค่า เช่น จาก fill="#1e3a5f" เป็น fill="#c2410c" แล้วบันทึก
3. รีเฟรชไฟล์ในแท็บเบราว์เซอร์เพื่อตรวจผล

มีข้อควรระวังสามข้อ สีเขียนเป็นชื่อได้ด้วย เช่น fill="black" ไม่ใช่แค่ฐานสิบหก เส้นขอบอยู่ใน stroke= ไม่ใช่ fill= และไฟล์ส่งออกหลายไฟล์ไม่ได้ใส่สีไว้บนรูปทรง แต่ใช้คลาส โดยรหัสสีจริงอยู่ในบล็อก <style> ใกล้ด้านบน เช่น .st0{fill:#1e3a5f;} แก้รหัสในบล็อกสไตล์ แล้วทุกรูปทรงที่ใช้คลาสนั้นเปลี่ยนตาม

วิธีนี้เหมาะมากกับไอคอนสีเดียวที่ค้นหาและแทนครั้งเดียวก็เสร็จ และงานเป็นชุดทั้งโฟลเดอร์ สำหรับภาพประกอบสี่สิบสี วิธีนี้ช้า

หาก SVG อยู่บนเว็บไซต์

เปลี่ยนสี SVG ด้วย CSS ได้ไหม? วิธีตรงที่สุดคือใส่มาร์กอัป SVG แบบอินไลน์ใน HTML จากนั้น fill ทำงานเหมือนคุณสมบัติ CSS และตั้งสีเติมเป็น currentColor เพื่อให้ไอคอนรับสีข้อความรอบตัว SVG ที่โหลดเป็น <img> ภายนอกถูกมองเป็นภาพ MDN ระบุว่า JavaScript แก้โครงสร้าง SVG ในรูปแบบนั้นไม่ได้ และสไตล์ของหน้าเลือกพาธภายในโดยตรงไม่ได้

หากใส่ไฟล์แบบอินไลน์ไม่ได้ ต้องกลับไปใช้วิธีแก้ไฟล์ข้างต้น: เปลี่ยนสีภายใน SVG แล้วโหลดใหม่ สำหรับการเลือกวิธีแสดงผล ให้เทียบ SVG อินไลน์กับภาพภายนอก ด้วยงานเดียวกันและการทดสอบ CSS ของหน้า

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

สำหรับเอฟเฟกต์สีที่ย้อนกลับได้ ให้ เทียบ feColorMatrix กับการแก้สีเติมโดยตรง ฟิลเตอร์เปลี่ยนสีที่เรนเดอร์โดยเก็บสีต้นฉบับไว้ ซึ่งสำคัญเมื่อต้องส่งมอบงานที่แก้ไขได้

ทำไม SVG ไม่ยอมเปลี่ยนสี

นี่คือส่วนที่บทสอนมักข้าม และเป็นจุดที่การเปลี่ยนสีส่วนใหญ่ล้มเหลว ไล่ตรวจตามตาราง

สองกรณีควรดูละเอียดขึ้น

กล่องพื้นหลังที่โผล่มา

SVG บางไฟล์มีสี่เหลี่ยมพื้นหลังเต็มขนาดที่มองไม่เห็นบนหน้าขาว เมื่อเปลี่ยนสี “ทุกอย่าง” กล่องจะปรากฏเป็นก้อนสีหลังงาน และบางแอปเลือกมันเมื่อคุณคลิกด้วย เป็นรูปทรงปกติ จึงเลือกแล้วลบ หรือให้สีที่ต้องการจริงได้ หากกล่องปรากฏเป็นสีขาวในซอฟต์แวร์อื่น เป็นปัญหาที่เกี่ยวข้องแต่ต่างกัน ซึ่งอธิบายในคู่มือ รักษาพื้นหลังโปร่งใส

SVG ที่ไม่ใช่เวกเตอร์

กรณีที่ดื้อที่สุดมีลักษณะนี้: เลือกรูปทรงไม่ได้ แก้สีเติมแล้วไม่มีผล และเมื่อซูมขอบเป็นพิกเซล เปิดในโปรแกรมแก้ไขข้อความแล้วแทนที่จะพบองค์ประกอบ <path> คุณพบแท็ก <image> เดียวที่บรรจุข้อความ base64 จำนวนมาก นั่นคือภาพแรสเตอร์ที่ห่อใน .svg เครื่องมือแปลงที่ไม่ได้ลากเส้นจริงให้ผลแบบนี้ และไม่มีเครื่องมือสีใดช่วยได้ เพราะไม่มีรูปทรงให้ระบายใหม่ ฟิลเตอร์ที่ “ใส่สี” เพียงย้อมพิกเซล ซึ่งมักได้ผลไม่ดี ทั้งสองไฟล์ดูเหมือนกันบนหน้าจอ แต่ในโค้ดต่างกันชัดเจน:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

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

เปลี่ยนสีไฟล์ตัด: ทุกสีคือเลเยอร์

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

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

หากต้องดาวน์โหลดแยกหลังเปลี่ยนสี ให้ บันทึกแต่ละสีที่ตรงกันเป็นไฟล์ SVG ที่จัดแนวตรงกัน

PerfectVector ทำงานนี้อย่างไร

ขอบอกข้อจำกัดตรง ๆ ก่อน: PerfectVector ไม่ได้แก้ไฟล์ SVG ที่คุณมีอยู่แล้ว แต่แปลงภาพ PNG, JPG และ WebP เป็น SVG อย่างไรก็ตาม ปัญหา “จะเปลี่ยนสี SVG นี้อย่างไร” จำนวนมากย้อนกลับไปที่ขั้นแปลงนั้น: ไฟล์ที่แก้ยากมักเป็นผลลากเส้นยุ่งเหยิง หรือไม่ใช่เวกเตอร์จริงเลย

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

สิ่งที่การเปลี่ยนสีทำไม่ได้

• การไล่สีไม่ใช่ช่องสีเดียว เป็นช่วงเปลี่ยนระหว่างจุดกำหนดสี คุณแก้จุดเหล่านั้นได้ แต่การ “แทนสีนี้” ธรรมดาอาจเปลี่ยนเพียงส่วนหนึ่งของช่วง จึงทำให้งานไล่สีดูแปลกหลังเปลี่ยนแบบง่าย ๆ
• สีหน้าจอไม่ใช่สีพิมพ์ SVG เก็บคำสั่งสีสำหรับหน้าจอ แต่งานพิมพ์อาจต้องการสีแบรนด์ สีพิเศษ หรือสูตรสีดำที่แม่นยำ หากส่งออกแล้วสีที่เห็นเปลี่ยน ให้ วินิจฉัยสี SVG ที่เปลี่ยนไป ก่อนแทนชุดสี รูปแบบการผลิตที่ร้านพิมพ์ขอยังคงเป็นหลักอ้างอิงด้านสี
• การเปลี่ยนสีไม่ทำให้เรขาคณิตสะอาด สีเติมใหม่ไม่รวมชิ้นแคบ ปิดช่องว่าง หรือลดโหนด ผลลากเส้นยุ่งเหยิงที่มีสีใหม่ก็ยังยุ่งเหยิง

ก่อนบันทึก

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

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

เปลี่ยนสีไฟล์ SVG โดยไม่ใช้ Illustrator หรือ Photoshop อย่างไร? ใช้เครื่องมือเปลี่ยนสี SVG ออนไลน์ฟรี อัปโหลด คลิกช่องสี แล้วดาวน์โหลด หรือใช้ Inkscape โปรแกรมแก้ไขเวกเตอร์เดสก์ท็อปฟรี สำหรับไอคอนสีเดียว เปิดในโปรแกรมแก้ไขข้อความใดก็ได้แล้วเปลี่ยนรหัสฐานสิบหกหลัง fill= ก็ได้ ทุกวิธีไม่มีค่าใช้จ่าย

ทำไม SVG ยังดำไม่ว่าจะลองอะไร? หากอยู่บนเว็บไซต์ CSS เปลี่ยนสไตล์ SVG ที่โหลดผ่านแท็ก img ไม่ได้ ให้ใส่แบบอินไลน์หรือแก้ไฟล์ หากอยู่ในโปรแกรมแก้ไข ให้ตรวจว่ามีกลุ่มขวางอยู่ สีที่เห็นมาจากเส้นขอบ หรือกำหนดสีในบล็อกสไตล์หรือไม่ หากเลือกอะไรไม่ได้และซูมเห็นพิกเซล ไฟล์เป็นแรสเตอร์ห่อใน .svg และไม่มีรูปทรงให้เปลี่ยนสี

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

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

เปลี่ยนสี SVG สำหรับงาน Cricut อย่างไร? เปลี่ยนสีเลเยอร์ใน Cricut Design Space ได้ แต่เปลี่ยนตามเลเยอร์ ไม่ใช่รูปทรง หากต้องจัดใหม่ว่าส่วนไหนใช้สีเดียวกันและตัดด้วยกัน ให้แก้ SVG ก่อนอัปโหลด: รวมสีที่ต้องการในเลเยอร์เดียว และให้สีเติมต่างกันกับส่วนที่ควรตัดแยก

เปลี่ยนสี SVG ทำให้คุณภาพลดไหม? ไม่ สีเวกเตอร์เป็นคำสั่งข้อความ การเปลี่ยนจึงเขียนคำสั่งใหม่โดยไม่แตะเรขาคณิต ต่างจากการแก้ PNG คุณเปลี่ยนสี SVG กี่ครั้งก็ได้โดยไม่สูญเสียคุณภาพเลย

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

1. MDN: สีเติมและเส้นขอบ SVG — อธิบาย fill, stroke ความทึบ และคุณสมบัติสี SVG ที่เกี่ยวข้อง
2. MDN: เพิ่มกราฟิกเวกเตอร์ลงเว็บ — เปรียบเทียบ SVG อินไลน์กับ SVG ที่โหลดผ่าน <img>
3. Adobe Illustrator: เลือกวัตถุที่มีสีเติมและเส้นขอบเดียวกัน — อธิบายการเลือกงานตามคุณสมบัติสีที่ใช้ร่วมกัน
4. W3C: เนื้อหาฝังใน SVG 2 — กำหนดเนื้อหาแรสเตอร์ <image> ภายในเอกสาร SVG
5. Canva: ตัวแก้ไข SVG — แหล่งข้อมูลปัจจุบันเรื่องความสามารถอัปโหลด เปลี่ยนสี และดาวน์โหลด SVG ของ Canva

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