HTML5 in Hindi SVG

First Page

एसवीजी स्केलेबल वेक्टर ग्राफिक्स पर स्थिर है और यह एक्सएमएल में 2 डी-ग्राफिक्स और ग्राफिकल एप्लिकेशन का वर्णन करने के लिए एक भाषा है और फिर एक्सएमएल को एसवीजी दर्शक द्वारा प्रस्तुत किया जाता है. एसवीजी ज्यादातर वेक्टर प्रकार Diagrams जैसे Pie Chart, एक X में Two-dimensional Graphing, Y Coordinate System आदि के लिए उपयोगी है.

Image की गुणवत्ता को खोए बिना एक Vector Image को किसी भी हद तक बढ़ाया जा सकता है.

SVG Image और उनके व्यवहार को XML Files मे परिभाषित किया जाता है. इसका अर्थ है कि SVG Images को किसी Text Editor के साथ बनाया और Edited किया जा सकता है.

SVG एक Scalable Vector Graphics है SVG का इस्तेमाल Web Page और Graphics को परिभाषित करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head> 
      <title>HTML5 SVG Circle Example</title>
      <meta charset="utf-8" />
      <style>
         #svgCricle {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
   </head>
   <body>   
      <h2 align="center">HTML5 SVG Circle Example</h2>		
      <svg id="svgCricle" height="300" xmlns="http://www.w3.org/2000/svg">
         <circle id="circleFill" cx="50" cy="50" r="50" fill="green" />
      </svg>      
   </body>
</html>

Output

SVG Rectangle Example

एक SVG <rect> Element एक Rectangle को Represents करता है इस Element का उपयोग करके आप विभिन्न Width, Height विभिन्न Stroke Outline के साथ Rectangle को आकर्षित कर सकते हैं और तेज या Rounded Corners आदि के साथ Colors को Fill सकते है.

<!DOCTYPE html>
<html>
   <head> 
      <title>HTML5 SVG Rectangle Example</title>
      <meta charset="utf-8" />
      <style>
         #svgRectangle {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
   </head>
   <body>   
      <h2 align="center">HTML5 SVG Rectangle Example</h2>		
     <svg id="svgRectangle" height="200" xmlns="http://www.w3.org/2000/svg">
      <rect id="rectangleFill" width="300" height="100" fill="blue" />
      </svg>      
   </body>
</html>

Output

SVG Line Example

SVG <line> Element SVG Images के अंदर Draw Lines के लिए उपयोग किया जाता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Line Example</title>
      <meta charset="utf-8" />
      <style>
         #svgLine{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Line Example</h2>		
      <svg id="svgLine" height="200" xmlns="http://www.w3.org/2000/svg">
         <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
         <line x1="30" y1="120" x2="300" y2="150" style="stroke:blue;stroke-width:3"/>
      </svg>		
   </body>
</html>

Output

SVG Ellipse Example

Ellipse को आकर्षित करने के लिए SVG <ellipse> Element का उपयोग किया जाता है एक Ellipse एक Circle है जिसमें समान Height और Width नही है दूसरे शब्दों मे X और Y Directions मे इसका Radius अलग होता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Ellipse Example</title>
      <meta charset="utf-8" />
      <style>
         #svgEllipse{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Ellipse Example</h2>		
      <svg id="svgEllipse" height="300" xmlns="http://www.w3.org/2000/svg">
         <ellipse cx="150" cy="100" rx="150" ry="75" fill="red" />
      </svg>		
   </body>
</html>

Output

SVG Polyline Example

SVG <polyline> Element का उपयोग कई Connected Lines (poly = multiple) को आकर्षित करने के लिए किया जाता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Polyline Example</title>
      <meta charset="utf-8" />
      <style>
         #svgPolyline{
            position: relative;
            left: 40%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Polyline Example</h2>		
      <svg id="svgPolyline" height="300" xmlns="http://www.w3.org/2000/svg">
          <polyline points="80,80 80,120 120,120 120,140 140,140 140,160" fill="green" />
      </svg>		
   </body>
</html>

Output

SVG Gradients Example

SVG Gradients एक असमान Fashion मे Color के Shapes को भरने का एक तरीका है इस तरह से एक Shapes को भरना या Stroke एक Color से दूसरे में बदल सकता है यह कुछ प्रकार के Graphics के लिए बहुत अच्छा लग सकता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Gradients Example</title>
      <meta charset="utf-8" />
      <style>
         #svgGradients{
            position: relative;
            left: 43%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Gradients Example</h2>		
      <svg id="svgGradients" height="300" xmlns="http://www.w3.org/2000/svg">
         <defs>			
               <radialGradient id="gradientRadial" 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(201,124,24); stop-opacity:1"/>
               </radialGradient>				
         </defs>			
         <ellipse cx="150" cy="100" rx="150" ry="70" style="fill:url(#gradientRadial)" />	
      </svg>
   </body>
</html>

Output

SVG Star Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Star Example</title>
      <meta charset="utf-8" />
      <style>
         #svgStar{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Star Example</h2>		
      <svg id="svgStar" height="300" xmlns="http://www.w3.org/2000/svg">
         <polygon points="100,10 40,180 190,60 10,60 160,180" fill="purple"/>
      </svg>
   </body>
</html>