SVG สำหรับนักพัฒนา: การทำความเข้าใจพื้นฐาน ประโยชน์และข้อเสีย

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

คุณอาจคุ้นเคยกับการใช้ไฟล์ภาพแรสเตอร์ประเภทต่างๆ เป็นอย่างดี: JPG, PNG และ GIF มาระลึกกันหน่อย ด้วยการรองรับ 256 สี (8 บิต) GIF (รูปแบบการแลกเปลี่ยนกราฟิก) จึงเป็นรูปแบบที่โดดเด่นสำหรับแอนิเมชั่นและความโปร่งใส ไม่รวมความโปร่งใสของอัลฟ่า รูปแบบ PNG (Portable Network Graphic) ดีกว่ามากด้วยการสนับสนุนมากกว่า 16 ล้านสี (24 บิต) และความโปร่งใสทุกประเภท โดยคุณไม่จำเป็นต้องมีแอนิเมชั่น

รูปแบบรูปภาพที่ใช้กันอย่างแพร่หลายบนเว็บ JPG หรือ JPEG (Joint Photographic Experts Group) ส่วนใหญ่เป็นเพราะบีบอัดได้ รองรับสีมากกว่า 16 ล้านสี; 24 บิตหรือ 8 บิตต่อพิกเซลสำหรับระดับสีเทา แต่ไม่รองรับภาพเคลื่อนไหวหรือความโปร่งใส ดังนั้น JPG เป็นรูปแบบกราฟิกหลักที่นักพัฒนาใช้สำหรับภาพนิ่ง ฉันไม่ได้พูดถึงบิตแมป (BMP) เนื่องจากโดยทั่วไปจะไม่ใช่รูปแบบรูปภาพสำหรับเว็บ BMP จัดเก็บข้อมูลที่แม่นยำของแต่ละพิกเซลในภาพ ซึ่งทำให้ไฟล์มีขนาดใหญ่มาก (ขนาด JPG มากกว่า 150 เท่าที่มีความละเอียดเท่ากัน) และไม่เหมาะสำหรับกราฟิกเว็บไซต์

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

SVG คืออะไร?

Scalar Vector Graphics (SVG) เป็นรูปแบบรูปภาพที่ใช้ Extensible Markup Language (XML) ที่อธิบายกราฟิกสองมิติ เช่น เส้นทาง เส้น วงกลม รูปแบบ สีข้อความ ฯลฯ ในคำจำกัดความที่ง่ายกว่า จะหมายถึงรูปแบบรูปภาพ ด้วยการสนับสนุนสองมิติซึ่งพฤติกรรมและการดำรงอยู่ทั้งหมดถูกควบคุมโดยไฟล์ข้อความ XML

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

มาดูกันว่าคุณสามารถสร้างอิมเมจ SVG ได้อย่างไร และสาเหตุบางประการที่คุณควรพิจารณาใช้ SVG ในโครงการของคุณ

วิธีสร้างภาพ SVG

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

เราใช้องค์ประกอบกราฟิก SVG เพื่อสร้างภาพ SVG ในโปรแกรมแก้ไขข้อความ กระบวนการคือเพียงแค่แทรกองค์ประกอบกราฟิกของคุณลงในแท็ก <svg> และ </svg> โดยระบุพิกัด มิติ สี ฯลฯ ตัวอย่างเช่น องค์ประกอบ <rect> สามารถใช้วาดรูปสี่เหลี่ยมผืนผ้าได้ตามที่เห็นใน ตัวอย่างต่อไปนี้

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

โค้ดด้านบนจะวาดสี่เหลี่ยมสีน้ำเงินขนาด 300x x 300px ที่มุมซ้ายบนสุดของเบราว์เซอร์ หากบันทึกเป็นไฟล์ .svg และเปิดด้วยเบราว์เซอร์ ตอนนี้ คุณอาจสงสัยว่าทำไมเราถึงมีสองความสูงและความกว้างในเอกสาร มาทำความเข้าใจโค้ดทั้งหมดเพื่อดูว่าทำไม ดังที่ได้กล่าวไว้ก่อนหน้านี้ รหัส SVG ของคุณต้องเขียนอยู่ในองค์ประกอบราก (<svg> และ </svg>) เพื่อแจ้งให้เบราว์เซอร์ของคุณทราบวิธีตีความบรรทัดเหล่านั้น

เช่นเดียวกับใน HTML SVG ต้องมีการประกาศเนมสเปซในองค์ประกอบรูท ในตัวอย่างข้างต้น เราได้จัดเตรียมพารามิเตอร์ xmlns “http://www.w3.org/2000/svg” และ W3C แนะนำให้ใช้ SVG เวอร์ชัน 1.1 ภายในองค์ประกอบรูท มิติข้อมูลภายในองค์ประกอบรากเรียกว่ามุมมอง SVG ซึ่งเป็นหน้าต่างหรือผืนผ้าใบซึ่งรูปภาพ SVG ที่วาดภายในแท็กรากจะปรากฏขึ้น มุมมองต้องมีอย่างน้อยมิติเดียวกันกับวัตถุ SVG ทั้งหมดของคุณก่อนที่จะปรากฏในเบราว์เซอร์ของคุณ

บรรทัดที่สองเข้าใจง่ายกว่า องค์ประกอบ <rect> ซึ่งใช้สำหรับการวาดรูปสี่เหลี่ยมมุมฉาก รวบรวมพารามิเตอร์ของสี่เหลี่ยมผืนผ้าที่เสนอโดยเริ่มจากมิติ ความกว้างของเส้นขีดอธิบายความหนาของเส้น ในขณะที่รุ่นสี RGB ทั้งสองแบบจะแจ้งให้เบราว์เซอร์ทราบสีที่จะเติมลงในสี่เหลี่ยมผืนผ้าและเส้นตามลำดับ มันค่อนข้างง่ายใช่มั้ย?

