SVG ภายใน HTML5

HTML5 สนับสนุน SVG แบบอินไลน์

อะไรคือ SVG?

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

ข้อดีของ SVG

ความสามารถของ SVG ที่ดีกว่ารูปภาพแบบอื่นๆ (เช่น JPEG และ GIF) นั้น:

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

การสนับสนุนโดยเบราเซอร์

Internet Explorer 9、Firefox、Opera、Chrome และ Safari สนับสนุน SVG ภายในลิงค์

ใส่ SVG โดยตรงในหน้าเว็บ HTML

ใน HTML5 คุณสามารถใส่ตัวเลือก SVG โดยตรงเข้าไปในหน้าเว็บ HTML

ตัวอย่าง

<!DOCTYPE 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.