เปลี่ยนสี SVG

ตัวเปลี่ยนสี SVG

รวมทุกสีในไฟล์ไว้ในจานสีเดียว — แก้สีไหนก็เห็นผลทันที หรือจะยกเรื่องสีทั้งหมดให้ CSS จัดการด้วย currentColor ก็ได้

เปลี่ยนสี SVG

☞ ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการอัปโหลดไฟล์

วางไฟล์ SVG ที่นี่

หรือคลิกเพื่อเลือก — เฉพาะ SVG

จานสีเดียว ครบทุกสี

สีซ่อนอยู่ตรงไหนบ้างในไฟล์ SVG

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

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

สามขั้นตอน

วิธีเปลี่ยนสีในไฟล์ SVG

01

วางไฟล์ SVG

เลือกไฟล์ .svg — ไฟล์ยังอยู่ในอุปกรณ์ของคุณ

02

แก้ตัวอย่างสี

ทุกสีในไฟล์จะมีช่องของตัวเอง พร้อมบอกว่าถูกใช้กี่ครั้ง

03

ดาวน์โหลด

เปลี่ยนแค่สีเท่านั้น รูปทรงไม่ถูกแตะต้อง

ตอบสั้น ๆ

คำถามที่พบบ่อยเรื่องตัวเปลี่ยนสี SVG

currentColor ทำอะไรกันแน่

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

ทำไมฉันแก้การไล่เฉดสีไม่ได้

การไล่เฉดสีเป็นการอ้างอิงไปยังนิยามที่อยู่ที่อื่นในไฟล์ ไม่ใช่ตัวสีเอง การไปแทนที่มันจึงเท่ากับลบการไล่เฉดสีทิ้ง ไม่ใช่เปลี่ยนสี ส่วนสีของแต่ละจุดหยุดภายในการไล่เฉดสีนั้นปรากฏอยู่ในจานสี — ให้แก้ตรงนั้นแทน

จานสีว่างเปล่า

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

สองเฉดที่ดูเหมือนกันใช้ตัวอย่างสีช่องเดียวกัน

สีถูกจัดกลุ่มตามค่าที่มันแปลผลออกมาจริง ๆ ดังนั้น #FFF, #ffffff และ white จึงนับเป็นรายการเดียว การแก้รายการนั้นจะอัปเดตทั้งหมด โดยแต่ละแห่งยังคงรูปแบบการเขียนเดิมไว้

ไฟล์ของฉันถูกอัปโหลดไหม

ไม่ ไฟล์ถูกแยกวิเคราะห์และเขียนใหม่ในเบราว์เซอร์ของคุณ