ทำตามตัวอย่างการใช้งานนี้ จากนั้นปรับการตั้งค่าเดียวกันกับรูปภาพของคุณเอง เปิด ตัวบีบอัด SVG.
อัปโหลด SVG แบบคงที่หรือวางมาร์กอัป
เปิดเครื่องมือบีบอัด SVG และเลือกไฟล์ SVG หรือลองใช้ตัวอย่าง ตัวอย่างคือ svg-compressor.svg ซึ่งเป็นเครื่องหมายวงโคจรขนาด 985 ไบต์ที่มี viewBox ขนาด 512 × 512, การเติมแบบไล่ระดับสี, ชื่อ และคำอธิบาย ใช้การวาง SVG เมื่อมาร์กอัปอยู่ในโปรแกรมแก้ไขหรือคลิปบอร์ดแล้ว
เครื่องมือนี้รองรับไฟล์สูงสุด 20 ไฟล์ ไฟล์ละ 2 MB โดยจะแยกวิเคราะห์เอกสาร SVG ที่สมบูรณ์และลบการประกาศเอกสาร SVG มาตรฐานออกโดยไม่ต้องโหลดไฟล์ภายนอก XML ที่ผิดรูปแบบ การประกาศเอนทิตีแบบกำหนดเอง และส่วนย่อยของเอกสารภายในจะถูกปฏิเสธ ไฟล์ที่ซับซ้อนมากอาจถึงขีดจำกัดขององค์ประกอบหรือเวลาในการประมวลผล
เวิร์กโฟลว์นี้สร้างงานศิลปะเวกเตอร์แบบคงที่ สคริปต์ ตัวจัดการเหตุการณ์ ทรัพยากรภายนอก แอนิเมชัน และรูปภาพแรสเตอร์ที่ฝังอยู่จะถูกลบออก ตัวอย่างต้นฉบับได้รับการทำความสะอาดแล้ว ดังนั้นจึงไม่ควรตีความว่าเป็นการแสดงผลแบบไม่จำกัดของคุณสมบัติทุกอย่างในไฟล์ต้นฉบับ
เก็บสำเนาของ SVG ต้นฉบับไว้ ภาพประกอบเชิงโต้ตอบหรือ SVG ที่มีรูปถ่ายเป็นกรณีการใช้งานที่แตกต่างจากไอคอนเวกเตอร์แบบคงที่
เปรียบเทียบผลลัพธ์และตั้งค่าความละเอียดทศนิยม
แผงตัวอย่างสองแผงแสดงต้นฉบับที่ทำความสะอาดแล้วและผลลัพธ์ที่ปรับให้เหมาะสม ขนาดถัดจากต้นฉบับและที่ปรับให้เหมาะสม รวมถึงสรุปไบต์จะเปรียบเทียบไฟล์ต้นฉบับกับผลลัพธ์ที่เสร็จสมบูรณ์ โดยจะรายงานการเพิ่มขึ้นเมื่อการปรับให้เหมาะสมทำให้ไฟล์บางไฟล์ใหญ่ขึ้น แทนที่จะสัญญาว่าจะลดขนาดได้ทุกครั้ง
เปิดการตั้งค่าและตั้งค่าความละเอียดทศนิยมเป็น 2 สำหรับตัวอย่าง ความละเอียดมีตั้งแต่ 1 ถึง 5 และเริ่มต้นที่ 3 ค่าที่ต่ำกว่าสามารถทำให้เรขาคณิตตัวเลขง่ายขึ้น แต่อาจทำให้เส้นโค้งละเอียด ช่องว่างเล็กๆ หรือขอบที่จัดแนวไว้เคลื่อนที่ได้ ให้เพิ่มค่าเมื่อตัวอย่างสูญเสียรายละเอียดที่สำคัญ
ตัวอย่างนี้ใช้เรขาคณิตที่ตรงไปตรงมา ดังนั้นความละเอียด 2 จึงคงรูปร่างที่จดจำได้ไว้ SVG อื่นๆ ที่มีพิกัดทศนิยมซับซ้อนอาจเปลี่ยนแปลงได้มากกว่า การดูมาร์กอัป SVG ที่ปรับให้เหมาะสมจะแสดงข้อความจริงที่จะถูกดาวน์โหลด ไม่ใช่การแสดงแทนต้นฉบับแยกต่างหาก
ตรวจสอบเวกเตอร์ที่ขนาดการแสดงผลที่ต้องการและที่มุมมองที่ใหญ่ขึ้น การเปลี่ยนแปลงเล็กน้อยอาจมองเห็นได้ยากในภาพขนาดย่อ
ตัวอย่างในคู่มือนี้
ลองใช้ตัวอย่าง: svg-compressor.svg, 985 ไบต์, 512 × 512 viewBox ความละเอียดทศนิยม 2; เปิดใช้งานการเก็บชื่อ/คำอธิบายที่เข้าถึงได้และย่อ ID ภายใน; ปิดใช้งานขนาดที่ตอบสนองและมาร์กอัปเอาต์พุตที่อ่านง่าย ดาวน์โหลด SVG: 635 ไบต์
- ต้นฉบับ SVG
- 985 ไบต์
- ปรับแต่งแล้ว SVG
- 635 ไบต์
- ขนาดที่ลดลงที่วัดได้
- 35.5%
- บริบทที่คงไว้
- ชื่อ, คำอธิบาย และ 512 × 512 viewBox
รักษาคำอธิบายและพิจารณารหัสภายนอก
เปิดใช้งาน 'เก็บชื่อและคำอธิบายที่เข้าถึงได้' ไว้สำหรับตัวอย่างที่ทำไว้ วิธีนี้จะคงชื่อและคำอธิบาย SVG ไว้ในขณะที่ลบข้อมูลเมตาของโปรแกรมแก้ไขที่ซ้ำซ้อนและทำให้มาร์กอัปที่มีสิทธิ์ง่ายขึ้น ข้อมูลเหล่านี้เป็นข้อมูลประเภทต่างๆ และไม่ควรปฏิบัติเหมือนใช้แทนกันได้
'ย่อรหัสภายใน' ถูกเปิดใช้งานโดยค่าเริ่มต้น ตัวปรับให้เหมาะสมจะอัปเดตการอ้างอิงภายใน SVG แต่ CSS ภายนอกหรือ JavaScript อาจยังคงต้องอาศัยรหัสเดิม ปิดตัวเลือกนี้เมื่อไฟล์เป็นส่วนหนึ่งของแอปพลิเคชันขนาดใหญ่ที่ตั้งชื่อองค์ประกอบของตน และทดสอบ SVG ที่เสร็จสมบูรณ์ในบริบทนั้น
ปิด 'ขนาดที่ตอบสนอง' และ 'มาร์กอัปผลลัพธ์ที่อ่านได้' สำหรับตัวอย่าง ขนาดที่ตอบสนองจะลบความกว้างและความสูงคงที่ออกเมื่อ viewBox พิกัดสามารถให้ขนาดที่ปรับขนาดได้ ผลลัพธ์ที่อ่านได้จะเพิ่มการเยื้องและมีประโยชน์สำหรับการบำรุงรักษา แต่อาจเพิ่มขนาดข้อความ
สำหรับไฟล์ไอคอนแบบสแตนด์อโลน การล้างรหัสภายในมักจะตรงไปตรงมา สำหรับไดอะแกรมที่เขียนสคริปต์จากภายนอก การรักษาตัวระบุอาจมีความสำคัญมากกว่าการประหยัดไบต์เพียงไม่กี่ไบต์
ดาวน์โหลดและตรวจสอบเวกเตอร์ที่เสร็จสมบูรณ์
เลือกเริ่ม จากนั้นดาวน์โหลด ผลลัพธ์ที่ทำไว้คือ 635 ไบต์เมื่อเทียบกับแหล่งที่มา 985 ไบต์: ลดลง 35.5% ชื่อและคำอธิบายยังคงอยู่ และการเปรียบเทียบที่แสดงจะถูกเรนเดอร์จากแหล่งที่มาจริงและ SVG ที่ดาวน์โหลดมา
บทความนี้เรนเดอร์เวกเตอร์ทั้งสองที่ 1,024 พิกเซลเพื่อให้เห็นภาพผลลัพธ์ที่ชัดเจน ขนาดพิกัดเชิงตรรกะยังคงเป็น 512 × 512 ตัวอย่างที่ใหญ่ขึ้นไม่ได้เพิ่มเนื้อหาแรสเตอร์ให้กับ SVG ที่บันทึกไว้ ตรวจสอบเวกเตอร์จริงในหน้าปลายทางของคุณก่อนที่จะแทนที่สินทรัพย์การผลิตที่มีอยู่
ไฟล์เดียวจะดาวน์โหลดเป็น SVG พร้อมชื่อฐานเดิม การดาวน์โหลดแบบชุดจะเป็นไฟล์ ZIP เดียว พร้อมคำต่อท้ายที่เป็นตัวเลขสำหรับชื่อไฟล์ที่ซ้ำกัน การประมวลผลจะเกิดขึ้นในเบราว์เซอร์ เก็บแหล่งที่มาเดิมไว้หากคุณต้องการลองการตั้งค่าการปรับให้เหมาะสมที่แตกต่างกันในภายหลัง
การประหยัดขนาดไฟล์วัดจากตัวอย่างนี้เท่านั้น SVG ที่ปรับแต่งมาแล้วอาจมีการปรับปรุงเพียงเล็กน้อยหรือมีขนาดใหญ่ขึ้นเล็กน้อย
คำถามที่พบบ่อย
SVG ที่ปรับแต่งแล้วจะมีลักษณะเหมือนเดิมทุกประการหรือไม่
ตัวปรับแต่งมีเป้าหมายเพื่อรักษาลักษณะที่ปรากฏแบบภาพนิ่ง แต่การปัดเศษและการลบเนื้อหาที่ไม่รองรับอาจเปลี่ยนไฟล์ได้ เปรียบเทียบตัวอย่างและทดสอบ SVG ที่บันทึกไว้ในโปรเจกต์ของคุณ
ทศนิยมความละเอียดเปลี่ยนอะไร?
มันควบคุมความละเอียดที่ใช้สำหรับเรขาคณิตเชิงตัวเลขและข้อมูลเส้นทาง ค่าที่ต่ำกว่าสามารถลดขนาดได้ แต่อาจทำให้รายละเอียดเล็กๆ เปลี่ยนไป ค่าเริ่มต้นคือ 3
มันเก็บชื่อและคำอธิบายไว้หรือไม่?
ใช่ โดยค่าเริ่มต้น ให้เปิดใช้งาน เก็บชื่อและคำอธิบายที่เข้าถึงได้ ไว้เพื่อรักษาองค์ประกอบ SVG เหล่านั้น
ทำไมสคริปต์หรือภาพแรสเตอร์ถึงหายไป?
เครื่องมือนี้สร้างผลลัพธ์เวกเตอร์แบบคงที่ สคริปต์ เหตุการณ์ ทรัพยากรภายนอก แอนิเมชัน และภาพแรสเตอร์ที่ฝังอยู่จะถูกลบออกโดยเจตนาในระหว่างการทำความสะอาด
ฉันสามารถเก็บ ID ที่อ้างอิงโดย CSS ไว้ได้ไหม?
ปิดใช้งาน ย่อ ID ภายใน เมื่อโค้ดภายนอกขึ้นอยู่กับ ID เฉพาะ ตรวจสอบไฟล์ที่ปรับให้เหมาะสมในหน้าเป้าหมายก่อนที่จะแทนที่ไฟล์ต้นฉบับ
ไฟล์ SVG ถูกอัปโหลดเพื่อปรับให้เหมาะสมหรือไม่?
ไม่ เครื่องมือนี้ทำการแยกวิเคราะห์และปรับให้เหมาะสมในเบราว์เซอร์และดาวน์โหลดผลลัพธ์ลงในเครื่อง
ฉันสามารถอัปโหลด SVG ที่มี DOCTYPE ได้หรือไม่?
การประกาศเอกสาร SVG มาตรฐานได้รับการยอมรับและจะถูกลบออกโดยไม่ต้องดึงตัวระบุภายนอก การประกาศเอนทิตีแบบกำหนดเองและชุดย่อยของเอกสารภายในจะถูกปฏิเสธ
ทำให้เวกเตอร์เบาลง พร้อมผลลัพธ์ที่คุณสามารถตรวจสอบได้
ลองใช้ตัวอย่างหรือใช้ไฟล์ของคุณเอง และตรวจสอบผลลัพธ์ก่อนแชร์
