HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

HTML SVG Graphics

SVG defines vector-based graphics in XML format.

What is SVG?

SVG stands for Scalable Vector Graphics. It is a markup language for describing two-dimensional vector graphics. SVG is an XML-based format that allows you to create graphics using a set of geometric shapes, text, and images. One of the key advantages of SVG is that it is scalable, meaning that the graphics can be resized without loss of quality.

The HTML <svg> Element

The HTML <svg> element is used to embed scalable vector graphics (SVG) directly into an HTML document. SVG is an XML-based markup language for describing two-dimensional vector graphics, and it's used to create graphics and visualizations on the web.

Browser Support

Element <sav>
Google_Chrome 4.0
Firefox 3.0
microsoft-edge 9.0
opera. 10.1
safari 3.2

SVG Circle

images-circle

Example

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
You can click on above box to edit the code and run again.

Output

SVG Rectangle

squar svs

Example

    
<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
You can click on above box to edit the code and run again.

Output

SVG Rounded Rectangle

rounded.webp

Example

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
You can click on above box to edit the code and run again.

Output

SVG Star

star

Example

<svg width="400" height="180">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
You can click on above box to edit the code and run again.

Output

SVG Logo

svg.png

Example

<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="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>
You can click on above box to edit the code and run again.

Output