SVGZ กับ SVG: เลือกไฟล์สำหรับแก้ไขหรือส่งมอบ

SVGZ คือไฟล์ SVG ที่บีบอัดด้วย gzip เมื่อคลายการบีบอัด คุณจะได้เอกสาร SVG กลับมา รวมทั้งพาธ สี ข้อความ และภาพที่ฝังอยู่ การจดทะเบียนชนิดสื่อ SVG ของ W3C กำหนดให้ .svgz เป็นชื่อเรียกอีกแบบของ .svg.gz

เลือก SVGZ หรือ SVG ตามขั้นตอนการทำงานของผู้รับ เก็บไฟล์ .svg แบบปกติไว้เมื่อมีคนต้องอ่านมาร์กอัป หรือโปรแกรมต้องการรูปแบบนั้น ใช้ .svgz เมื่อผู้รับรองรับและคุณมีเหตุผลที่จะส่งไฟล์บีบอัด สำหรับเว็บไซต์ ให้ตรวจสอบการบีบอัด HTTP ก่อนเปลี่ยนชื่อไฟล์ เพราะ URL ที่ลงท้ายด้วย .svg อาจส่งเนื้อหาที่บีบอัดอยู่แล้ว

ตัวอย่างด้านล่างบีบอัดตราสัญลักษณ์ต้นฉบับขนาด 332 ไบต์ให้เหลือ 243 ไบต์ แล้วคืนค่าไบต์ต้นฉบับได้ตรงทุกไบต์ นี่เป็นผลของไฟล์หนึ่งไฟล์ ไม่ใช่คำรับรองเกี่ยวกับงานภาพหรือความเร็วหน้าเว็บของคุณ

อะไรเปลี่ยนเมื่อ SVG กลายเป็น SVGZ?

คู่มือชนิดไฟล์ SVG ของ MDN แยก SVG แบบข้อความปกติออกจาก SVG ที่บีบอัดด้วย gzip และอธิบายการตั้งค่าเซิร์ฟเวอร์ที่ SVGZ ต้องใช้ หากยังไม่คุ้นเคยกับเอกสารภายใน ให้เริ่มจาก ไฟล์ SVG มีอะไรอยู่บ้าง

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

ทดลองบีบอัดเป็น SVGZ แล้วคืนเป็น SVG ด้วยตราสัญลักษณ์เล็ก ๆ

ภาพประกอบต้นฉบับนี้มีรูปหกเหลี่ยมสีเขียวอมฟ้า ดวงอาทิตย์สีคอรัล และภูเขาสีอ่อน บันทึกข้อความต่อไปนี้เป็น badge.svg ในโฟลเดอร์สำหรับทดลอง:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
  <path d="m60 78 10-16 11 16-11-5Z" fill="#a8d9d3"/>
</svg>

บนระบบที่มี gzip, cmp และ wc ให้เรียกใช้คำสั่งเหล่านี้ในโฟลเดอร์นั้น ใช้ชื่อไฟล์ผลลัพธ์ใหม่ หากไฟล์ชื่อดังกล่าวมีงานที่ต้องการเก็บไว้อยู่แล้ว

gzip -n -c badge.svg > badge.svgz
gzip -dc badge.svgz > roundtrip.svg
cmp badge.svg roundtrip.svg
wc -c badge.svg badge.svgz roundtrip.svg

คำสั่งแรกเขียนสำเนาบีบอัดโดยเก็บต้นฉบับไว้ ตัวเลือก -n ไม่ใส่ชื่อไฟล์ต้นฉบับและเวลาลงในเฮดเดอร์ gzip คำสั่งที่สองถอดรหัสสำเนาบีบอัดลงในอีกไฟล์หนึ่ง cmp ตรวจสอบไบต์ และ wc -c รายงานจำนวนไบต์

เราเรียกใช้ชุดคำสั่งนี้ด้วย Apple gzip 457.140.3 ทุกคำสั่งทำงานสำเร็จ และ cmp ไม่พบความแตกต่างระหว่าง SVG ต้นฉบับกับ SVG ที่ถอดรหัสแล้ว