ตอนนี้ เราสามารถย้ายสี่เหลี่ยมไปรอบๆ ภายในหน้าโดยการประกาศค่าสำหรับ x และ y ดังนี้:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

แน่นอนว่าเราจะไม่ลืมที่จะเพิ่มมิติของจุดชมวิวเพื่อรองรับพื้นที่เพิ่มเติม

วิธีที่ง่ายที่สุดในการสร้างภาพ SVG คือการใช้เครื่องมือวาดภาพ เช่น Adobe Illustrator, Inskape และ Sketch แทนที่จะสร้างใหม่ตั้งแต่ต้น ไลบรารี JavaScript บางตัว เช่น Bonsai.js และ D3.js เป็นแหล่งที่ดีสำหรับรูปภาพ SVG หากคุณกำลังมองหาไอคอน รูปร่างที่ซับซ้อน ฯลฯ

กำลังเพิ่มรูปภาพ SVG

ข้อดีอย่างหนึ่งของการใช้ภาพ SVG คือความง่ายในการรวมเข้ากับการออกแบบของคุณ คุณเพียงแค่อ้างอิงพวกเขาในแอตทริบิวต์ src ของแท็ก img สิ่งนี้ควรอ้างอิงถึงไฟล์ .svg ที่บันทึกไว้ในโฟลเดอร์เว็บไซต์ของคุณดังนี้:

<img src='example.svg'>

อีกวิธีหนึ่ง คุณสามารถแทรกโค้ด SVG ลงในเอกสาร HTML ของคุณได้ โดยมีแท็ก <svg></svg> เริ่มต้นและสิ้นสุดโค้ดตามที่กล่าวไว้ก่อนหน้านี้

คุณยังสามารถอ้างถึงรูปภาพ SVG ใน CSS ของคุณสำหรับภาพพื้นหลังดังนี้:

.main-header {
background-image: url(example.svg);
}

ประโยชน์ของการใช้ SVG สำหรับนักพัฒนา

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

ประโยชน์บางประการ ได้แก่:

ความสามารถในการปรับขนาดและการตอบสนอง

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

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

มีความยืดหยุ่นสูงและรองรับแอนิเมชั่น

ไม่เหมือนกับภาพแรสเตอร์ซึ่งส่งสำเนาสุดท้ายของภาพ ภาพ SVG สามารถแก้ไขได้โดยสมบูรณ์โดยการปรับโค้ดโดยใช้โปรแกรมแก้ไขข้อความหรือเครื่องมือวาดภาพพิเศษ การใช้ชื่อคลาสหรือ ID ขององค์ประกอบ SVG ของคุณ คุณสามารถจัดรูปแบบหรือทำให้รูปภาพ SVG ของคุณเคลื่อนไหวได้โดยใช้ CSS ภาพเคลื่อนไหวของภาพ SVG สามารถทำได้ด้วย Web Animation API, SMIL หรือ WebGL

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

ขนาดไฟล์ที่เล็กและเป็นมิตรกับ SEO

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

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

SVG มี Document Object Model . เป็นของตัวเอง

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

SVG เป็นรูปแบบไฟล์ภาพแห่งอนาคต

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

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

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

เมื่อใดควรใช้รูปแบบภาพ SVG

แน่นอนว่ารูปแบบภาพที่ขึ้นกับความละเอียดยังคงดีที่สุดสำหรับภาพถ่ายและภาพที่มีรายละเอียดดีอื่นๆ ต่อไปนี้คือรายการกรณีทั่วไปที่รูปแบบภาพ SVG ดีที่สุด

1. โลโก้และไอคอน
2. ภาพแบบโต้ตอบ เช่น แผนภูมิ กราฟ แผนที่ อินโฟกราฟิก
3. แอนิเมชั่น
4. อินเทอร์เฟซของแอปพลิเคชัน
5. ไดอะแกรมและภาพประกอบธรรมดา
6. สเปเชียลเอฟเฟกต์ เช่น เหนอะหนะ หรือ morphing รูปร่าง
7. งานศิลปะที่มีความเข้มต่ำและกราฟิกที่เรียบง่าย

ข้อเสียของ SVG สำหรับนักพัฒนา

เบราว์เซอร์ทั้งหมดไม่รองรับ SVG: เบราว์เซอร์รุ่น เก่าจัดการกับ SVG ในลักษณะเดียวกับที่ Windows XP ที่ล้าสมัยจะจัดการกับแฟลชไดรฟ์หรือ Canon EOS 5DSr ของคุณเมื่อคุณพยายามเชื่อมต่อ โดยสรุป SVG ไม่ทำงานบนเบราว์เซอร์รุ่นเก่า IE8 และต่ำกว่า อย่างไรก็ตาม เมื่อพิจารณาว่าเบราว์เซอร์รุ่นเก่าไม่ได้เป็นส่วนหนึ่งของสาเหตุใดๆ ในอนาคต ประกอบกับความจริงที่ว่ามีเพียงไม่กี่คนเท่านั้นที่ยังคงใช้ SVG จึงไม่ใช่เหตุผลหลักที่จะไม่ใช้ SVG

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

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

บทสรุป

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

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

โปรดแจ้งให้เราทราบว่าคุณใช้ SVG อย่างไรและเกี่ยวกับเคล็ดลับเจ๋งๆ อื่นๆ ที่ไม่ได้แชร์ที่นี่