HTML5 SVG kya hai | What is svg ? – Free HTML tutorial
आज हम इस HTML Tutorial in Hindi के लेख में SVG kya hai वह समझेंगे |
HTML5 svg full form in hindi
SVG का Full form Scalable Vector Graphics है | यह XML base image format है , जिसका उपयोग web page में 2D vector ( two-dimensional vector ) परिभाषित करने के लिए किया जाता है |
vector images को कितना भी scale किया जाए तो भी वह अपनी quality नहीं खोता है , जबकि raster images ( .jpg , .png , आदि ) को scale करने पर कुछ हद के बाद image की quality ख़राब हो जाती है |
HTML SVG एक modularized भाषा है जिसका इस्तेमाल XML में graphics का वर्णन करने के लिए किया जाता है | SVG images और उनके व्यवहार को XML text files में परिभाषित किया जाता है |
आप SVG images को create करने के लिए किसी भी text editor का उपयोग कर सकते है , लेकिन आम तौर पर इसे बनाने के लिए inkspace जैसे drawing program को प्राथमिकता दी जाती है |
SVG का मुख्य इस्तेमाल vector type के diagrams के लिए किया जाता है जैसे की pie charts.
SVG image ka upayog karne ke fayde
अन्य image format ( .jpg , .gif , .png ) की जगह SVG format का उपयोग करने के फायदे कुछ इस प्रकार है |
- SVG Image को Javascript का उपयोग करके real time में create या modified किया जा सकता है |
- SVG Images को किसी भी resolution पर High quality के साथ print किया जा सकता है |
- HTML document में built-in animation element का उपयोग करके SVG content को animate किया जा सकता है |
- SVG images अन्य document के hyperlink को शामिल कर सकता है |
- SVG images को searched , indexed , scripted और compressed किया जा सकता है
Vector images गणित द्वारा परिभाषित आकृतियों के एक निश्चित set से बनी होती हैं , जबकि bitmap या raster images pixels नामक बिंदुओं के एक निश्चित set से बनी होती हैं।
SVG image ko html me embed kaise kare
आप HTML5 के <svg> element का इस्तेमाल करके HTML document में svg graphics को embed कर सकते है |
आइये इसे निचे दिया गया example के जरिये समझने की कोशिश करते है |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML SVG embedding example</title>
</head>
<body>
<svg width="400" height="300" style="border: 1px #000 solid;">
</svg>
</body>
</html>ऊपर दिए गए HTML code में हमने svg graphics draw करने के लिए <svg> tag का इस्तेमाल किया है , और width attribute and height attribute की help से उस vector की size set की है |
by default HTML में svg element की border नहीं होती है , इसलिए हमने inline styles का इस्तेमाल करके उसकी border set की है |
ऊपर का HTML code simple 400px X 300px area के साथ svg को web page पर embed करेगा |
svg se path and shape kaise banaye ( How to draw path and shape with svg )
निचे दिए गए sections के जरिये समझने की कोशिश करते है की svg element से path और shape kaise draw karte hai.
html me vector line kaise banaye
आप svg के जरिये vector base सीधी line draw कर सकते है | यह svg का सबसे basic path है |
<svg width="400" height="300" style="border: 1px solid black;">
<line x1="80" y1="80" x2="300" y2="200" style="stroke:red; stroke-width:3;" />
</svg><line> element x1 , y1 , x2 , y2 attributes ( x1 , y1 ) से ( x2 , y2) अक्षांश तक line draw करेगा |
इसे अच्छे से समझने के लिए निचे दिया गया drawing को देखे |
html me vector rectangle kaise banaye
आप svg<rect> element का उपयोग करके vector rectangle या square करते कर सकते है | आइये इसे example की help से समझने की कोशिश करते है |
<svg width="400" height="300">
<rect x="60" y="60" width="300" height="150" style="fill:red; stroke:black; stroke-width:3;" />
</svg><rect> element के attributes x और y rectangle के ऊपरी-बाएँ कोने के निर्देशांक को परिभाषित करते हैं।
HTML me vector circle kaise banaye
आप अपने web page पर svg <circle> element का उपयोग करके vector circle भी create कर सकते है |
<svg width="400" height="300">
<circle cx="180" cy="150" r="80" style="fill:lime; stroke:black; stroke-width:3;" />
</svg><circle> element के attributes cx और cy circle के केंद्र के निर्देशांक ( co-ordinates ) को परिभाषित करते हैं और attribute r circle की त्रिज्या ( radius ) को निर्दिष्ट करता है।
यदि cxऔर cy attributes का इस्तेमाल न किया जाये तो circle का center (0 , 0) पर set होगा |
HTML me vector text kaise banaye
आप svg का उपयोग करके वेब पेज पर vector text भी बना सकते है | svg में text को graphics के रूप मे प्रस्तुत किया जाता है ताकि आप इसमें सभी graphics transformation apply कर सको , लेकिन फिर भी यह text की तरह कार्य करता है | इसका मतलब है कि इस text को user द्वारा select करके copy किया जा सकता है |
<svg width="400" height="300">
<text x="18" y="40" style="fill:purple; font-size:20px;">
Welcome to Tech Samundra!
</text>
<text x="18" y="40" dx="0" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of Tutorials in Hindi like HTML Tutorial
</text>
</svg><text> element के attributes x और y ऊपरी-बाएँ कोने के स्थान को परिभाषित करते हैं | जबकि attributes dx और dy सापेक्ष स्थान (relative location) निर्दिष्ट करती हैं।
आप <text> element में लिखे गए text को reformat या reposition करने के लिए text element के भीतर <tspan> element का उपयोग कर सकते है |
<svg width="400" height="300">
<text x="20" y="15" style="fill:purple; font-size:22px;>
<tspan style="fill:purple; font-size:22px;">
Welcome to Tech Samundra!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
Here you will find lots of Tutorials in Hindi like HTML Tutorial
</tspan>
</text>
</svg>svg aur canvas me kya antar hai
HTML5 ने web page पर समृद्ध graphics बनाने के लिए दो नए graphical elements <svg> और <canvas> पेश किए है | लेकिन यह fundamentally एक दूसरे से भिन्न है |
निम्न table इन दो elements के बीच कुछ बुनियादी अंतरों को दर्शाता है , जो आपको यह समझने में help करेगा कि इन तत्वों का प्रभावी और उचित उपयोग कैसे किया जाए।
| SVG Element | Canvas Element |
| यह vector base graphics create करता है | | यह raster ( pixels ) base graphics create करता है | |
| इसे script और css के जरिये modify किया जाता है | | इसे खाली script के जरिये ही modify किया जा सकता है | |
| यह अच्छी quality के साथ text को render कर सकता है | | यह text को low quality के साथ render करता है | |
| Object की छोटी संख्या या बड़ी सतह ( larger surface ), या दोनों के साथ बेहतर प्रदर्शन करता है | | Object की बड़ी संख्या या छोटी सतह, या दोनों के साथ बेहतर प्रदर्शन करता है | |
| इसमें Better scalability है , और इसे किसी भी resolution के साथ high quality print किया जा सकता है | | इसमें poor scalability है , यह higher resolution पर printing के लिए suitable नहीं है | |
| इसमें कई graphical elements शामिल होते है , जो page के DOM tree का हिस्सा बन जाते हैं | | यह single element की तरह व्यवहार करता है जैसे की <img> element , canvas diagram को PNG या JPG format में save किया जा सकता है | |
उम्मीद है आपको इस लेख के जरिये समझमे आ गया होगा की HTML5 svg kya hai , फिर भी यदि कोई questions है आपके mind में तो निचे दिए गए comment box में comment करके जरूर बताइये |
यह भी पढ़े :-