ไฟล์บีบอัดลดขนาดลง 89 ไบต์ หรือประมาณ 26.8% ของขนาดต้นฉบับนี้ ช่องว่าง รูปแบบการขึ้นบรรทัดใหม่ เมทาดาทา งานภาพ หรือการตั้งค่าการบีบอัดที่ต่างกันอาจเปลี่ยนผลลัพธ์ได้ การเปรียบเทียบไบต์ยืนยันว่าการบีบอัดและคลายกลับครั้งนี้เก็บต้นฉบับไว้ครบ แต่ไม่ได้วัดเวลาในการส่งข้อมูลให้เบราว์เซอร์ ประสิทธิภาพการเรนเดอร์ หรือความเข้ากันได้กับโปรแกรมแก้ไข

หากคุณเพียงต้องการเปิด SVGZ ในโปรแกรมแก้ไขที่ต้องการ SVG ขั้นตอนที่เกี่ยวข้องคือการคลายการบีบอัด การเปลี่ยนชื่อ badge.svgz เป็น badge.svg ยังทำให้ไบต์บีบอัดคงอยู่ เช่นเดียวกัน การเปลี่ยนชื่อ SVG เป็น SVGZ ไม่ได้เรียกใช้ gzip

แยกการบีบอัดออกจากการปรับแต่งงานภาพ

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

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

SVG ยังอาจมีภาพแรสเตอร์อยู่ภายใน การบีบอัดเอกสารนั้นเก็บภาพที่ฝังไว้ แต่ไม่ได้สร้างเส้นขอบที่แก้ไขได้รอบวัตถุในภาพ วิธีตรวจหาแรสเตอร์ที่ฝังอยู่ ช่วยแยกไฟล์ที่ใช้เป็นภาชนะใส่ภาพออกจากงานที่สร้างด้วยพาธเวกเตอร์

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

เว็บไซต์บีบอัดการตอบกลับ SVG แบบปกติได้

การบีบอัด HTTP ไม่ขึ้นอยู่กับชื่อไฟล์ที่แสดงใน URL เซิร์ฟเวอร์สามารถรับคำขอ badge.svg แล้วส่งข้อมูล SVG นั้นในรูปแบบบีบอัด คู่มือการบีบอัด HTTP ของ MDN อธิบายการตกลงรูปแบบ: คำขอแจ้งการเข้ารหัสที่รองรับ และการตอบกลับระบุการเข้ารหัสที่ใช้ เมื่อรูปแบบข้อมูลเปลี่ยนตาม Accept-Encoding การตอบกลับจะใช้ Vary: Accept-Encoding เพื่อให้แคชแยกเวอร์ชันเหล่านั้นได้

สำหรับการตอบกลับ SVG ที่เข้ารหัสด้วย gzip เฮดเดอร์ที่เกี่ยวข้องคือ:

Content-Type: image/svg+xml
Content-Encoding: gzip

Content-Type ระบุชนิดสื่อหลังถอดรหัส Content-Encoding บอกผู้รับว่าต้องถอดรหัสเนื้อหาการตอบกลับอย่างไร เอกสารอ้างอิง Content-Encoding ของ MDN อธิบายความแตกต่างนี้ เฮดเดอร์เหล่านี้ต้องอธิบายไบต์ที่ส่งจริง การเพิ่ม Content-Encoding: gzip ให้ SVG ที่ไม่บีบอัดไม่ได้ทำให้ไฟล์ถูกบีบอัด

สำหรับไฟล์ .svgz ที่เก็บไว้และให้บริการเป็นภาพ SVG คำแนะนำเซิร์ฟเวอร์ SVGZ ของ MDN กำหนดให้ใช้ชนิดสื่อ SVG และการเข้ารหัสเนื้อหา gzip ตรวจสอบการตอบกลับสุดท้ายในแผง Network ของเบราว์เซอร์ รวมทั้งพฤติกรรมของ CDN การเปิดไฟล์ในเครื่องได้สำเร็จไม่ได้ยืนยันการตอบกลับนั้น

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

ส่งไฟล์ที่โปรแกรมถัดไปใช้ได้

