HTML SVG

❮ Prev Home ❯

SVG stands for scalable vector graphics. It is an XML based image format which is used to define two dimensional images. It is composed of shapes.

The SVG images do not lose quality upon scaling up and down like raster images. As HTML is for text in the same way SVG is for graphics.

SVG is mostly useful while creating vector diagrams like pie chart, 2D graph in x,y coordinate systems etc.

SVG line

Creating straight using SVG and giving color to the line.

<svg height="200" width="200" style="border: 2px solid #006699">
  <!-- X1 and Y1 is start point X2 and Y2 is end point -->
  <line x1="20" y1="20" x2="180" y2="180" stroke="red" />
  <!-- Stroke gives color -->
</svg>

▶ Run the code

Output:

SVG rectangle

Creating rectangle using SVG and filling color.

<svg height="200" width="400" style="border: 2px solid #006699">
  <!-- Simple rectangle -->
  <rect height="160" width="160" x="10" y="10" style="fill:orange" />
  <!-- Rectangle with rounded corner -->
  <rect height="160" width="160" x="200" y="10" rx="20" style="fill:red" />
</svg>

▶ Run the code

Output:

SVG circle

Creating a circle using SVG and filling color.

<svg height="300" width="300" style="border: 2px solid #006699">
  <!-- circle -->
  <circle cx="150" cy="150" r="125" fill="red" />
</svg>

▶ Run the code

Output:

SVG ellipse

Creating ellipse using SVG and filling color.

<svg height="200" width="300" style="border: 2px solid #006699" >
    <!-- ellipse -->
    <ellipse cx="150" cy="100" rx="125" ry="75" fill="red" />
</svg>

▶ Run the code

Output:

SVG polygon

Creating polygon using SVG and filling color.

<svg height="300" width="300" style="border: 2px solid #006699">
  <!-- Creating Polygon -->
  <polygon points="150,15 258,137.5 258,262.5 150,198 42,262.6 42,137.5" fill="red" stroke-width="3" stroke="orange" />
</svg>

▶ Run the code

Output:

❮ Prev Home ❯