เวิร์กโฟลว์ SVG
ดู ปรับแต่ง และส่งออกไฟล์ SVG ใน 5 ขั้นตอน
การทำงานกับ SVG เกี่ยวข้องกับงานที่แตกต่างกันหลายอย่าง ได้แก่ การตรวจสอบโค้ดดิบ การลบข้อมูลส่วนเกินจากเครื่องมือออกแบบ การส่งออกเป็นรูปแบบ raster การเตรียมภาพตัวอย่าง และการฝังสำหรับเว็บ เวิร์กโฟลว์นี้ครอบคลุมทั้งหมดตามลำดับ
ตรวจสอบโค้ดต้นฉบับ SVG
ก่อนแก้ไข SVG คุณต้องเข้าใจโครงสร้างของมัน ว่ามีองค์ประกอบอะไร ใช้ ID หรือ class และ metadata ที่เครื่องมือส่งออกเพิ่มไปคืออะไร
ปรับแต่งและลดขนาดไฟล์
SVG ที่ส่งออกจาก Illustrator หรือ Figma มี metadata ที่ไม่จำเป็น ความคิดเห็นจากเอดิเตอร์ และแอตทริบิวต์ซ้ำซ้อนที่อาจเพิ่มขนาดไฟล์เป็นสองเท่า
ส่งออกเป็นภาพ raster
บางบริบทต้องการ PNG หรือ JPEG เช่น email client, CMS บางตัว และแพลตฟอร์มโซเชียลมีเดียที่ไม่แสดง SVG อย่างน่าเชื่อถือ
ตกแต่งสำหรับการนำเสนอหรือเอกสาร
ภาพหน้าจอธรรมดาของ SVG บนพื้นหลังสีขาวดูยังไม่เสร็จสมบูรณ์ การเพิ่มพื้นหลัง padding และเงาทำให้พร้อมสำหรับการนำเสนอ
เข้ารหัสเป็น Base64 สำหรับการฝังแบบ inline
การฝัง SVG เป็น Base64 data URI ใน CSS หรือ HTML ช่วยขจัด HTTP request หนึ่งครั้ง ซึ่งมีประโยชน์สำหรับไอคอนขนาดเล็กในบริบทที่ประสิทธิภาพสำคัญ
เคล็ดลับ
- ตรวจสอบโค้ดต้นฉบับ SVG ก่อนเสมอ เครื่องมือปรับแต่งบางครั้งอาจทำให้ SVG ที่มีโครงสร้างหรือแอนิเมชันพิเศษพัง
- ส่งออกด้วยความละเอียด 2x หรือ 3x เมื่อแปลง SVG เป็น PNG เพื่อให้คมชัดบนหน้าจอความหนาแน่นสูง
- การเข้ารหัส Base64 เพิ่มขนาดไฟล์ประมาณ 33% ดังนั้นใช้เฉพาะกับไอคอนขนาดเล็กที่การขจัด HTTP request คุ้มค่า