สำหรับการส่งมอบงานที่แก้ไขได้ ให้ถามว่าผู้รับนำเข้ารูปแบบใดได้ หากรับ SVG แต่ปฏิเสธ SVGZ ให้ส่ง SVG ที่คลายการบีบอัดแล้วและทดสอบสำเนานั้น การคลายการบีบอัดไม่สามารถเพิ่มการรองรับคุณสมบัติ SVG ที่ตัวโปรแกรมไม่เข้าใจได้

เปิดไฟล์ที่โปรแกรมยอมรับในโปรแกรมปลายทางและตรวจวัตถุภายใน ตรวจตัวอักษร การตัดขอบ ภาพที่ฝัง สี และรายละเอียดเล็กที่สุดที่สำคัญ แยกการตรวจนี้ออกจากการถอดรหัสไฟล์: แม้ไบต์ต้นฉบับจะเหมือนกัน โปรแกรมที่รองรับคุณสมบัติต่างกันก็อาจตีความแตกต่างกันได้

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

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

เมื่อต้นทางยังต้องการพาธเวกเตอร์

หากไฟล์เวกเตอร์หลักหายไปและเหลือเพียงโลโก้ PNG หรือ JPG แบบแบน ขั้นตอนแปลงภาพเป็นเวกเตอร์ ของ PerfectVector ช่วยเตรียม SVG ที่แก้ไขได้สำหรับประเมินได้ เปรียบเทียบภาพตัวอย่างกับต้นฉบับ ตรวจช่องว่างและบริเวณที่แยกจากกัน และเปิดไฟล์ที่ดาวน์โหลดในโปรแกรมแก้ไขที่ตั้งใจใช้ เลือกการบีบอัดหลังจากยอมรับงานภาพแล้วเท่านั้น

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

คำถามที่พบบ่อย

SVGZ มีคุณภาพสูงกว่า SVG หรือไม่? ไม่ การบีบอัด Gzip เปลี่ยนรูปแบบการจัดเก็บ การคลายการบีบอัดอย่างถูกต้องคืนต้นฉบับ SVG กลับมา ไม่ได้ปรับปรุงพาธ สี หรือภาพที่ฝังอยู่

จะแปลง SVGZ เป็น SVG ได้อย่างไร? คลายการบีบอัดด้วยเครื่องมือที่จัดการ gzip ได้ แล้วบันทึก SVG ที่ถอดรหัสแล้ว ตัวอย่างเช่น gzip -dc badge.svgz > roundtrip.svg เขียนสำเนาที่ถอดรหัสแล้ว การเปลี่ยนนามสกุลเพียงอย่างเดียวไม่ได้ทำขั้นตอนนั้น

SVGZ ทำให้เว็บไซต์เร็วขึ้นเสมอหรือไม่? นามสกุลนี้ไม่ได้รับประกันความเร็วที่เพิ่มขึ้นตายตัว การตอบกลับ SVG แบบปกติอาจใช้การบีบอัด HTTP อยู่แล้ว ตรวจเฮดเดอร์การตอบกลับจริง จำนวนไบต์ที่ส่ง เงื่อนไขแคช และพฤติกรรมของหน้าเว็บ

การบีบอัด SVG ลดจำนวนโหนดหรือไม่? ไม่ Gzip เก็บต้นฉบับไว้และคืนกลับผ่านการถอดรหัส การลดความซับซ้อนของพาธหรือการปรับ SVG แบบอื่นเป็นอีกขั้นตอนหนึ่งที่ต้องตรวจงานภาพแยกต่างหาก

แหล่งอ้างอิง

1. W3C — การจดทะเบียนชนิดสื่อ SVG — กำหนด SVGZ ว่าเป็น SVG ที่บีบอัดด้วย gzip และอธิบายความสัมพันธ์กับ SVG.GZ
2. MDN — เริ่มต้นใช้ SVG — แยกรูปแบบไฟล์และอธิบายเฮดเดอร์การตอบกลับ SVGZ
3. MDN — Content-Encoding — อธิบายการถอดรหัสและความสัมพันธ์ระหว่างการเข้ารหัสกับชนิดสื่อ
4. MDN — การบีบอัดใน HTTP — อธิบายการตกลงรูปแบบการบีบอัดการตอบกลับและการแยกเวอร์ชันในแคช

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