HTML SVG

Engineer resolution-independent vector illustrations maintaining pristine clarity across dimension variations

Scalable Vector Graphics (SVG) represents an XML-based specification establishing web graphic definitions. These resolution-agnostic visuals support infinite dimensional scaling while preserving visual fidelity.

What is SVG?

SVG is a language for describing two-dimensional graphics in XML. SVG graphics are defined using XML text files, which means they can be:

  • Scalable: Can be scaled to any size without losing quality
  • Searchable: Text in SVG can be indexed by search engines
  • Editable: Can be created and edited with any text editor
  • Programmable: Can be manipulated with JavaScript and CSS
  • Accessible: Screen readers can read SVG text
  • Compressible: SVG files compress well with gzip

Key Advantage

Contrasting bitmap formats (PNG, JPG), SVG visuals preserve sharpness throughout scaling operations—ideal for adaptive layouts, brand identities, and iconography!

SVG in HTML

SVG can be embedded directly in HTML5 using the <svg> element:

Example - Simple SVG Circle

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Result:

SVG element attributes:

  • width and height - Define the viewport size
  • viewBox - Defines the coordinate system (optional but useful)
  • xmlns - XML namespace (not required in HTML5)

SVG Circle

The <circle> element is used to create a circle:

Example

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#FF6347" />
</svg>

Result:

Circle attributes:

  • cx - X coordinate of the center
  • cy - Y coordinate of the center
  • r - Radius of the circle
  • fill - Fill color
  • stroke - Stroke (outline) color
  • stroke-width - Width of the stroke

SVG Rectangle

The <rect> element is used to create a rectangle:

Example

<svg width="300" height="200">
  <rect width="250" height="150" x="25" y="25"
        fill="#4CAF50" stroke="#000" stroke-width="3" />
</svg>

Result:

Rectangle attributes:

  • x - X coordinate of the top-left corner
  • y - Y coordinate of the top-left corner
  • width - Width of the rectangle
  • height - Height of the rectangle
  • rx - X radius for rounded corners (optional)
  • ry - Y radius for rounded corners (optional)

Rounded Rectangle

<svg width="300" height="200">
  <rect width="250" height="150" x="25" y="25" rx="20" ry="20"
        fill="#2196F3" stroke="#000" stroke-width="3" />
</svg>

Result:

SVG Line

The <line> element is used to create a line:

Example

<svg width="300" height="200">
  <line x1="20" y1="20" x2="280" y2="180"
        stroke="#FF5722" stroke-width="5" />
</svg>

Result:

Line attributes:

  • x1 - X coordinate of the start point
  • y1 - Y coordinate of the start point
  • x2 - X coordinate of the end point
  • y2 - Y coordinate of the end point

SVG Polygon

The <polygon> element is used to create a graphic with at least three sides:

Example - Triangle

<svg width="300" height="200">
  <polygon points="150,20 250,180 50,180"
           fill="#9C27B0" stroke="#000" stroke-width="3" />
</svg>

Result:

Star Example

<svg width="300" height="250">
  <polygon points="150,25 175,100 250,100 190,150 210,225 150,175 90,225 110,150 50,100 125,100"
           fill="#FFD700" stroke="#FF8C00" stroke-width="3" />
</svg>

Result:

Polygon attributes:

  • points - List of x,y coordinate pairs for each vertex
  • The polygon is automatically closed (first and last points connect)

SVG Polyline

The <polyline> element is used to create shapes with multiple connected lines (not closed):

Example

<svg width="300" height="200">
  <polyline points="20,20 100,60 100,140 180,180 260,140 260,60"
            fill="none" stroke="#3F51B5" stroke-width="4" />
</svg>

Result:

Note: Unlike polygon, polyline does NOT automatically close the shape. Set fill="none" to draw only the outline.

SVG Ellipse

The <ellipse> element is used to create an ellipse (oval shape):

Example

<svg width="300" height="200">
  <ellipse cx="150" cy="100" rx="120" ry="60"
           fill="#E91E63" stroke="#000" stroke-width="3" />
</svg>

Result:

Ellipse attributes:

  • cx - X coordinate of the center
  • cy - Y coordinate of the center
  • rx - Horizontal radius
  • ry - Vertical radius

SVG Text

The <text> element is used to define text in SVG:

Example

<svg width="300" height="100">
  <text x="10" y="40" font-family="Arial" font-size="30" fill="#FF5722">
    Hello SVG!
  </text>
  <text x="10" y="70" font-family="Verdana" font-size="20"
        fill="none" stroke="#2196F3" stroke-width="1">
    Outlined Text
  </text>
</svg>

Result:

Hello SVG! Outlined Text

Text attributes:

  • x - X coordinate of the text start
  • y - Y coordinate of the text baseline
  • font-family - Font name
  • font-size - Font size
  • fill - Text color
  • stroke - Text outline color

SVG Path

The <path> element is the most powerful SVG element. It can be used to create lines, curves, arcs, and complex shapes:

Example - Simple Path

<svg width="300" height="200">
  <path d="M 50 50 L 250 50 L 250 150 L 50 150 Z"
        fill="none" stroke="#4CAF50" stroke-width="3" />
</svg>

Result:

Path commands:

Command Description
M x y Move to (x, y)
L x y Line to (x, y)
H x Horizontal line to x
V y Vertical line to y
C x1 y1 x2 y2 x y Cubic Bezier curve
Q x1 y1 x y Quadratic Bezier curve
A rx ry rotation large-arc sweep x y Arc
Z Close path

💡 Tip

Use uppercase letters for absolute coordinates and lowercase letters for relative coordinates (e.g., M for absolute, m for relative).

SVG Gradients

Linear Gradient

SVG linear gradients must be defined within a <defs> element:

<svg width="300" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="150" cy="100" rx="120" ry="80" fill="url(#grad1)" />
</svg>

Result:

Radial Gradient

<svg width="300" height="200">
  <defs>
    <radialGradient id="grad2">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="150" cy="100" r="80" fill="url(#grad2)" />
</svg>

Result:

SVG Grouping - The g Element

The <g> element is used to group SVG shapes together. Transformations applied to the group affect all elements in the group:

Example

<svg width="300" height="200">
  <g fill="none" stroke="black" stroke-width="3">
    <circle cx="50" cy="50" r="30" />
    <circle cx="100" cy="50" r="30" />
    <circle cx="150" cy="50" r="30" />
  </g>
  <g fill="red">
    <circle cx="50" cy="120" r="30" />
    <circle cx="100" cy="120" r="30" />
    <circle cx="150" cy="120" r="30" />
  </g>
</svg>

Result:

SVG Shapes Summary

Element Description
circle Creates a circle
rect Creates a rectangle
ellipse Creates an ellipse
line Creates a line
polyline Creates connected lines (open)
polygon Creates a closed shape with straight sides
path Creates complex shapes with curves and lines
text Creates text
g Groups shapes together

Advantages of Using SVG

  • Scalability: SVG images can be scaled infinitely without losing quality
  • Small file size: SVG files are typically smaller than bitmap images
  • Searchable and indexable: Text in SVG is selectable and searchable
  • Accessibility: SVG works well with screen readers
  • Animatable: SVG can be animated with CSS or JavaScript
  • Styleable: SVG can be styled with CSS
  • Programmable: SVG can be manipulated with JavaScript
  • Resolution-independent: Perfect for responsive design
  • Compressible: SVG files compress well with gzip

Test Your Knowledge