learn2kode.in

Menu

HTML Tutorial

Menu

HTML SVG

SVG (Scalable Vector Graphics) is an XML-based markup language used to create vector graphics directly in HTML. Unlike images, SVGs can scale to any size without losing quality.

1. Basic SVG Structure

Copy Text 
<!DOCTYPE html>
<html>
<body>

<svg width="120" height="120">
  <circle cx="60" cy="60" r="50" stroke="blue" stroke-width="4" fill="lightblue" />
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>
Sorry, your browser does not support inline SVG.
  • width and height define the SVG viewport.
  • All shapes, text, and paths are defined inside the tag.

2. Common SVG Shapes

Tag Purpose Example
<circle> Draws a circle <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<rect> Draws a rectangle <rect x="10" y="10" width="100" height="50" fill="blue"/>
<line> Draws a straight line <line x1="0" y1="0" x2="200" y2="200" stroke="red" />
<ellipse> Draws an ellipse <ellipse cx="100" cy="50" rx="80" ry="40" fill="pink"/>
<polygon> Draws connected lines <polygon points="50,0 100,50 50,100 0,50" fill="orange"/>
<polyline> Draws a series of connected lines (not closed) <polyline points="0,0 50,25 50,75 0,100" stroke="blue" fill="none"/>
<path> Complex shapes using commands <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
<text> Adds text inside SVG <text x="10" y="50" fill="red">Hello SVG</text>

3. Example: Simple SVG Illustration

Copy Text 
<!DOCTYPE html>
<html>
<body>

<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" fill="orange" stroke="black" stroke-width="3" />
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>
Sorry, your browser does not support inline SVG.

4. SVG Attributes

Attribute Description
width / height Set SVG size
fill Fill color of shapes
stroke Outline color of shapes
stroke-width Thickness of outline
cx, cy, r Circle position and radius
x, y, width, height Rectangle or text positioning
points Coordinates for polygon or polyline
d Path commands for complex shapes

5. Embedding SVG in HTML

Inline SVG

Using <img> Tag

Copy Text 
<img src="image.svg" alt="SVG Image" width="200">

Using <object> Tag

Copy Text 
<object type="image/svg+xml" data="image.svg"></object>
HTML Canvas