ฉันควรใช้ SVG หรือ SVGZ สำหรับกราฟิกเว็บของฉันเมื่อใด

จากความเข้าใจของฉัน

SVGZ เป็นไฟล์บีบอัดของ SVG ฉันชอบใช้ภาพ SVG และมีประสบการณ์มากมายกับพวกเขา

ทุกครั้งที่ฉันใช้พวกเขาฉันไม่เคยมีกราฟิกที่มีมากกว่าสองสามร้อยกิโลไบต์

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

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

โดยเฉพาะองค์ประกอบพื้นหลังเช่นเมืองที่แผ่ขยายไปทั่วทั้งหน้าในขณะที่ฉันเคลื่อนไหวแสงไฟกระพริบบ้าง

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

มีเหตุผลใดบ้างที่ฉันควรใช้ SVGZ แทน SVG

ปรับปรุง

ฉันตัดสินใจเพียงแค่สร้าง SVG และ SVGZ เพื่อดูว่าพวกเขาดำเนินการกับเว็บอย่างไรเนื่องจากฉันพบว่าผลงาน CS3 โบราณของฉันสามารถบันทึก SVGZ ได้!

หลังจากการทดสอบฉันพบปัญหาเกี่ยวกับไฟล์ SVGZ (ทดสอบบน Chrome, Firefox และ IE) หากคุณไปที่ URL โดยตรงของภาพคุณจะได้รับข้อผิดพลาด ฉันสมมติว่าคุณไม่สามารถเข้าถึงรหัส SVG ในไฟล์ประเภทเหล่านี้ได้

สิ่งเหล่านี้ไร้ประโยชน์สำหรับเว็บหรือไม่

.svg

.svgz

JSFIDDLE

— Josh Powell
แหล่งที่มา

ดูเหมือนว่ามันอาจจะเป็นส่วนหนึ่งปัญหาการกำหนดค่าเว็บเซิร์ฟเวอร์การตั้งค่า.svgzที่จะได้รับใช้ชนิดไมม์ขวาดูstackoverflow.com/questions/16725380/svgz-doesnt-display ส่วนตัวฉันมักจะใช้Raphael.jsสำหรับกราฟิก SVG / เวกเตอร์บนเว็บเพราะฉันต้องการการสนับสนุน IE8

— user56reinstatemonica8

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

— Josh Powell

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

— user56reinstatemonica8

@JoshPowell: เนื่องจากเซิร์ฟเวอร์ http ส่วนใหญ่ส่งเนื้อหาที่มีการบีบอัด gzip ฉันไม่เห็นวัตถุประสงค์ของคำถามนี้ และสำหรับบางเซิร์ฟเวอร์หากคุณตั้งชื่อไฟล์เป็น. svg.gz เบราว์เซอร์จะได้รับข้อมูลว่าไฟล์ต้นฉบับไม่ได้ถูกบีบอัด

— 2284570

คำตอบ:

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

การตอบสนองของเซิร์ฟเวอร์สำหรับ svgz ต้องได้รับการกำหนดค่าให้รวม "การเข้ารหัสเนื้อหา: gzip"

svg     Content-Type: image/svg+xml

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

สำหรับเว็บเซิร์ฟเวอร์ Apache สามารถทำได้ผ่านไฟล์. htaccess:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

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

— Horatio
แหล่งที่มา

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

— Josh Koenig

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

เว็บเซิร์ฟเวอร์ที่ทันสมัยสามารถทำ Gzipping นี้ได้ก่อนที่จะแสดงเนื้อหา (ดูคำตอบนี้ใน StackOverflow สำหรับข้อมูลเพิ่มเติม) ดังนั้นหากคุณมี SVG ขนาด 300KB ที่เป็น 50KB เมื่อถูกบีบอัดมันจะอยู่ในลักษณะเดียวกันเมื่อ Gzipped โดยเว็บเซิร์ฟเวอร์โดยอัตโนมัติ ดังนั้นมันจะไม่ลดลง 300KB แต่จะเป็น 50KB จากนั้นเบราว์เซอร์จะไม่ถูกบีบอัด

— Taylor Jasko
แหล่งที่มา

คุณแน่ใจหรือว่าไฟล์บีบอัดถูกแคชที่ใดที่หนึ่ง? มันเป็นงานจำนวนมากที่ต้อง gzip สินทรัพย์ svg เหล่านี้ซ้ำแล้วซ้ำอีกสำหรับผู้เยี่ยมชม 5,000 คน

— bokan

@bokan: เซิร์ฟเวอร์บางตัวเสนอตัวเลือกในการบีบอัดเนื้อหาล่วงหน้าด้วยการผนวกนามสกุลไฟล์. gz ดังนั้นหากลูกค้าค้นหา index.html เซิร์ฟเวอร์จะตอบด้วยไฟล์บีบอัดที่ชื่อว่า index.html.gz

— user2284570

@ user2284570: ดังนั้นคุณต้องสร้าง. gz ด้วยมือ มิฉะนั้นจะบีบอัดไฟล์ทุกครั้งที่ส่งไฟล์และนั่นก็เป็นงานจำนวนมากสำหรับเซิร์ฟเวอร์

— bokan

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

— 2284570