SVG คืออะไรกันนะ + ทดลองเขียนโค้ดด้วยการวาดรูป (●'◡'●) ?
สวัสดีค่ะ กลับมาเจอกับบทความของ Gojira กันอีกแล้วนะคะ ไม่นานมานี้เราพึ่งได้รับโปรเจคนึงมา ในนั้นจะมี featureที่เราต้องการสร้างร่างกายของมนุษย์ขึ้นมาเพื่อให้ผู้ใช้งานสามารถคลิกบริเวณต่างๆ แล้วแสดงออกมาว่า เจ็บหรือปวดบริเวณหรือส่วนนี้ของร่างกายนะ
ตอนเราเห็น requirement ครั้งแรกเราถึงกับกุมขมับเลย แบบไปไม่เป็นจริงๆนะ แต่ด้วยความที่เราเป็น godzilla ที่ใช้ google เป็น ปัญหานี้เลยหมดไป เย่
เราเลยอยากมาแชร์การเขียน code ที่ใช้การวาดรูป? หรือสร้าง Vector Graphic เพื่อกำหนดทิศทาง/หรือ implement XML ขึ้นมานั่นเอง เพื่อที่จะลดเวลาในการ set position ต่างๆ
โดยเรามีความรู้พื้นฐานว่า SVG ถูกสร้างขึ้นมาจากภาษา XML แต่หากเราจะวาดรูปอะไรขึ้นมาโดยการเขียนโค้ด XML เอง ก็คงจะเสียเวลาไม่น้อยเลย (สิ่งแรกที่เราคิดจะทำเลย ╯︿╰) เพราะถ้าให้ทำแบบนั้นจริงๆ เราน่าจะตายคาจอแน่ๆ
เราแก้ปัญหาโดยการวาดด้วย Vector Graphic Editor อย่าง Adobe Illustrator หรือ Adobe XD แทน เพราะจะมีเครื่องมือต่างๆ ที่จะช่วยให้เราวาดรูปได้สะดวกมากขึ้น หลังจากที่วาดเสร็จแล้วเราก็สามารถ save ให้เป็นไฟล์ SVG ได้ทันที concept ง่ายๆใช่มั้ยล่าา
งั้นมารู้จัก SVG ก่อนลงมือดีกว่านะ เพราะเราลงมือก่อนหาข้อมูล เลยต้องทำหลายรอบเลย
SVG คืออะไร ?
SVG(Scalable Vector Graphics) เป็นรูปแบบหนึ่งของกราฟิกที่ใช้แสดงผลบนหน้าเว็บ โดยกราฟิกแบบ SVG นี้มีลักษณะเด่นตรงที่เป็นกราฟิกแบบ Vector ไม่ว่าจะเป็นเส้นตรง เส้นโค้ง หรือรูปทรงต่างๆ ล้วนถูกสร้างขึ้นมาจากการคำนวณทางคณิตศาสตร์ ซึ่งจะต่างจากกราฟิกแบบ Raster(Bitmap) อย่าง JPG หรือ PNG ที่จะสร้างภาพขึ้นมาโดยอิงกับ pixels เรามักจะเห็นว่ากราฟิกแบบ Raster นี้ พอขยายใหญ่มากๆ แล้วภาพจะแตก แต่สิ่งนี้จะไม่เกิดขึ้นกับกราฟิกแบบ Vector อย่าง SVG
ฟังดู cool ใช่มั้ยล่า รูปก็จะไม่แตกด้วยขยายยังไงก็ได้ พอรู้อย่างนี้แล้วก็ไม่รอช้า ลงมือวาดรูปกันเลย
Vector Graphic Editor ที่เราใช้จะเป็น adobe xd นะคะ
เราลงมือวาดเส้นกันและนำ svg ที่ save ได้ไปใส่หน้าเว็บกัน
รูปแบบการนำ SVG ไปใส่ในหน้าเว็บ
สมมติว่ากราฟิก SVG ที่เราสร้างไว้มีขนาด 361x468 เราสามารถนำมันมาใส่ในหน้าเว็บได้หลายวิธีด้วยกัน ดังนี้
Inline
วิธีนี้คือให้เราดู source ของไฟล์ SVG แล้วคัดลอกเฉพาะโค้ดในส่วนของ svg element มาใส่ไว้ภายใน body element ตามตำแหน่งที่ต้องการ
- ข้อดีไม่เกิด HTTP Request + สามารถเข้าถึงแต่ละ element ใน SVG ได้ด้วย CSS และ JavaScript
- ข้อเสีย cache ไม่ได้ เพราะโค้ดฝังอยู่ในหน้าเว็บเลย
ซึ่งเราใช้วิธีนี้ในการทำ โดยเราจะเริ่มจากการวาดรูปก่อนเลย
เราจะยกตัวอย่าง code ที่ได้จากการวาด vector บริเวณไหล่นะคะ เราทำการวาด vector ที่ไหล่ โดยแบ่งเป็น 4 path แล้วทำการ group ด้วย directory
code ที่ได้มาก็จะเป็นแบบนี้
คือมี svg element เป็นแบบนี้
<body>
<svg>
<g>
<path>
<path>
<path>
</g> </svg>
</body>
ซึ่งการ group ด้วย director yทำให้เกิดปัญหาเล็กน้อยตอนเราจะใส่ css และ js เพราะมันใส่ยากมาก
ยกตัวอย่างแบบง่ายๆเลย
จะเห็นว่าใน <g> ของ head
มี <path> ของ face
มี <g>ของ ear
มี <path>ของ hair
ซึ่งเป็น tag ลูกผสมเลย ทำให้การเขียน css หรือ js เพื่อทำการ set data-position เป็นไปได้ยากมาก
เราเลยไปหาวิธี group แบบใหม่มาที่จะรวม path ด้วยกัน จนเจอวิธี group แบบ union ซึ่งเป็นการกรุ๊ปแบบคณิตศาสตร์ มันจะได้ผลลัพธ์แบบ directory เลย ตอนแสดงผล แต่ในด้าน code ที่ออกมา code ที่ได้จะทำการ union ไว้ใหเแล้ว
จะเห็นได้ว่า แค่เราเปลี่ยนวิธี group ใหม่ xml ของ svg ที่ได้มาจะเป็นระเบียบขึ้น เอาไปเขียน css และ js และ css ต่อได้ง่ายขึ้นมากเลย
จากตอนแรกที่เราต้องจับหลาย tag ตอนนี้เหลือแค่ tag <path>เพียงอย่างเดียวแล้ว
และนี้ก็เป็นวิธีการ implemet ที่เราไม่ต้องเขียน code หรือ set view box เองเลย ง่ายๆใช่มั้ยล่าา ต่างจากตอนแรกมากเลยที่ต้องมานั่ง set view box และ position ต่างๆของรูปภาพ
หลักจากที่ได้ svg แบบที่เราต้องดารเรียบร้อย ก็เข้าสู่โหมดการเขียน css และ js กันเลย เพื่อที่จะให้เราจิ้มไปที่ส่วนไหน ส่วนนั้นจะแสดงผลออกมา
ซึ่งการใส่ css และ js นี้ เราจะมาเขียนในบทความถัดไปนะคะ
