ลดขนาด SVG

วิธีการทำงานของการลดขนาด SVG

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

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

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

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

คำอธิบายตัวเลือกการลดขนาด SVG

ควรใช้เมื่อใด

ลดขนาดไฟล์ SVG ก่อนนำไอคอนและโลโก้ขึ้นเว็บไซต์ ซึ่งทุกกิโลไบต์เพิ่มเวลาโหลดหน้า ก่อนฝัง SVG ลงใน HTML หรือคอมโพเนนต์ React ก่อนคอมมิตไฟล์งานออกแบบลงในที่เก็บโค้ด หรือเมื่อแบบฟอร์มอัปโหลดจำกัดขนาดไฟล์

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

เกี่ยวกับตัวปรับแต่ง SVG

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

การแก้ปัญหาการลดขนาด SVG

"ปรับแต่งแล้ว ส่งคืนโดยไม่เปลี่ยนแปลง"

SVG ถูกปรับแต่งมาแล้ว จึงไม่มีอะไรลบได้โดยไม่เปลี่ยนแปลงไฟล์ ไฟล์ต้นฉบับจะถูกส่งคืนให้

บางส่วนของภาพวาดเลื่อนหรือผิดรูป

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

"ไม่ใช่ไฟล์ SVG"

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

วิธีลดขนาด SVG ทีละขั้นตอน

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

ทำแบบออนไลน์ปลอดภัยไหม?

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

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