HTML SVG Tutorial

HTML SVG

SVG stands for Scalable Vector Graphics. It allows you to draw vector-based images directly in HTML using XML syntax.

Unlike Canvas, SVG graphics:

Scale perfectly without losing quality.

Are searchable and accessible.

Can be styled with CSS and animated with JavaScript.

Syntax: Basic SVG


<svg width="500" height="500">
   <!-- SVG elements go here -->
</svg>

Common SVG Elements

Element	Description	Syntax Example
<circle>	Draw a circle	<circle cx="50" cy="50" r="40" fill="red" />
<rect>	Draws a rectangle	<rect x="10" y="10" width="100" height="50" />
<line>	Draws a straight line	<line x1="10" y1="10" x2="100" y2="100" />
<ellipse>	Draws an ellipse	<ellipse cx="60" cy="60" rx="40" ry="20" />
<polygon>	Draws a closed shape	<polygon points="50,5 100,100 0,100" />
<polyline>	Draws a series of connected lines	<polyline points="0,0 50,50 100,0" />
<path>	Draws complex shapes using path commands	<path d="M10 10 H 90 V 90 H 10 Z" />
<text>	Adds text inside SVG	<text x="50" y="50">Hello SVG</text>

Example of SVG Drawing

Rectangle


<svg width="500" height="500">
   <rect x="50" y="50" width="150" height="100" fill="blue" stroke="black" stroke-width="3" />
</svg>

Output:

Circle and Ellipse


<svg width="500" height="500">
   <circle cx="250" cy="250" r="100" fill="red" stroke="black" stroke-width="3" />
   <ellipse cx="250" cy="250" rx="100" ry="50" fill="yellow" stroke="green" stroke-width="3" />
</svg>

Output:

Line and Polyline


<svg width="250" height="250">
   <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" />
   <polyline points="10,10 60,60 110,10" stroke="blue" stroke-width="2" fill="none" />
</svg>

Output:

Path Example (Complex Shape)


<svg width="500" height="500">
   <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black" stroke-width="2" />
</svg>

Explanation:

M – Move to

H – Horizontal line

V – Vertical line

Z – Close path (back to start)

Output:

Text in SVG


<svg width="500" height="500">
   <text x="50" y="50" font-family="Verdana" font-size="35" fill="green">SVG by Quipoin</text>
</svg>

Output:

Polygon


<svg width="500" height="500">
   <polygon points="100,10 40,198 190,78" style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>

Output:

SVG Gradients


<svg width="400" height="200">
   <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
         <stop offset="100%" style="stop-color:red;stop-opacity:1" />
      </linearGradient>
   </defs>
   <rect x="10" y="10" width="200" height="100" fill="url(#grad1)" />
</svg>

Output:

Radial Gradient

<svg width="400" height="200">
   <defs>
      <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
         <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
         <stop offset="100%" style="stop-color:red;stop-opacity:1" />
      </radialGradient>
   </defs>
   <circle cx="200" cy="100" r="80" fill="url(#grad2)" />
</svg>

Output:

Working with Images in SVG

Embedding an Image

<svg width="400" height="300">
   <image href="path/to/image.jpg" x="50" y="50" width="300" height="200" />
</svg>

Output:

Using Image as a Pattern Fill

<svg width="400" height="300">
   <defs>
      <pattern id="imgPattern" patternUnits="userSpaceOnUse" width="100" height="100">
         <image href="download.png" x="0" y="0" width="100" height="100" />
      </pattern>
   </defs>
   <rect x="0" y="0" width="400" height="300" fill="url(#imgPattern)" />
</svg>

Output: