HTML5 แบบอินไลน์ SVG
HTML5 SVG สนับสนุน Inline
SVG คืออะไร?
- SVG กราฟิกเวกเตอร์ Scalable หมายถึง (Scalable Vector Graphics)
- SVG สำหรับกราฟิกที่ใช้ในการกำหนดเครือข่ายแบบเวกเตอร์
- SVG ใช้กราฟิกความละเอียดรูปแบบ XML
- รูปภาพ SVG เพื่อขยายหรือการเปลี่ยนแปลงในขนาดของภาพที่มีคุณภาพของมันจะไม่หายไป
- SVG เป็นมาตรฐานโลกไวด์เว็บสมาคม
ประโยชน์ SVG
เมื่อเทียบกับรูปแบบอื่น ๆ ของภาพ (เช่น JPEG และ GIF) โดยใช้ข้อได้เปรียบ SVG:
- ภาพ SVG สามารถสร้างและแก้ไขได้โดยใช้โปรแกรมแก้ไขข้อความ
- ภาพ SVG สามารถค้นหา, การจัดทำดัชนีสคริปต์หรือบีบอัด
- SVG สามารถปรับได้
- ภาพ SVG สามารถพิมพ์ในความละเอียดที่มีคุณภาพสูงใด ๆ
- SVG อาจจะพูดเกินจริงในคุณภาพของภาพไม่ลดลง
สนับสนุนเบราว์เซอร์
Internet Explorer 9 +, Firefox, Opera, Chrome, Safari และการสนับสนุน SVG แบบอินไลน์
SVG ฝังโดยตรงในหน้าเว็บ HTML
ใน HTML5 คุณจะสามารถที่จะ SVG องค์ประกอบโดยตรงลงในหน้า HTML:
ตัวอย่าง
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
ลอง»
ผล:
ขออภัยเบราว์เซอร์ของคุณไม่สนับสนุน SVG แบบอินไลน์เรียนรู้เพิ่มเติมเกี่ยวกับการกวดวิชา SVG, กรุณาเยี่ยมชม SVG กวดวิชา
SVG และ Canvas แตกต่างระหว่างสอง
SVG เป็นกราฟิก 2D โดยใช้ภาษา XML คำอธิบาย
ผ้าใบวาดภาพกราฟิก 2D โดยใช้ JavaScript
SVG อยู่บนพื้นฐานของ XML ซึ่งหมายความว่าองค์ประกอบใน SVG DOM แต่ละใช้ได้ คุณสามารถแนบ JavaScript จัดการเหตุการณ์สำหรับองค์ประกอบ
ใน SVG แต่ละถือว่าได้รับการวาดวัตถุกราฟิก หากมีการเปลี่ยนแปลงสถานที่ให้บริการวัตถุ SVG, เบราว์เซอร์โดยอัตโนมัติสามารถทำซ้ำกราฟิก
ผ้าใบมีการแสดงพิกเซลโดยพิกเซล ในผืนผ้าใบเมื่อวาดกราฟฟิกเสร็จสมบูรณ์ก็จะไม่ยังคงเป็นที่สนใจของเบราว์เซอร์ ถ้าตำแหน่งที่มีการเปลี่ยนแปลงแล้วฉากที่ทั้งยังต้องมีการวาดใหม่รวมทั้งวัตถุใด ๆ ที่อาจได้รับการคุ้มครองด้วยกราฟิก
เปรียบเทียบ SVG และ Canvas
ตารางต่อไปนี้แสดงบางส่วนของความแตกต่างระหว่างผ้าใบและ SVG
| Canvas | SVG |
|---|---|
|
|