HTML SVG
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>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>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>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>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>Output:
