ไฟล์ SVG คืออะไร

SVG graphic
SVG graphic

ขยายภาพอย่างไรไม่ให้แตก

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

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

ตัวอย่างภาพประเภท  VECTOR

sample vector files

คุณสมบัติพิเศษ ของไฟล์ภาพ SVG

  • ขนาดไฟล์คมชัด
  • ไฟล์มีขนาดเล็ก
  • รองรับการนำไปใช้บนเว็บได้ดี
  • รองรับการตกแต่งด้วยคำสั่ง CSS (เพราะไฟล์ SVG นั้น สร้างจาก XML)
  • รองรับการตกแต่งด้วย  JavaScript

XML ย่อมาจาก eXtensible Markup Language เป็นภาษาๆ หนึ่งที่ใช้งานเช่นเดียวกันกับ HTML ที่ใช้บนเว็บเพจ ที่เชื่อว่าหลายๆ คนคงคุ้นเคยและรู้จักกันดีอยู่แล้ว

ข้อเสียของไฟล์ภาพ SVG

  • อาจทำให้ server load เวลาแสดงผล สาเหตุเพราะการคำนวณเพื่อแสดงภาพออกมา
  • กรณีใช้ SVG หลายไฟล์ในหน้าเดียวกัน การแสดงผลของภาพที่ได้ อาจมีการกระตุกได้ เนื่องจาก ภาพ SVG จะต้องมีการคำนวณภาพใหม่ทุกครั้ง

โปรแกรมสำหรับสร้างไฟล์ภาพ SVG

vector tools

  • Adobe illustrator
  • InkScape

ทิปเพิ่มเติมเกี่ยวกับรุปภาพ

  • กราฟฟิก แบบ Vector หมายถึง ไฟล์รูปภาพที่มีการคำนวณขนาดภาพใหม่ทุกครั้งที่มีการปรับย่อ หรือขยาย อย่างเช่นไฟล์ SVG เป็นต้น
  • กราฟฟิก แบบ Raster หมายถึง ไฟล์รุปภาพที่สร้างจาก pixels (หมายถึงจุด) นำมาต่อเรียงกันเป็นภพา ถ้ามีการขยาย ภาพจะไม่คมชัด ตัวอย่างเช่นไฟล์ภาพ JPG, PGN, BMP เป็นต้น
Avatar
About Mr. ONE - Admin 1537 Articles
ทำงานด้านไอทีโดยเฉพาะ ชอบเทคโนโลยีเป็นชีวิตจิตใจ ชอบขีดๆ เขียนๆ โดยเฉพาะเขียนข้อมูลเกี่ยวกับการใช้คอมพิวเตอร์ โปรแกรม มีประสบการณ์การเขียนหนังสือคอมพิวเตอร์ เขียนแบบเรียนระบบสารสนเทศทางด้านโรงแรม