SVG Image Format

ปัจจุบัน Format ของรูปภาพต่างๆที่อยู่บนเว็บไซต์มีหลายรูปแบบ ซึ่งขึ้นอยู่กับลักษณะของรูปภาพนั้นๆ และการนำไปใช้งาน เช่น .jpg , .png, .gif เป็นต้น

บทความนี้เราจะมาเน้นเรื่องของ SVG ซึ่งหลายคนก็อาจจะเคยได้ลองใช้แล้ว มาดูกันที่ข้อดีของไฟล์ประเภท SVG กันก่อน

ข้อดีของ SVG เมื่อเทียบกับไฟล์ประเภทอื่น

• ไฟล์มีขนาดเล็กกว่ารูปใน Format อื่น
• เป็นไฟล์ชนิด vector **
• มีความคมชัดเสมอ ไม่ว่าจะยืดหรือขยายและไม่ว่าหน้าจอจะเป็น Retina ระดับไหนก็ตาม
• Cross Browser (สำหรับบาง Property, IE รุ่นเก่าๆ จะไม่ support แล้ว)
• เขียน CSS Property เรียกใช้งานได้

Vector คืออะไร

Vector เป็นไฟล์ภาพที่เกิดจากจุดเชื่อมต่อกันเป็นรูปร่างหรือโครงสร้างต่างๆ โดยเบื้องหลังการสร้างจุดเหล่านี้ เกิดจากการคำนวณทางคณิตศาสตร์ (โปรแกรมจะทำการคำนวณเอง และเก็บเป็น Sourcecode ไว้เบื้องหลัง โดยที่เราเองไม่เห็นโค้ดเหล่านั้น) ซึ่งจากต้นกำเนิดของมันนี่เอง เมื่อเราเซฟไฟล์เป็น .ai, .svg, .eps (เซฟได้หลาย format) ออกมาแล้ว ไฟล์ vector นี้จะมีคุณสมบัติในการย่อหรือขยายในอัตราส่วนเท่าไหร่ก็ได้ โดยที่ภาพไม่แตก (ไม่เหมือนไฟล์ภาพ .jpg, .png ทั่วไป ที่เมื่อย่อขยายมากๆแล้ว มันแตกออกเป็น pixel เหลี่ยมๆ อย่างสิ้นเชิง)

วิธีการสร้างไฟล์หรือวาดภาพชนิด vector จะต้องใช้โปรแกรมเฉพาะ ที่นิยมจะเป็นโปรแกรม Adobe Illustrator ซึ่งก็จะมีเครื่องมือในการวาด เพื่ออำนวยความสะดวกตามแต่ละ Version ที่เราใช้ และจะเปิดไฟล์นี้ได้ ก็ต้องใช้โปรแกรมเฉพาะเหล่านี้เช่นกัน

ทำไมต้องใช้ SVG?

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

.

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

วิธีการเรียกใช้งาน SVG

เราสามารถเรียกใช้งานไฟล์ภาพ SVG ได้เหมือนกับไฟล์ภาพประเภทอื่นๆ เช่น ถ้าเป็นการเรียกรูปภาพ ก็เขียน HTML ดังนี้

หรือถ้าต้องการใช้ CSS สั่งเป็นภาพ Background ก็เขียน CSS ดังนี้

.container {background: url(ไฟล์ภาพ.svg) no-repeat 0 0;}

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