« Previous Next »

HTML SVG Graphics

SVG (Scalable Vector Graphics)

The <svg> Element

The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, rectangles, circles, polygons, text, and much more.

Output:

SVG Rectangle

Output:

SVG Rectangle with Opacity and Rounded Corners

Output:

SVG Star

Output:

SVG Gradient Ellipse and Text

Output:

Practice Exercises

Task 1: How to build a multi-shape vector icon using circle, rounded rectangle, and polygon shapes?

Goal: Create an SVG canvas containing a styled circle, a semi-transparent rectangle with rounded corners, and a custom multi-point polygon star.
💡 Hint: Use <circle> with cx, cy, r; <rect> with rx, ry, opacity; and <polygon> with points="..." and fill-rule: evenodd.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Shapes Practice</title>
  </head>
  <body>

    <h2>Geometric SVG Badge</h2>

    <svg width="500" height="160">
      <!-- Basic Circle -->
      <circle cx="60" cy="80" r="45" stroke="darkgreen" stroke-width="4" fill="yellowgreen" />

      <!-- Rounded Rectangle with Opacity -->
      <rect x="140" y="35" rx="15" ry="15" width="120" height="90" 
            style="fill:crimson;stroke:navy;stroke-width:4;opacity:0.75" />

      <!-- Multi-point Polygon Star -->
      <polygon points="380,20 320,140 440,50 320,50 440,140" 
               style="fill:gold;stroke:darkorange;stroke-width:4;fill-rule:evenodd;" />
      
      Sorry, your browser does not support inline SVG.
    </svg>

  </body>
</html>

Output :

Geometric SVG Badge

Explanation: SVG allows vector-based rendering that scales without quality loss. The <circle> element uses center coordinates (cx, cy) and radius (r). The <rect> uses rx and ry attributes to create smooth, rounded corners alongside styling options like opacity. The <polygon> draws complex shapes via coordinate pairs in points, using fill-rule: evenodd to cleanly calculate intersecting fill regions.

Task 2: How to create a gradient-filled vector ellipse overlay with embedded SVG text?

Goal: Build an SVG banner featuring a custom linear color gradient definition applied as a background fill for an ellipse, overlaid with aligned vector text.
💡 Hint: Define color stops inside <defs> using <linearGradient id="...">, fill the <ellipse> using fill="url(#id)", and add styled text via <text> coordinates.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>SVG Gradient Banner</title>
  </head>
  <body>

    <h2>Gradient Vector Logo Banner</h2>

    <svg width="450" height="150">
      <!-- Definition for Linear Gradient -->
      <defs>
        <linearGradient id="bannerGrad">
          <stop offset="0%" stop-color="#00c6ff" />
          <stop offset="100%" stop-color="#0072ff" />
        </linearGradient>
      </defs>

      <!-- Ellipse filled with defined gradient -->
      <ellipse cx="200" cy="70" rx="180" ry="55" fill="url(#bannerGrad)" />

      <!-- Vector Typography inside SVG -->
      <text x="90" y="85" fill="#ffffff" font-size="42" 
            font-weight="bold" font-family="Arial, sans-serif">HTML SVG</text>

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

  </body>
</html>

Output :

Gradient Vector Logo Banner

Explanation: The <defs> element acts as a storehouse for reusable SVG graphic components like <linearGradient>. Applying fill="url(#gradientId)" connects the background color transition to the <ellipse>, which defines horizontal (rx) and vertical (ry) radii. The <text> tag places crisp, scalable labels precisely using x and y pixel coordinates.

« Previous Next »