SVG คืออะไร? + สอนวิธีใช้
หลายๆ คน คงจะพอรู้จักกับกราฟิกแบบ SVG กันมาบ้างแล้ว แต่อาจจะยังไม่มีโอกาสได้ลองใช้สักที ในบทความนี้เราจะมาดูว่า SVG มีวิธีใช้งานอย่างไร และมีข้อดีข้อเสียอย่างไรเมื่อนำมาเปรียบเทียบกับการใช้กราฟิกแบบอื่นๆ
SVG คืออะไร ?
SVG(Scalable Vector Graphics) เป็นรูปแบบหนึ่งของกราฟิกที่ใช้แสดงผลบนหน้าเว็บ โดยกราฟิกแบบ SVG นี้มีลักษณะเด่นตรงที่เป็นกราฟิกแบบ Vector ไม่ว่าจะเป็นเส้นตรง เส้นโค้ง หรือรูปทรงต่างๆ ล้วนถูกสร้างขึ้นมาจากการคำนวณทางคณิตศาสตร์ ซึ่งจะต่างจากกราฟิกแบบ Raster(Bitmap) อย่าง JPG หรือ PNG ที่จะสร้างภาพขึ้นมาโดยอิงกับ pixels เรามักจะเห็นว่ากราฟิกแบบ Raster นี้ พอขยายใหญ่มากๆ แล้วภาพจะแตก แต่สิ่งนี้จะไม่เกิดขึ้นกับกราฟิกแบบ Vector อย่าง SVG
SVG(Scalable Vector Graphics) เป็นรูปแบบหนึ่งของกราฟิกที่ใช้แสดงผลบนหน้าเว็บ โดยกราฟิกแบบ SVG นี้มีลักษณะเด่นตรงที่เป็นกราฟิกแบบ Vector ไม่ว่าจะเป็นเส้นตรง เส้นโค้ง หรือรูปทรงต่างๆ ล้วนถูกสร้างขึ้นมาจากการคำนวณทางคณิตศาสตร์ ซึ่งจะต่างจากกราฟิกแบบ Raster(Bitmap) อย่าง JPG หรือ PNG ที่จะสร้างภาพขึ้นมาโดยอิงกับ pixels เรามักจะเห็นว่ากราฟิกแบบ Raster นี้ พอขยายใหญ่มากๆ แล้วภาพจะแตก แต่สิ่งนี้จะไม่เกิดขึ้นกับกราฟิกแบบ Vector อย่าง SVG
ข้อดีของ SVG
ข้อดีของกราฟิกแบบ SVG มีอยู่หลายประการด้วยกัน ดังต่อไปนี้
- คมชัดทุกขนาดหน้าจอเนื่องจาก SVG สร้างภาพขึ้นมาจากการคำนวณใหม่ทุกครั้ง ไม่ได้ระบุเป็น pixel เหมือนกับ JPG หรือ PNG ทำให้ภาพที่ได้มีความคมชัด ไม่ว่าจะขยายขนาดให้ใหญ่แค่ไหนก็ตาม
- ขนาดไฟล์เล็กกว่าและด้วยเหตุผลดังกล่าว ทำให้ขนาดของไฟล์ SVG นั้นเล็กกว่าไฟล์ JPG และ PNG มาก หากนำไปใช้กับ responsive web เราสามารถใช้ไฟล์ SVG เดิมได้เสมอในทุกขนาดหน้าจอ ไม่เหมือนไฟล์แบบ JPG และ PNG ที่เราจะต้องมาเตรียมไฟล์ความละเอียดสูงเพื่อจะได้แสดงผลได้อย่างคมชัดในหน้าจอใหญ่ๆ
- ตกแต่งสไตล์ด้วย CSS ได้หากเราลองเปิดไฟล์ SVG ด้วย text editor เราก็จะพบว่าแต่ละเส้นที่มันแสดงออกมาจนรวมกันเป็นรูปภาพได้นั้น ล้วนเกิดมาจากภาษา XML นั่นหมายความว่า เราสามารถใช้ CSS ในการตกแต่งสไตล์ให้กับเส้นหรือรูปทรงที่สร้างมาจากกราฟิกแบบ SVG ได้ ไม่ว่าจะเป็นการปรับสีสัน หรือแม้กระทั่งใส่ animation ให้กับเส้นหรือรูปทรงเหล่านั้น
- สร้างการโต้ตอบกับผู้ใช้งานด้วย JavaScript ได้ในทำนองเดียวกัน เราสามารถใช้ JavaScript ในการสร้างการโต้ตอบระหว่างกราฟิก SVG กับผู้ใช้งานได้ เช่น การใส่ click event หรือ onmouseover event ให้กับรูปทรงต่างๆ เป็นต้น
ข้อเสียของ SVG
อย่างไรก็ตาม กราฟิกแบบ SVG ก็ยังมีข้อเสียอยู่บ้าง
- Browsers Supportเราสามารถใช้ SVG ได้แล้วใน Internet Explorer ตั้งแต่เวอร์ชัน 9 ขึ้นไป ส่วน Android จะเป็นตั้งแต่เวอร์ชัน 3.0 ขึ้นไป แต่หากเราต้องการจะรองรับ web browser ที่ยังไม่รองรับ SVG ด้วย เราจะต้องกำหนด fallback ซึ่งก็คือการบอกให้ web browser เหล่านั้นหันไปใช้รูปสำรองแทนในกรณีที่ยังไม่รองรับ SVG
- Performanceเนื่องจากรูปที่เกิดจากกราฟิกแบบ SVG นั้นสร้างมาจากการคำนวณ หากมีการใช้กราฟิกแบบ SVG ในหน้าเดียวกันหลายๆ จุด จะทำให้หน้าเว็บมีอาการกระตุกเวลาเลื่อนหน้าจออย่างเห็นได้ชัด เนื่องจาก web browser จะต้องคำนวณใหม่ทุกครั้งที่หน้าเว็บมีการเปลี่ยนแปลง ในกรณีนี้เราอาจใช้ Canvas แทน เพราะมีลักษณะการใช้งานคล้ายคลึงกับ SVG แต่จะต่างกันตรงที่ Canvas จะกำหนด pixels ให้กับรูปหลังจากที่มันสร้างรูปขึ้นมาได้แล้วเหมือนๆ กับการใช้กราฟิกแบบ Raster(Bitmap) ทำให้ web browser ไม่ต้องมาคำนวณใหม่ทุกครั้งเวลาที่เราเลื่อนหน้าจอ
วิธีการสร้างกราฟิก SVG
จริงอยู่ที่รูปจากกราฟิกแบบ SVG ถูกสร้างขึ้นมาจากภาษา XML แต่หากเราจะวาดรูปอะไรขึ้นมาโดยการเขียนโค้ด XML เอง ก็คงจะเสียเวลาไม่น้อยเลย ให้เราแก้ปัญหาโดยการวาดด้วย Vector Graphic Editor อย่าง Adobe Illustrator หรือ Inkscape แทน เพราะจะมีเครื่องมือต่างๆ ที่จะช่วยให้เราวาดรูปได้สะดวกมากขึ้น หลังจากที่วาดเสร็จแล้วเราก็สามารถ save ให้เป็นไฟล์ SVG ได้ทันที
รูปแบบการนำ SVG ไปใส่ในหน้าเว็บ
สมมติว่ากราฟิก SVG ที่เราสร้างไว้มีขนาด 617×316 เราสามารถนำมันมาใส่ในหน้าเว็บได้หลายวิธีด้วยกัน ดังนี้
1. Inline
วิธีแรกคือให้เราดู source ของไฟล์ SVG แล้วคัดลอกเฉพาะโค้ดในส่วนของ svg element มาใส่ไว้ภายใน body element ตามตำแหน่งที่ต้องการ
- ข้อดีไม่เกิด HTTP Request + สามารถเข้าถึงแต่ละ element ใน SVG ได้ด้วย CSS และ JavaScript
- ข้อเสียcache ไม่ได้ เพราะโค้ดฝังอยู่ในหน้าเว็บเลย
2. Img element
เราสามารถใส่กราฟิกแบบ SVG โดยใช้ img element ได้เเหมือนกับกราฟิกรูปแบบอื่นๆ
- ข้อดีcache ได้ + สะดวกในการใช้
- ข้อเสียหากต้องการใส่สไตล์ให้กับ element ใน SVG ต้องไปใส่ที่ตัวไฟล์ SVG มาตั้งแต่ต้น
3. CSS background-image
เราสามารถใส่กราฟิกแบบ SVG โดยใช้ CSS background-image ได้เเหมือนกับกราฟิกรูปแบบอื่นๆ
แต่ถ้าเราต้องการจะแสดงรูปในขนาดที่ไม่ใช่ขนาดดั้งเดิม อย่าลืมว่าเราต้องกำหนด background-size ให้ตรงกับขนาดของกล่องนั้นๆ ด้วย
- ข้อดีcache ได้ + ควบคุมด้วย CSS
- ข้อเสียหากต้องการใส่สไตล์ให้กับ element ใน SVG ต้องไปใส่ที่ตัวไฟล์ SVG มาตั้งแต่ต้น
4. Object
เราสามารถใส่กราฟิกแบบ SVG โดยใช้ object element ได้
- ข้อดีcache ได้ + มีกลไก fallback ในตัว
- ข้อเสียหากต้องการใส่สไตล์ให้กับ element ใน SVG ต้องไปใส่ที่ตัวไฟล์ SVG มาตั้งแต่ต้น + แม้จะมีกลไก fallback ในตัว แต่ web browser ก็จะโหลดรูปมาทั้ง 2 เวอร์ชัน อยู่ดี จึงไม่ค่อยมีประโยชน์เท่าไรนัก
วิธีการกำหนด Fallbacks
หากเราคิดจะใช้ SVG ตั้งแต่วันนี้ เราจำเป็นจะต้องกำหนด fallback ให้กับ web browser ที่ยังไม่รองรับ SVG ด้วย ต้องขอขอบคุณ Chris Coyier ที่ได้รวบรวมวิธีกำหนด fallback ให้กับ SVG ที่น่าสนใจเอาไว้ ซึ่งมีอยู่หลายวิธีด้วยกัน ดังนี้
1. Inline + SVG image element
วิธีแรกนี้เราจะต้องมาทำความรู้จักกับ SVG image element กันก่อน โดยปกติแล้ว SVG image element จะมีไว้สำหรับ render ภาพแบบ Raster ภายใน SVG Object วิธีใช้คือให้เราระบุ
src ของรูปเอาไว้ที่ attribute ที่ชื่อ xlink:href พร้อมกับกำหนด width และ heightแบบนี้
มีคนพบว่าในการใช้ img element นั้น ถึงแม้ว่าเราจะพิมพ์ผิดเป็น image element แต่ web browser ส่วนใหญ่ ก็ยังสามารถแสดงผลได้อย่างถูกต้อง จากตัวอย่างด้านล่างนี้ การเขียนทั้ง 2 แบบ จะให้ผลเหมือนกัน
ด้วยเหตุนี้เอง จึงมีคนพลิกแพลงนำ
src มาใช้กับ SVG image element ลองดูตัวอย่างนี้
จากตัวอย่างด้านบนเราจะใส่ไฟล์ SVG เอาไว้ที่
xlink:href ส่วนไฟล์ PNG ให้เราใส่ไว้ที่ srcเพียงเท่านี้ web browser ที่รองรับ SVG แล้ว ก็จะรู้จัก SVG image element แล้วนำรูปที่ xlink:href ไปใช้ ส่วน web browser ที่ยังไม่รองรับ SVG ก็จะตีความ SVG image element เป็น img element แล้วนำรูปที่ src ไปใช้- ข้อดีสะดวก + ถูกหลัก semantic + ไม่ต้องใช้ JavaScript
- ข้อเสียInternet Explorer ต้องเสียเวลามาโหลดรูปทั้งแบบ SVG และ PNG (ถึงแม้จะ Aborted แต่ก็ยังเสียเวลาอยู่ดี)
2. Img element + Modernizr
วิธีต่อมาเราจะเปลี่ยนจากการใส่ SVG แบบ inline มาเป็นแบบ img element แทน ให้เรากำหนดที่อยู่ของไฟล์ SVG เอาไว้ที่
src ได้เลย
ทีนี้เราจะต้องทำการเช็คว่า web browser นี้รองรับ SVG แล้วหรือยัง วิธีที่ง่ายที่สุดคงจะเป็นการใช้ Modernizr ให้เราใส่โค้ด JavaScript ตามด้านล่างนี้
จากโค้ดด้านบน เราจะใช้ Modernizr มาเช็คก่อนว่า web browser นั้นรองรับ SVG หรือยัง ถ้ายังเราจะใช้ jQuery ในการเปลี่ยน
src เดิมจากนามสกุล svg มาเป็น png แทน- ข้อดีสะดวกมาก + ถูกหลัก semantic
- ข้อเสียต้องใช้ Modernizr (หากงานของเราไม่ได้ใช้ Modernizr ตั้งแต่แรก) + รูปแสดงช้าลงเพราะใช้ JavaScript ในการเปลี่ยน
src
3. CSS background-image + Modernizr
นอกจากเราจะสามารถใช้ Modernizr ร่วมกับ JavaScript ได้แล้ว เรายังสามารถใช้ร่วมกับ CSS ได้ด้วย อย่างในกรณีนี้ หาก Modernizr ตรวจพบว่า web browser นั้นยังไม่รองรับ SVG มันก็จะไปเพิ่ม class “no-svg” เข้าไปที่ html element ซึ่งถ้าเราใส่ SVG ด้วยวิธี CSS background-image เราก็จะสามารถเตรียมสไตล์เพื่อเป็น fallback ได้อย่างง่ายดาย
- ข้อดีไม่มีปัญหาเรื่อง performance เพราะ web browser จะโหลดเฉพาะรูปที่ใช้มาเท่านั้น (ไม่ SVG ก็ PNG)
- ข้อเสียต้องใช้ Modernizr (หากงานของเราไม่ได้ใช้ Modernizr ตั้งแต่แรก) + อาจไม่ถูกหลัก semantic เท่าไรนัก
ตัวช่วย
เราจะเห็นว่าการกำหนด fallback ของ SVG นั้น ยังไม่มีวิธีไหนที่สมบูรณ์แบบ แต่วิธีที่น่าจะดูดีที่สุดในขณะนี้ก็น่าจะเป็นวิธีที่ใช้ CSS background-image เพราะว่าไม่มีปัญหาเรื่อง performance (หลายๆ คน หันมาใช้ SVG เพราะต้องการลดขนาดไฟล์ของรูปที่ user ต้องดาวน์โหลด หากวิธีที่เลือกใช้นั้นมีปัญหาเรื่อง performance มันก็คงไม่น่าสนใจ)
หากเราตัดสินใจที่จะใช้วิธี CSS background-image เราก็อาจใช้ Grunticon เข้ามาช่วยก็ได้ หลักการคือ มันจะเข้าไปอ่าน folder ที่เก็บไฟล์ SVG ของเรา แล้วเอาไปแปลงให้เป็น PNG รวมไปถึงการสร้างไฟล์ CSS สำหรับเป็น fallback และยังเพิ่ม class สำหรับแต่ละรูปเพื่อให้เรานำไปใช้ได้ง่ายๆ อีกด้วย สมมติเรามีไฟล์ SVG ที่มีชื่อว่า “siamhtml.svg” เมื่อเราใช้ Grunticon เราก็จะสามารถแสดงรูปดังกล่าวได้โดยการเขียนโค้ดสั้นๆ แบบนี้
SVG vs Icon Fonts เลือกใช้อะไรดี ?
ข้อดีของ SVG
การใช้ SVG นั้นมีผลดีกว่าการใช้ Icon font ดังต่อไปนี้
- ทำ Animation ได้เราสามารถทำ animation ให้กับ element ต่างๆ ใน SVG ได้ รวมไปถึงการทำให้ element ต่างๆ สามารถโต้ตอบกับผู้ใช้งานได้อีกด้วย
- มีหลายสีเราสามารถกำหนดสีของแต่ละ element ใน SVG ให้แตกต่างกันได้ (จริงๆ แล้ว Icon font ก็สามารถมีหลายสีได้เหมือนกัน โดยใช้เทคนิคการวางซ้อนทับกันหลายๆ layer)
- มีความหมายweb browser รู้ว่า svg element คือกราฟิก แต่หากเราใช้ Icon font เราจะต้องใช้ CSS Pseudo Element ซึ่งมันไม่ได้ถูกสร้างมาสำหรับใส่กราฟิกที่มีความหมายเนื่องจากตัวมันไม่สามารถสื่อความหมายใดๆ ได้ นอกจากนั้น หลายๆ คน ยังมองว่าการใช้ Icon font เหมือนกับเป็นการ hack อีกด้วย
ข้อดีของ Icon Fonts
ส่วนการใช้ Icon font นั้นก็มีข้อได้เปรียบ SVG อยู่เหมือนกัน
- Browser Supportแม้แต่ web browser เก่าๆ อย่าง Internet Explorer 6 ก็ยังสามารถใช้ Icon font ได้ คือเราไม่ต้องไปกำหนด fallback อะไรเลย ซึ่งต่างจาก SVG ที่จะใช้ได้กับ IE 9+ และ Android 3.0+
- สะดวกหลายๆ คน รวบรวมไอคอนที่ใช้บ่อยๆ เอาไว้ด้วยกัน เรียกว่าใช้ font เดียวก็มีไอคอนครอบคลุมงานแทบทุกประเภท และยังไม่ต้องไปเตรียมรูป 2 เวอร์ชัน เหมือนกับการใช้ SVG อีกด้วย (แต่การใส่ไอคอนไว้ใน font มากเกินความจำเป็น จะทำให้ไฟล์มีขนาดใหญ่ได้)
- ใช้ง่ายการใช้ Icon font นั้นกลายเป็นเรื่องง่ายเพราะในขณะนี้มีบริการอำนวยความสะดวกมากมาย ไม่ว่าจะเป็น IcoMoon หรือ Fontello ที่ทำให้เราสามารถเลือกรูปไอคอนต่างๆ ที่ชอบ แล้วแปลงมาเป็น Icon font ได้ทันที เวลานำไปใช้เราก็เพียงแค่ใส่ class ที่เป็นชื่อไอคอนเท่านั้นเอง
หากใครยังลังเลว่างานต่อไปจะเลือกใช้แบบไหนดี ประการแรกเลยให้เราดูก่อนว่าเราต้องการทำ animation หรือ สร้างการโต้ตอบกับผู้ใช้งานให้กับกราฟิกนั้นๆ หรือไม่ หากต้องการก็ให้เราใช้ SVG ประการต่อมาให้เราถามตัวเองว่าเราใส่ใจเรื่อง semantic มากน้อยแค่ไหน ถ้าเราเคร่งครัดมากก็ให้เราใช้ SVG และประการสุดท้าย เราพร้อมที่จะรับมือกับความยุ่งยากในการใช้ SVG แล้วหรือยัง (ถึงแม้จะใช้ตัวช่วยอย่าง Grunticon แล้วก็ตาม) ถ้าไม่อยากเรียนรู้อะไรมากมาย ก็ให้เราใช้ Icon font ไป แต่หากไม่เป็นไปตาม 3 ข้อข้างต้น เราจะสามารถเลือกวิธีไหนก็ได้ตามที่เราถนัด
ไม่มีความคิดเห็น:
แสดงความคิดเห็น