HTML SVG
SVG, which stands for Scalable Vector Graphics, is an XML-based format for
vector graphics. Unlike raster images (like JPEGs or PNGs), which are made
up of pixels, SVG images are made up of paths, shapes, and text defined in
XML code.
This makes SVG images resolution-independent, meaning they can be scaled to
any size without losing quality, making them ideal for web graphics, logos,
icons, and illustrations.
Key Features Of SVG
Scalability: SVG graphics can be scaled up or down without any
loss of quality.
Interactivity: SVG supports interactivity and animation, making it
useful for creating dynamic web content.
Lightweight: SVG files are generally smaller in size compared to
raster images, especially when dealing with simple graphics.
Text-based: Being XML-based, SVG files can be edited in any text
editor, and it's easy to manipulate their properties with CSS and
JavaScript.
Basic Structure Of An SVG File
Here’s a simple example of an SVG file:
Example:
<svg
width="400"
height="400">
<circle cx="100" cy="100" r="80" stroke="red" stroke-width="6" fill="yellow" />
</svg>
<circle cx="100" cy="100" r="80" stroke="red" stroke-width="6" fill="yellow" />
</svg>
Output:
HTML SVG Rectangle
Let's see the example to draw rectangle by svg tag.
Example:
<svg
width="400"
height="200">
<rect
width="400"
height="200"
stroke="red"
stroke-width="6"
fill="yellow"
/>
</svg>
Output:
HTML SVG Polygon
Let's see the example to draw polygon by svg tag.
Example:
<svg height="300" width="600">
<polygon
points="100,10 40,198 190,78
10,78 160,198" style="fill:yellow;stroke:red;stroke-width:5;fill-rule:nonzero;"
/>
</svg>
Output:
More topic in HTML
