HTML5 SVG สามารถปรับขนาดกราฟิกเวกเตอร์

SVG Can Zoad Vector Graphics (กราฟิกเวกเตอร์ที่ปรับขนาดได้) เป็นรูปแบบกราฟิกที่ใช้ภาษาแท็กที่ปรับขนาดได้ (XML) เพื่ออธิบายกราฟิกเวกเตอร์สองมิติ SVG เป็นรูปแบบกราฟิกเวกเตอร์สองมิติใหม่ที่กำหนดโดย W3C และยังเป็นมาตรฐานกราฟิกเวกเตอร์เครือข่ายในข้อกำหนด SVG ติดตามไวยากรณ์ XML อย่างเคร่งครัดและอธิบายเนื้อหาภาพในภาษาเชิงพรรณนาของรูปแบบข้อความ

SVG หมายถึงกราฟิกเวกเตอร์ที่ปรับขนาดได้

SVG ใช้เพื่อกำหนดกราฟิกแบบเวกเตอร์สำหรับเครือข่าย

SVG ใช้รูปแบบ XML เพื่อกำหนดกราฟิก

ภาพ SVG จะไม่สูญเสียคุณภาพกราฟิกเมื่อซูมหรือเปลี่ยนขนาด

SVG เป็นมาตรฐานของพันธมิตรเครือข่าย Wanwei

มาตรฐาน SVG และ W3C เช่น DOM และ XSL เป็นทั้งหมด

SVG เป็นภาษาที่อธิบายกราฟิก 2D ใน XML

SVG ขึ้นอยู่กับ XML ซึ่งหมายความว่าแต่ละองค์ประกอบใน SVG DOM พร้อมใช้งาน คุณสามารถเพิ่มโปรเซสเซอร์เหตุการณ์ JavaScript ในองค์ประกอบที่แน่นอน

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

คุณสมบัติ:

ความละเอียดที่ไม่ขึ้นอยู่กับ

สนับสนุนตัวประมวลผลเหตุการณ์

แอปพลิเคชันที่เหมาะสมที่สุดพร้อมพื้นที่แสดงผลขนาดใหญ่ (เช่น Google Map)

ความซับซ้อนสูงจะทำให้การเรนเดอร์ช้าลง (การประยุกต์ใช้ DOM ที่มากเกินไปไม่เร็ว))

ไม่เหมาะสำหรับแอปพลิเคชันเกม

Canvas วาดกราฟิก 2D ผ่าน JavaScript

ผืนผ้าใบแสดงผลด้วยพิกเซล

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

คุณสมบัติ:

การพึ่งพาอาศัยกัน

ไม่สนับสนุนตัวประมวลผลเหตุการณ์

ความสามารถในการแสดงข้อความที่อ่อนแอ

สามารถบันทึกภาพผลลัพธ์ในรูปแบบ. png หรือ. jpg

เกมที่เหมาะสมที่สุดเกมที่มีความเข้มข้น

ตัวอย่างง่ายๆ:

 <svg width = 100% ความสูง = 100%> <circle cx = 300 cy = 60 r = 50 stroke =#ff0 จังหวะจังหวะ = 3 fill = red /> </svg>

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

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

ในระบบ HTML เทคโนโลยีเวกเตอร์ที่ใช้กันมากที่สุดคือองค์ประกอบ SVG และ HTML5 ที่เพิ่มเข้ามาใหม่ เทคโนโลยีทั้งสองสนับสนุนการวาดแผนที่เวกเตอร์และตะแกรง

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

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

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

SVG สามารถกล่าวได้ว่าเป็นโปรโตคอลหรือภาษา

SVG ไม่ใช่สิ่งที่อยู่ใน HTML5 แต่ก็เป็นหนึ่งในเทคนิคทางเทคนิคในหน้าและมาวางไว้ในหัวข้อนี้

เมื่อเทียบกับรูปแบบรูปภาพอื่น ๆ SVG มีข้อดีมากมาย (ข้อดีมากมายมาจากข้อดีของแผนที่เวกเตอร์):

•ไฟล์ SVG เป็น XML บริสุทธิ์ซึ่งสามารถอ่านและแก้ไขได้ด้วยเครื่องมือจำนวนมาก (เช่น Notepad)

•เปรียบเทียบกับภาพ JPEG และ GIF SVG นั้นมีขนาดเล็กลงและถูกบีบอัดมากขึ้น

• SVG สามารถปรับขนาดได้และสามารถขยายได้เมื่อคุณภาพของภาพลดลง

•ข้อความในอิมเมจ SVG เป็นตัวเลือกและยังมีให้บริการ (เหมาะสำหรับการทำแผนที่)

• SVG สามารถทำงานด้วยเทคโนโลยี Java

• SVG เป็นมาตรฐานการเปิดกว้าง

คู่แข่งหลักของ SVG คือแฟลช เมื่อเทียบกับแฟลชข้อได้เปรียบที่ใหญ่ที่สุดของ SVG คือมันเข้ากันได้กับมาตรฐานอื่น ๆ (เช่น XSL และ DOM) และสะดวกในการใช้งานในขณะที่ Flash เป็นเทคโนโลยีเอกชนที่ไม่เป็นที่นิยม อื่น ๆ เช่นรูปแบบการจัดเก็บและกราฟิกแบบไดนามิก SVG ยังได้เปรียบอย่างมาก

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

Inner United ถึง HTML

SVG เป็นองค์ประกอบ HTML มาตรฐานเพียงเขียนโดยตรงไปยัง HTML

 <? XML เวอร์ชัน = 1.0 การเข้ารหัส = UTF-8?> <! DOCTYPE HTML> <HTML> <head> <!-<meta content = text /html; -> <title> หน้า SVG แรกของฉัน </title> </head> <body> <svg xmlns = http://www.w3.org/2000/svg เวอร์ชัน = 1.1 width = 200px ความสูง = 200px> <st> x = 0 y = 0 ความกว้าง = ความสูง 100% = 100% fill = none stroke = black/> <circle cx = 100 cx = 100 r = 50 สไตล์: สีดำ; > </body> </html>

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

ไฟล์ SVG อิสระ

SVG อิสระหมายถึงการจัดรูปแบบไฟล์กราฟิกเวกเตอร์โดยการขยายส่วนขยายไฟล์ SVG ไฟล์ SVG นี้ฝังอยู่ในเบราว์เซอร์

1. ไฟล์/หน้า SVG อิสระเทมเพลตที่กำหนดนั้นเป็นเหมือนสิ่งต่อไปนี้:

 <svg width = ความสูง 100% = 100%> <!-มาร์กอัป SVG ที่นี่ .-> </svg>

บันทึกไฟล์ข้อความดังกล่าวลงในไฟล์ที่มี SVG เป็นส่วนขยายเช่น Sun.SVG

2.HTML อ้างอิงไฟล์ SVG ภายนอก

ใช้วัตถุหรือองค์ประกอบ IMG เพื่อฝังกราฟิก SVG ตัวอย่างเช่นตัวอย่างต่อไปนี้:

 <! ใช้รหัสทางเลือกที่นี่หรือแสดงข้อความ:-> <p> เบราว์เซอร์ของคุณไม่รองรับการอัพเกรดเป็นเบราว์เซอร์ที่ทันสมัย = 10 width = 30 ความสูง = 30 stroke = black fill = transparent stroke-width = 5/> <rad = 10 rx = 10 width = 30 ความสูง = 30 troke = black fill = transparent stroke-width = 5/> <circle cx = 25 cy = 75 r = 20 stroke = red fill = transparent stroke-width = 5/> <ellipse cx = 75 rx = 20 ry = 5 s troke = Red Fill = troparent stroke-width = 5/> <line x1 = 10 x2 = 50 y1 = 110 y2 = 150 stroke = การเติมสีส้ม = tropparent stroke-width = 5/> <polyline points = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 stroke = ส้ม = ความกว้างของจังหวะจังหวะ = 5/> <polygon points = 50 160 55 180 60 65 205 205 205 40 180 45 18 0 0 stroke = Green Fill = Transparent Stroke-Width = 5/> <Path D = M20, 230 Q40, 205, 205, 205, 205, 205, 205, 205 50, 230 T90, 230 Fill = None Stroke = Blue Stroke-Width = 5/SVG>

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