HTML SVG Tutorial

SVG stands for Scalable Vector Graphics. It is used to define vector-based graphics for the web. It allows for the creation of shapes and images using XML-based markup. SVG images can be scaled without losing quality, making them ideal for responsive designs.

Creating SVG Shapes

To create an SVG shape, you use the <svg> element. This element defines the container for the SVG graphics. Inside the <svg> element, you can add various shapes such as rectangles, circles, and lines.

<svg width="200" height="200">
   <rect x="50" y="50" width="100" height="100" fill="blue" />
</svg>

Result:

Attribute	Description
x	The x-coordinate of the shape's starting point.
y	The y-coordinate of the shape's starting point.
width	The width of the shape.
height	The height of the shape.

Adding Text to SVG

You can also add text to an SVG graphic using the <text> element. This element allows you to specify the text content, position, and style.

<svg width="200" height="200">
   <text x="50" y="100" fill="red">Hello, SVG!</text>
</svg>

Result:

Attribute	Description
x	The x-coordinate of the text's starting point.
y	The y-coordinate of the text's starting point.
fill	The color of the text.

Using SVG Paths

SVG paths allow for the creation of complex shapes and lines by defining a series of points. You use the <path> element to create paths in SVG.

<svg width="200" height="200">
   <path d="M10 10 L50 50 H100 Z" fill="none" stroke="black" />
</svg>

Result:

Attribute	Description
d	Defines the path data (moveto, lineto, horizontal lineto, closepath).
fill	The color to fill the path.
stroke	The color of the path's border.