SVG Inline HTML5

HTML5 สนับสนุน SVG แบบ inline

SVG คืออะไร?

  • SVG หมายถึง SVG (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 ได้

ตัวอย่าง

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