รู้จักกับกราฟฟิกแบบ SVG (Scalable Vector Graphics)

Published in

SiamHTML

2 min readOct 16, 2012

ก่อนจะพูดถึง SVG คงต้องอธิบายถึง XML กันก่อนครับ XML (EXtensible Markup Language) เป็น markup language เหมือนๆ กับ HTML ครับ โดยถูกออกแบบมาเพื่อใช้เก็บและขนส่งข้อมูลโดยเฉพาะ ซึ่ง Tag ใน XML นั้น จะไม่มีการกำหนดขึ้นมาเหมือน HTML ครับ แต่จะให้เราเป็นคนกำหนดขึ้นมาเอง ซึ่งเราสามารถสรุปความแตกต่างระหว่าง XML กับ HTML ได้ดังนี้ครับ

HTML ถูกออกแบบมาเพื่อแสดงผลข้อมูล เน้นไปที่ข้อมูลจะถูกแสดงออกมาหน้าตาอย่างไร ส่วน XML ถูกออกแบบมาเพื่อเก็บและขนส่งข้อมูล ซึ่งเน้นไปที่ข้อมูลนั้นคืออะไร
HTML เป็น markup language ในตัวของมันเอง ส่วน XML เราต้องสร้าง markup language ขึ้นมาเอง
HTML ใช้ design เว็บเพจให้เรนเดอร์บนเครื่องของผู้ใช้งาน ในขณะที่ XML ใช้ขนส่งข้อมูลระหว่าง Application ต่างๆ หรือ Database

ลองมาดูตัวอย่างของ XML กันเลยดีกว่าครับ

<note>
	<to>Tove</to>
	<from>Jani</from>
	<heading>Reminder</heading>
	<body>Don't forget me this weekend!</body>
</note>

จากตัวอย่าง XML ง่ายๆ ด้านบน จะเห็นว่า Tag ต่างๆ เราสามารถกำหนดขึ้นเองได้ครับ ว่าจะให้ markup ข้อมูลอะไร และสามารถกำหนดแบบ Nested ได้ เช่น ข้อมูล XML นี้ ทั้งหมดคือ Note เราก็จะใช้ <note> ในการ markup ภายใน <note> ก็จะประกอบไปด้วย <to>, <from>, <heading> และ <body> ซึ่งก็คือข้อมูลเพิ่มเติมของ Note เราว่าส่งไปถึงใคร จากใคร หัวข้อคืออะไร และเนื้อหาคืออะไรครับ

แล้ว SVG เกี่ยวอะไรกับ XML?

จริงๆ แล้ว SVG นั้นก็คือ กราฟฟิกรูปแบบหนึ่ง ที่ใช้แสดงผลสำหรับเว็บครับ แต่ที่ต้องพูดถึง XML ก็เพราะว่า SVG นั้น เป็นกราฟฟิกที่เขียนให้อยู่ใน XML format นั่นเองครับ ซึ่ง XML data ที่อยู่ในไฟล์ SVG จะเป็นตัวกำหนดว่า กราฟฟิกที่จะเรนเดอร์นั้นมีลักษณะอย่างไร

SVG file (circle.svg)

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>HTML<iframe src="circle1.svg"></iframe>นี่เป็นตัวอย่างไฟล์ SVG แบบง่ายๆ ครับ ซึ่งจะแสดงผลออกมาเป็นวงกลม โดยมีรายละเอียดต่างๆ ตาม XML data ที่เราใส่เข้าไปดังนี้ครับ

cx, cy คือ พิกัด x, y ของจุดศูนย์กลางของวงกลม หากไม่ใส่ จะมีค่าเป็น 0
r คือ รัศมีของวงกลม
stroke คือ สีของเส้นขอบ
stroke-width คือ ความหนาของเส้นขอบ
fill คือ สีของกราฟฟิกที่สร้างขึ้น

นอกจากนี้ SVG ยังสามารถสร้างรูปทรง (shape) ต่างๆ ได้มากมาย ไม่ว่าจะเป็น

Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>

ซึ่งแต่ละ shape ก็จะมี attribute ต่างๆ มาให้เรากำหนดค่า เพื่อให้แสดงผลออกมาตามต้องการ หากใครอยากศึกษาเพิ่มเติม สามารถเข้าไปอ่านได้ที่ w3schools ครับ

แล้วจะนำ SVG ไปใช้กับเว็บได้อย่างไร ?

การนำกราฟฟิกแบบ SVG ไปใช้งานนั้น ทำได้หลายวิธีด้วยกันครับ ซึ่งพอสรุปได้ดังนี้

<embed>

<embed src="circle.svg" type="image/svg+xml" />

<object>

<object data="circle.svg" type="image/svg+xml"></object>

<iframe>

<iframe src="circle.svg"></iframe>

<img>

<img src="circle.svg" />

Direct

<html>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg></body>
</html>ทำไมต้องหันมาใช้ SVG ?การใช้กราฟฟิกแบบ SVG มีทั้งข้อดีและข้อเสีย ก่อนนำมาใช้เราควรพิจารณาก่อน ซึ่งสรุปได้ดังนี้ครับ

ไฟล์มีขนาดเล็กกว่ามาก
สามารถย่อ-ขยายได้ โดยคุณภาพยังคงเดิม
ยังไม่รองรับในบาง Web Browser

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