เปลี่ยนสี SVG
☞ ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการอัปโหลดไฟล์วางไฟล์ SVG ที่นี่
หรือคลิกเพื่อเลือก — เฉพาะ SVG
ตัวอย่าง
เปลี่ยนสี SVG
รวมทุกสีในไฟล์ไว้ในจานสีเดียว — แก้สีไหนก็เห็นผลทันที หรือจะยกเรื่องสีทั้งหมดให้ CSS จัดการด้วย currentColor ก็ได้
หรือคลิกเพื่อเลือก — เฉพาะ SVG
ตัวอย่าง
จานสีเดียว ครบทุกสี
สีหนึ่งอาจอยู่ในแอตทริบิวต์ fill หรือ stroke อยู่ในสไตล์แบบอินไลน์ หรืออยู่ในสไตล์ชีตที่ฝังในไฟล์ — และไฟล์ที่ส่งออกจาก Illustrator หรือ Figma มักเลือกแบบสุดท้าย นั่นคือเหตุผลที่การไล่แก้ SVG ด้วยมือในโปรแกรมแก้ไขข้อความมักตกหล่นรูปทรงไปบางชิ้นเสมอ
เครื่องมือนี้อ่านครบทั้งสามที่ บวกกับจุดหยุดของการไล่เฉดสีและสีของฟิลเตอร์ แล้วรวมมาไว้ในจานสีเดียว เปลี่ยนตัวอย่างสีหนึ่ง ทุกตำแหน่งที่ใช้สีนั้นก็เปลี่ยนตามไปด้วย ไม่ว่ามันจะถูกเขียนไว้ตรงไหน
สามขั้นตอน
เลือกไฟล์ .svg — ไฟล์ยังอยู่ในอุปกรณ์ของคุณ
ทุกสีในไฟล์จะมีช่องของตัวเอง พร้อมบอกว่าถูกใช้กี่ครั้ง
เปลี่ยนแค่สีเท่านั้น รูปทรงไม่ถูกแตะต้อง
ตอบสั้น ๆ
มันสั่งให้รูปทรงใช้สีข้อความของอิลิเมนต์ที่มันอยู่ข้างใน ไอคอนที่ตั้งเป็น currentColor จะกลายเป็นสีขาวเมื่ออยู่ในปุ่มสีเข้ม และกลายเป็นสีเทาเมื่ออยู่ในข้อความสีจาง โดยไม่ต้องมีไฟล์ที่สองหรือกฎ CSS เพิ่มแม้แต่ข้อเดียว นี่คือวิธีมาตรฐานที่ไลบรารีไอคอนใช้แจกจ่าย SVG
การไล่เฉดสีเป็นการอ้างอิงไปยังนิยามที่อยู่ที่อื่นในไฟล์ ไม่ใช่ตัวสีเอง การไปแทนที่มันจึงเท่ากับลบการไล่เฉดสีทิ้ง ไม่ใช่เปลี่ยนสี ส่วนสีของแต่ละจุดหยุดภายในการไล่เฉดสีนั้นปรากฏอยู่ในจานสี — ให้แก้ตรงนั้นแทน
แสดงว่าไฟล์นั้นไม่มีสีเป็นของตัวเอง โดยทั่วไปหมายความว่าตัวงานถูกตั้งเป็น currentColor อยู่แล้ว หรือรับสีมาจากสไตล์ชีตที่อยู่นอกไฟล์ ลองเปิดในตัวดู SVG เพื่อดูซอร์ส
สีถูกจัดกลุ่มตามค่าที่มันแปลผลออกมาจริง ๆ ดังนั้น #FFF, #ffffff และ white จึงนับเป็นรายการเดียว การแก้รายการนั้นจะอัปเดตทั้งหมด โดยแต่ละแห่งยังคงรูปแบบการเขียนเดิมไว้
ไม่ ไฟล์ถูกแยกวิเคราะห์และเขียนใหม่ในเบราว์เซอร์ของคุณ