กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG): บทนำ

SVG หรือ Scalable Vector Graphics เป็นรูปแบบภาพเวกเตอร์ที่ใช้ XML สำหรับกราฟิกสองมิติพร้อมรองรับการโต้ตอบและภาพเคลื่อนไหว ข้อกำหนด SVG เป็นมาตรฐานเปิดที่พัฒนาโดย World Wide Web Consortium (W3C) ตั้งแต่ปี 1999 ภาพ SVG และลักษณะการทำงานถูกกำหนดไว้ในไฟล์ข้อความ XML ซึ่งหมายความว่าสามารถค้นหา สร้างดัชนี เขียนสคริปต์ และบีบอัดข้อมูลได้ ในฐานะไฟล์ XML ภาพ SVG สามารถสร้างและแก้ไขได้ด้วยโปรแกรมแก้ไขข้อความใดๆ แต่มักจะสร้างด้วยซอฟต์แวร์วาดภาพ

เมื่อพูดถึงการแสดงภาพเวกเตอร์บนเว็บ ไม่มีมาตรฐานอื่นใดนอกจากกราฟิกเวกเตอร์แบบปรับขนาดได้ (SVG) ข้อเสียประการหนึ่งคือรูปแบบที่ใช้ XML ซึ่งมีขนาดไฟล์ค่อนข้างใหญ่ คุณสมบัติข้อความธรรมดาของ XML ทำให้เหมาะสำหรับการบีบอัด ไฟล์ Gzip ได้รับการป้องกันโดย นามสกุล SVGz เริ่มต้น ส่วนหัวการเข้ารหัสเนื้อหาถูกนำมาใช้ใน HTTP/0.0 เพื่อระบุการเข้ารหัสของไฟล์ เมื่อผู้คนเริ่มย้ายไฟล์ JavaScript, CSS และ HTML ไปยังรูปแบบที่บีบอัด ไฟล์ที่บีบอัดจึงได้รับความนิยมมากขึ้นเรื่อยๆ เมื่อเบราว์เซอร์คลายเนื้อหานี้ มีส่วนอย่างมากในการแพร่กระจายของกากตะกอนนี้อย่างกว้างขวาง เป็นผลให้กระบวนการเสิร์ฟถูกขัดขวาง คุณสามารถดาวน์โหลดไฟล์ svgz ได้โดยเลือกการจัดการเนื้อหา (จากเมนู)

เนื่องจากขนาดถูกกำหนดโดยการคำนวณทางคณิตศาสตร์ ภาพ SVG จึงเบากว่าภาพแรสเตอร์มาก ไฟล์ภาพ JPEG มีข้อมูลจำนวนมาก (ตรงข้ามกับไฟล์ภาพแรสเตอร์ ซึ่งมีขนาดไฟล์เท่ากัน)

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

ไฟล์ Svg สูญเสียคุณภาพหรือไม่

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

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

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

Svg สามารถบีบอัดได้มากแค่ไหน?

SVG สามารถบีบอัดให้มีขนาดไฟล์เล็กมาก จึงเหมาะสำหรับการใช้งานบนเว็บ เมื่อใช้งานบนเว็บ ไฟล์ SVG สามารถบีบอัดโดยใช้ gzip ซึ่งสามารถลดขนาดไฟล์ได้ถึง 70%

XML (Extensible Markup Language) เป็นรูปแบบไฟล์ที่อนุญาตให้สร้างกราฟิกสองมิติแบบไดนามิกผ่านภาพเวกเตอร์ ไฟล์ SVG เป็นไฟล์ขนาดใหญ่เนื่องจากถูกบีบอัด นักออกแบบเว็บไซต์มักใช้เพื่อสร้างภาพเคลื่อนไหว GIF และโลโก้ หากไฟล์มีขนาดใหญ่เกินไปจะทำให้การโหลดหน้าเว็บล่าช้าและทำให้ผู้ชมเสียกำลังใจ ผู้ใช้สามารถบีบอัด ขนาดไฟล์ SVG ได้ฟรีด้วย WorkinTool File Compressor คุณยังสามารถใช้ซอฟต์แวร์นี้เพื่อบีบอัดรูปแบบรูปภาพและวิดีโออื่นๆ นอกเหนือจากการบีบอัด SVG คุณยังสามารถใช้การบีบอัด PPT, การบีบอัด PDF และการบีบอัด Word นอกเหนือจากการบีบอัด PPT

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

ตัวเลือกการบีบอัดไฟล์ Svg

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

อะไรคือความแตกต่างระหว่าง Svg และ Svg ที่บีบอัด?

ไฟล์ประเภท svg (ข้อความธรรมดา) และ svgz (บีบอัด) ทั้งคู่ให้บริการด้วย MIME ประเภทเดียวกัน มีความแตกต่างอย่างมีนัยสำคัญระหว่างส่วนหัวการเข้ารหัสเนื้อหาและส่วนหัวประเภทเนื้อหา ซึ่งแสดงถึงประเภทของเนื้อหาที่ให้บริการ

