HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,801
2.	Tutorial + Programming	678,585
3.	Videos	218,834
4.	Results (`Annual + Re-appear`)	12,696
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,769
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,283
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,236
13.	Downloads (Syllabus)	948

SVG Circle

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

Live Demo & Try it yourself!

#HTML #circle #svg

SVG Rectangle

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

Live Demo & Try it yourself!

#HTML #svg #rectangle

SVG Rounded Rectangle

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" width="150" height="150"/>
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

Live Demo & Try it yourself!

#HTML #svg #Rounded Rectangle

SVG Star

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
 
</body>
</html>

Live Demo & Try it yourself!

#HTML #svg #star

SVG Logo

<!DOCTYPE html>
<html>
<body>

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="18" font-family="Verdana" x="25" y="86">GSSS KHOKHAR</text>
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

Live Demo & Try it yourself!