HTML5 - SVG
SVG ย่อมาจาก Sสามารถทำได้ Vเอคเตอร์ Graphics และเป็นภาษาสำหรับอธิบายกราฟิก 2 มิติและแอพพลิเคชั่นกราฟิกใน XML จากนั้น XML จะถูกแสดงผลโดยโปรแกรมดู SVG
SVG ส่วนใหญ่มีประโยชน์สำหรับไดอะแกรมประเภทเวกเตอร์เช่นแผนภูมิวงกลมกราฟสองมิติในระบบพิกัด X, Y เป็นต้น
SVG กลายเป็นคำแนะนำ W3C 14 มกราคม 2003 และคุณสามารถตรวจสอบเวอร์ชันล่าสุดของข้อกำหนด SVG ที่SVG ข้อมูลจำเพาะ
การดูไฟล์ SVG
เว็บเบราว์เซอร์ส่วนใหญ่สามารถแสดง SVG ได้เช่นเดียวกับที่แสดง PNG, GIF และ JPG ผู้ใช้ Internet Explorer อาจต้องติดตั้งAdobe SVG Viewerเพื่อให้สามารถดู SVG ในเบราว์เซอร์ได้
การฝัง SVG ใน HTML5
HTML5 ช่วยให้การฝัง SVG โดยตรงโดยใช้ <svg>...</svg> แท็กซึ่งมีไวยากรณ์ต่อไปนี้ -
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>Firefox 3.7 ยังได้แนะนำตัวเลือกการกำหนดค่า ("about: config") ซึ่งคุณสามารถเปิดใช้ HTML5 ได้โดยทำตามขั้นตอนต่อไปนี้ -
ประเภท about:config ในแถบที่อยู่ Firefox ของคุณ
คลิกปุ่ม "ฉันจะระวังฉันสัญญา!" บนข้อความเตือนที่ปรากฏขึ้น (และตรวจสอบให้แน่ใจว่าคุณปฏิบัติตาม!)
ประเภท html5.enable ลงในแถบตัวกรองที่ด้านบนสุดของหน้า
ขณะนี้ระบบจะปิดใช้งานดังนั้นให้คลิกเพื่อสลับค่าเป็นจริง
ตอนนี้โปรแกรมแยกวิเคราะห์ Firefox HTML5 ของคุณควรเปิดใช้งานแล้วและคุณจะสามารถทดลองกับตัวอย่างต่อไปนี้ได้
HTML5 - SVG Circle
ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดวงกลมโดยใช้แท็ก <circle> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5
HTML5 - SVG สี่เหลี่ยมผืนผ้า
ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดสี่เหลี่ยมผืนผ้าโดยใช้แท็ก <rect> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Rectangle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<rect id = "redrect" width = "300" height = "100" fill = "red" />
</svg>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5
HTML5 - SVG Line
ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะลากเส้นโดยใช้แท็ก <line> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Line</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<line x1 = "0" y1 = "0" x2 = "200" y2 = "100"
style = "stroke:red;stroke-width:2"/>
</svg>
</body>
</html>คุณสามารถใช้ไฟล์ style แอตทริบิวต์ที่ช่วยให้คุณสามารถตั้งค่าข้อมูลลักษณะเพิ่มเติมเช่นเส้นขีดและสีเติมความกว้างของเส้นโครงร่างเป็นต้น
สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5
HTML5 - SVG วงรี
ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดวงรีโดยใช้แท็ก <ellipse> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Ellipse</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill = "red" />
</svg>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5
HTML5 - SVG รูปหลายเหลี่ยม
ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดรูปหลายเหลี่ยมโดยใช้แท็ก <polygon> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Polygon</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polygon points = "20,10 300,20, 170,50" fill = "red" />
</svg>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5
HTML5 - SVG Polyline
ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดเส้นหลายเส้นโดยใช้แท็ก <polyline> -
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Polyline</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polyline points = "0,0 0,20 20,20 20,40 40,40 40,60" fill = "red" />
</svg>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5
HTML5 - SVG Gradients
ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดวงรีโดยใช้แท็ก <ellipse> และจะใช้แท็ก <radialGradient> เพื่อกำหนดการไล่ระดับแบบรัศมี SVG
ในทำนองเดียวกันคุณสามารถใช้แท็ก <linearGradient> เพื่อสร้างการไล่ระดับสีเชิงเส้น SVG
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Gradient Ellipse</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx = "50%" cy = "50%" r = "50%" fx = "50%"
fy = "50%">
<stop offset = "0%" style = "stop-color:rgb(200,200,200); stop-opacity:0"/>
<stop offset = "100%" style = "stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx = "100" cy = "50" rx = "100" ry = "50"
style = "fill:url(#gradient)" />
</svg>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5
HTML5 - SVG Star
ต่อไปนี้เป็นตัวอย่าง SVG ในเวอร์ชัน HTML5 ซึ่งจะวาดดาวโดยใช้แท็ก <polygon>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-40%);
-ms-transform: translateX(-40%);
transform: translateX(-40%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>
<body>
<h2 align = "center">HTML5 SVG Star</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "red"/>
</svg>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ใน Firefox เวอร์ชันล่าสุดที่เปิดใช้ HTML5