ไฟล์มีสองประเภท: ไฟล์แรสเตอร์และไฟล์เวกเตอร์ PNG สามารถจัดการความละเอียดที่ใหญ่มากได้ แต่ไม่สามารถขยายได้อย่างไม่มีกำหนด พวกมันถูกสร้างขึ้นบนเครือข่ายทางคณิตศาสตร์ของเส้น จุด รูปร่าง และอัลกอริทึม ซึ่งแต่ละอันใช้อัลกอริทึมของมันเอง ไม่สำคัญว่าจะเล็กหรือใหญ่แค่ไหน ตราบใดที่ไม่สูญเสียความตั้งใจ ไม่จำเป็นต้องมีรหัสในการสร้าง SVG; มีไฟล์ข้อความแทน เป็นผลให้โปรแกรมอ่านหน้าจอและเครื่องมือค้นหาสามารถอ่านเพื่อดูว่าสามารถเข้าถึงได้และเป็นมิตรกับ SEO หรือไม่ PNG เป็นรูปแบบออนไลน์มาตรฐานที่รองรับโดยเว็บเบราว์เซอร์และระบบปฏิบัติการที่หลากหลาย อย่างไรก็ตาม ภาพเคลื่อนไหวไม่ได้รับการสนับสนุนอย่างง่ายดายโดย SVG เช่นเดียวกับ GIF และไฟล์ประเภทอื่นๆ

วิธีบีบอัดไฟล์ Svg ของคุณ

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

บีบอัดรหัส Svg

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

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

คำแนะนำที่สวยงามของ Amelia Wattenberger ในการปรับขนาด SVG สามารถช่วยให้คุณเรียนรู้เพิ่มเติมเกี่ยวกับ viewBox Xlink:href สามารถใช้ในมาร์กอัปของคุณเพื่อระบุเส้นทางที่คุณต้องการวาดโดยตรง เส้นทางอาจดูน่ากลัว แต่เส้นตรงมีน้อยกว่า ตัวอย่างนี้ใช้ CSS เพื่อเพิ่มค่าสีให้กับคลาสที่เกี่ยวข้องกับนักบินอวกาศจำลอง เป็นผลให้ฉันสามารถเปลี่ยนอินสแตนซ์ขององค์ประกอบนั้นได้อย่างง่ายดายในอินสแตนซ์เดียว

คุณสามารถย่อ Svg ได้ไหม

การลดขนาด SVG นั้นเล็กกว่าคู่แข่งถึง 22%* Nano ปรับ SVG ของคุณให้มีขนาดเล็กมากโดยการบีบอัด (ถ้ามี) และฝังในขั้นตอนเดียว ลดขั้นตอนการทำงานและเวลาในการโหลด ขณะเดียวกันก็ลดแบนด์วิธและเวลาในการโหลดด้วย

ตัวอย่างไฟล์ Svg

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

XML ใช้เพื่อสร้างไฟล์ Scalable Vector Graphics (SVG) เครื่องมือ JavaScript สามารถใช้เพื่อสร้างและแก้ไขไฟล์ SVG ได้โดยตรงหรือโดยทางโปรแกรม คุณสามารถใช้ Inkscape หากคุณไม่มีสิทธิ์เข้าถึง Illustrator หรือ Sketch ส่วนนี้จะอธิบายขั้นตอนการสร้างไฟล์ SVG ใน Adobe Illustrator ปุ่มรหัส SVG ทำให้ข้อความของไฟล์ SVG พร้อมใช้งาน เมื่อคุณกดปุ่ม "เปิด" ปุ่มจะเปิดใช้งานโดยอัตโนมัติในโปรแกรมแก้ไขข้อความที่คุณเลือก โปรแกรมนี้ช่วยให้คุณเห็นว่าไฟล์ที่เสร็จแล้วจะมีลักษณะอย่างไร คัดลอกและวางข้อความจากไฟล์ และอื่นๆ

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

เหตุใดไฟล์ Svg จึงเป็นรูปแบบที่ดีที่สุดสำหรับกราฟิกและภาพประกอบบนเว็บไซต์

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

โปรแกรมแปลงไฟล์ Svg

ตัวแปลงไฟล์ SVG เป็นโปรแกรมซอฟต์แวร์ที่แปลงไฟล์ SVG เป็นรูปแบบไฟล์อื่น โดยทั่วไปไฟล์ SVG จะถูกแปลงเป็นรูปแบบ PDF หรือ PNG

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

Svg: รูปแบบไฟล์กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้

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

ลดขนาดไฟล์ Svg Illustrator

มีหลายวิธีในการลดขนาดไฟล์ SVG ใน Illustrator วิธีหนึ่งคือไปที่แผง 'การตั้งค่าเอกสาร' และเปลี่ยนการตั้งค่า 'การบีบอัด' เป็น 'ไม่มี' สิ่งนี้จะทำให้ขนาดไฟล์ใหญ่ขึ้น แต่จะทำให้ไฟล์เข้ากันได้กับซอฟต์แวร์อื่นมากขึ้นด้วย อีกวิธีหนึ่งในการลดขนาดไฟล์คือไปที่ 'Edit > Preferences > Type' และเปลี่ยนการตั้งค่า ' Use Compression ' เป็น ' No ' สิ่งนี้จะทำให้ขนาดไฟล์เล็กลง แต่อาจไม่เข้ากันได้กับซอฟต์แวร์อื่น

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

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

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