एचटीएमएल 5 - एसवीजी
एसवीजी का मतलब है Scalable VEctor Gरैपिक्स और यह एक्सएमएल में 2 डी-ग्राफिक्स और ग्राफिकल एप्लिकेशन का वर्णन करने के लिए एक भाषा है और फिर एक्सएमएल को एसवीजी दर्शक द्वारा प्रस्तुत किया जाता है।
एसवीजी ज्यादातर वेक्टर प्रकार आरेखों जैसे पाई चार्ट, एक एक्स में दो-आयामी ग्राफ, वाई समन्वय प्रणाली आदि के लिए उपयोगी है।
एसवीजी डब्ल्यू 3 सी सिफारिश 14. जनवरी 2003 बन गई और आप एसवीजी विनिर्देश में एसवीजी विनिर्देश के नवीनतम संस्करण की जांच कर सकते हैं ।
एसवीजी फाइलें देखना
अधिकांश वेब ब्राउज़र SVG प्रदर्शित कर सकते हैं जैसे वे PNG, GIF और JPG प्रदर्शित कर सकते हैं। इंटरनेट एक्सप्लोरर उपयोगकर्ताओं को ब्राउज़र में एसवीजी देखने में सक्षम होने के लिए एडोब एसवीजी व्यूअर स्थापित करना पड़ सकता है।
एचटीएमएल 5 में एसवीजी एम्बेड करना
HTML5 सीधे SVG का उपयोग करने की अनुमति देता है <svg>...</svg> टैग जो निम्नलिखित सरल वाक्यविन्यास है -
<svg xmlns = "http://www.w3.org/2000/svg">
...
</svg>फ़ायरफ़ॉक्स 3.7 ने एक कॉन्फ़िगरेशन विकल्प ("के बारे में: कॉन्फ़िगरेशन") भी पेश किया है, जहां आप निम्नलिखित चरणों का उपयोग करके एचटीएमएल 5 को सक्षम कर सकते हैं -
प्रकार about:config अपने फ़ायरफ़ॉक्स एड्रेस बार में।
"मैं सावधान रहूँगा, मैं वादा करता हूँ!" दिखाई देने वाले चेतावनी संदेश पर बटन (और सुनिश्चित करें कि आप इसका पालन करते हैं!)।
प्रकार html5.enable पृष्ठ के शीर्ष पर फ़िल्टर बार में।
वर्तमान में यह अक्षम हो जाएगा, इसलिए मान को सही करने के लिए इसे क्लिक करें।
अब आपका फ़ायरफ़ॉक्स HTML5 पार्सर सक्षम होना चाहिए और आपको निम्नलिखित उदाहरणों के साथ प्रयोग करने में सक्षम होना चाहिए।
एचटीएमएल 5 - एसवीजी सर्कल
एक SVG उदाहरण का HTML5 संस्करण निम्नलिखित है जो <वृत्त> टैग का उपयोग करके एक वृत्त खींचेगा -
<!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>यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।
एचटीएमएल 5 - एसवीजी आयत
निम्नलिखित एसवीजी उदाहरण का एचटीएमएल 5 संस्करण है, जो <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>यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।
एचटीएमएल 5 - एसवीजी लाइन
निम्नलिखित 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 विशेषता जो आपको अतिरिक्त शैली की जानकारी सेट करने की अनुमति देती है जैसे स्ट्रोक और रंग भरना, स्ट्रोक की चौड़ाई, आदि।
यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।
एचटीएमएल 5 - एसवीजी इलिप्स
निम्नलिखित एसवीजी उदाहरण का एचटीएमएल 5 संस्करण है जो <दीर्घवृत्त> टैग का उपयोग करके एक दीर्घवृत्त खींचेगा।
<!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>यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।
एचटीएमएल 5 - एसवीजी बहुभुज
एक SVG उदाहरण का HTML5 संस्करण निम्नलिखित है जो <बहुभुज> टैग का उपयोग करके एक बहुभुज खींचेगा -
<!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>यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।
एचटीएमएल 5 - एसवीजी पॉलीलाइन
निम्नलिखित एसवीजी उदाहरण का एचटीएमएल 5 संस्करण है जो <पॉलीलाइन> टैग का उपयोग करके एक पॉलीलाइन तैयार करेगा -
<!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>यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।
एचटीएमएल 5 - एसवीजी स्नातक
एसवीजी उदाहरण का एचटीएमएल 5 संस्करण निम्नलिखित है जो <ellipse> टैग का उपयोग करके एक दीर्घवृत्त खींचेगा और एक SVG रेडियल ग्रेडिएंट को परिभाषित करने के लिए <radialGradient> टैग का उपयोग करेगा।
इसी प्रकार, आप SVG रैखिक ढाल बनाने के लिए <linearGradient> टैग का उपयोग कर सकते हैं।
<!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>यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।
एचटीएमएल 5 - एसवीजी स्टार
निम्नलिखित एसवीजी उदाहरण का एचटीएमएल 5 संस्करण है जो <बहुभुज> टैग का उपयोग करके एक स्टार को आकर्षित करेगा।
<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>यह HTML5 के नवीनतम संस्करण फ़ायरफ़ॉक्स को सक्षम करने के बाद निम्न परिणाम देगा।