ดูกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG)

กราฟิกแบบเวกเตอร์มีการใช้อย่างกว้างขวางในสื่อสิ่งพิมพ์ ในเว็บไซต์เรายังสามารถเพิ่มกราฟิกแบบเวกเตอร์กับ SVG หรือ กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้. อ้างจากข้อมูลจำเพาะอย่างเป็นทางการที่ W3.org, SVG อธิบายว่า:

ภาษาสำหรับอธิบายกราฟิกสองมิติใน XML SVG อนุญาตให้วัตถุßgraphicสามประเภท: รูปร่างกราฟิกแบบเวกเตอร์ (เช่นเส้นทางที่ประกอบด้วยเส้นตรงและเส้นโค้ง) รูปภาพและข้อความ.

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

ข้อดี SVG

ในแง่ของการให้บริการกราฟิกบนเว็บไซต์ SVG มีข้อได้เปรียบเหนือบิตแมปบางประการ ได้แก่ :

ความละเอียดอิสระ

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

การลดคำขอ HTTP

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

การออกแบบและการเขียนสคริปต์

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

สามารถเป็นภาพเคลื่อนไหวและแก้ไขได้

วัตถุ SVG สามารถเคลื่อนไหวได้เมื่อใช้องค์ประกอบภาพเคลื่อนไหวหรือผ่านไลบรารี JavaScript เช่น jQuery วัตถุ SVG ยังสามารถแก้ไขได้ด้วยโปรแกรมแก้ไขข้อความหรือซอฟต์แวร์กราฟิกเช่น Inkscape (ซึ่งฟรี) หรือ Adobe Illustrator.

ขนาดไฟล์เล็กลง

SVG มีขนาดไฟล์ที่เล็กกว่าเมื่อเทียบกับบิตแมปซึ่งมีการนำเสนอกราฟิกที่คล้ายกัน.

การวาดรูปร่างพื้นฐานด้วย SVG

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

เส้น

วาด เส้น ใน SVG เราสามารถใช้ ธาตุ. องค์ประกอบนี้ใช้ในการวาดเส้นตรงหนึ่งเส้นดังนั้นมันจะมีเพียงสองจุดเท่านั้น, เริ่มต้น และ ปลาย.

ดังที่คุณเห็นด้านบนพิกัดจุดเริ่มต้นของเส้นจะแสดงด้วยสองแอตทริบิวต์แรก x1 และ x2, ในขณะที่พิกัดจุดสิ้นสุดของบรรทัดแสดงด้วย y1 และ y2.

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

ในที่สุดมันก็ทำเช่นเดียวกัน.

• ดูการสาธิต “เส้น”

เส้น

มันเกือบจะคล้ายกับ , แต่ด้วย องค์ประกอบที่เราสามารถวาดหลายบรรทัดแทนที่จะเป็นหนึ่งเดียว นี่คือตัวอย่าง:

องค์ประกอบมี จุด คุณลักษณะที่เก็บพิกัดทั้งหมดที่เกิดขึ้นกับเส้น.

• ดูการสาธิต “เส้น”

สี่เหลี่ยมผืนผ้า

การวาดรูปสี่เหลี่ยมผืนผ้าก็ง่ายเช่นกัน ธาตุ. เราจะต้องระบุความกว้างและความสูงเช่น:

• ดูการสาธิต “สี่เหลี่ยมผืนผ้า”

วงกลม

เรายังสามารถวาดวงกลมด้วย ธาตุ. ในตัวอย่างต่อไปนี้เราจะสร้างวงกลมด้วย 100 รัศมีที่กำหนดด้วย R แอตทริบิวต์:

สองแอตทริบิวต์แรก, cx และ cy กำลังกำหนดพิกัดศูนย์กลางของวงกลม ในตัวอย่างข้างต้นเราได้ตั้งค่า 102 ทั้งสำหรับ x และ Y ประสานงานหากไม่ได้ระบุคุณลักษณะเหล่านี้, 0 จะถูกนำมาเป็นค่าเริ่มต้น.

• ดูการสาธิต “วงกลม”

วงรี

เราสามารถวาดวงรีด้วย . มันค่อนข้างคล้ายกับวงกลม แต่คราวนี้เราสามารถควบคุมมันได้โดยเฉพาะ x รัศมีเส้นและ Y เส้นรัศมีด้วย RX และ Ry แอตทริบิวต์;

• ดูการสาธิต “วงรี”

รูปหลายเหลี่ยม

กับ องค์ประกอบเราสามารถวาดรูปร่างหลาย ๆ ด้านเช่นสามเหลี่ยมหกเหลี่ยมและแม้แต่สี่เหลี่ยมผืนผ้า นี่คือตัวอย่าง:

• ดูการสาธิต “รูปหลายเหลี่ยม”

การใช้ Vector Graphic Editor

อย่างที่คุณเห็นการวาดวัตถุอย่างง่ายด้วย SVG ใน HTML นั้นค่อนข้างง่าย อย่างไรก็ตามเมื่อวัตถุมีความซับซ้อนมากขึ้นการฝึกฝนนั้นก็ไม่เหมาะอีกต่อไปและจะทำให้คุณปวดหัว.

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

หากคุณกำลังทำงานกับ Inkscape, คุณสามารถบันทึกกราฟิกแบบเวกเตอร์ของคุณเป็น SVG ธรรมดาแล้วเปิดในโปรแกรมแก้ไขข้อความ ตอนนี้คุณควรหารหัส SVG ในไฟล์ คัดลอกรหัสทั้งหมดและวางไว้ในเอกสาร HTML ของคุณ.

หรือคุณสามารถฝัง .SVG ไฟล์ผ่านหนึ่งในองค์ประกอบเหล่านี้ ฝัง, iframe และ วัตถุ, เช่น;

ผลลัพธ์จะเหมือนกันในที่สุด.

ในตัวอย่างนี้ฉันใช้ Apple iPod เครื่องนี้จาก OpenClipArt.org.

• ดูการสาธิต “iPod”

รองรับเบราว์เซอร์

เกี่ยวกับการสนับสนุนเบราว์เซอร์ SVG ได้รับการสนับสนุนเป็นอย่างดีในเบราว์เซอร์หลักทั้งหมดยกเว้นใน IE8 และก่อนหน้านี้ แต่เรื่องนี้สามารถแก้ไขได้ด้วยไลบรารี JavaScript นี้ชื่อ Raphael.js เพื่อให้ง่ายขึ้นเราจะใช้เครื่องมือนี้ ReadySetRaphael.com เพื่อแปลงรหัส SVG ของเราเป็นรูปแบบที่รองรับ Raphael นี่คือวิธี.

ก่อนอื่นดาวน์โหลดและรวมถึง Raphaël.js ห้องสมุดไปยังเอกสาร HTML ของคุณ จากนั้นอัปโหลด .SVG ไฟล์ไปยังเว็บไซต์คัดลอกและวางรหัสที่สร้างขึ้นภายในโหลดต่อไปนี้ ฟังก์ชัน;

 window.onload = function () // the รหัส Raphael ไปที่นี่ 

ข้างใน ร่างกาย แท็กใส่ต่อไปนี้ div กับ RSR แอตทริบิวต์ id;

เพียงเท่านี้คุณก็ทำเสร็จแล้ว ลองดูตัวอย่างจากลิงค์ด้านล่าง.

• ดูการสาธิต “ราฟาเอล”

ความคิดสุดท้าย

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

และเช่นเคยหากคุณเป็นคนที่ชอบผจญภัยที่นี่เราได้เพิ่มการอ้างอิงและการสนทนาเพิ่มเติมเพื่อเจาะลึกลงไปในเรื่องนี้.

• แนะนำโรงเรียน SVG - W3
• ความละเอียดอิสระกับ SVG - นิตยสารยอดเยี่ยม
• ทำไมคุณไม่ใช้ SVG - NetTuts

ขอบคุณสำหรับการอ่านและเราหวังว่าคุณจะสนุกกับโพสต์นี้.

• ดูการสาธิต
• แหล่งดาวน์โหลด