HTML SVG

Introduction

In the previous lesson, you learned about HTML Iframes and how external webpages and services can be displayed inside a webpage.

Modern websites also depend heavily on visual graphics such as company logos, interface icons, charts, diagrams, illustrations, maps, and infographics.

Traditional image formats such as JPG and PNG are made from pixels. When these images are enlarged beyond their original dimensions, individual pixels become visible and the image can appear blurry.

HTML supports SVG, or Scalable Vector Graphics, to solve this problem for graphics that can be described using shapes, lines, curves, coordinates, and mathematical instructions.

SVG graphics can remain sharp when displayed as a small icon, a large website logo, or even a graphic on a very large screen.

What is SVG?

SVG stands for Scalable Vector Graphics.

SVG is an XML-based graphics format used to create two-dimensional vector graphics.

Unlike raster images, SVG graphics are built using elements that describe shapes such as circles, rectangles, lines, ellipses, polygons, paths, and text.

The browser reads these elements and their attributes, calculates their geometry, and draws the final graphic on the screen.

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

Why Do We Need SVG?

Websites must display graphics on many different screen sizes and pixel densities.

A logo may appear as a tiny icon in one location and as a large banner graphic in another.

Using a fixed-size raster image for every situation can create quality, responsiveness, and file-management problems.

Real-World Analogy

Imagine comparing a photograph with a set of drawing instructions.

A photograph contains a fixed collection of tiny colored pixels. If the photograph is enlarged enough, those pixels become visible.

Now imagine instructions that say: draw a circle at this position with this radius and this color.

The same instructions can be used to draw a small circle or a very large circle while preserving a perfectly smooth shape.

Raster Image              SVG Graphic
────────────              ───────────

Made of Pixels            Made of Shapes

Fixed Resolution          Mathematical Geometry

Zoom In → Pixelation      Zoom In → Sharp

Best for Photos           Best for Logos & Icons

SVG Element & Syntax

The <svg> element creates the drawing area for an SVG graphic.

Shape elements placed inside the <svg> element describe what the browser should draw.

<svg width="200" height="200">
    <!-- SVG shapes go here -->
</svg>

The width and height attributes define the displayed dimensions of the SVG drawing area.

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

SVG Coordinate System

SVG uses a two-dimensional coordinate system to position shapes.

The coordinate system begins at the top-left corner of the SVG drawing area.

The top-left position is represented by the coordinate (0, 0).

The X-axis increases as you move toward the right, while the Y-axis increases as you move downward.

(0,0) ───────────────────────→ X
  │
  │
  │          ● (100,100)
  │
  │
  │
  ▼
  Y

<svg width="250" height="250">
    <circle
        cx="100"
        cy="100"
        r="5"
        fill="red"
    />
</svg>

Common SVG Elements

SVG provides different elements for drawing different types of shapes and content.

Example 1: Drawing a Circle

The <circle> element draws a circle inside the SVG drawing area.

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

Example 2: Drawing a Rectangle

The <rect> element draws a rectangle or square.

<svg width="200" height="100">
    <rect
        x="10"
        y="10"
        width="180"
        height="80"
        fill="green"
    />
</svg>

Example 3: Drawing a Line

The <line> element draws a straight line between two coordinate points.

<svg width="200" height="100">
    <line
        x1="10"
        y1="10"
        x2="190"
        y2="90"
        stroke="black"
        stroke-width="2"
    />
</svg>

Example 4: Drawing an Ellipse

The <ellipse> element draws an oval shape.

Unlike a circle, an ellipse has separate horizontal and vertical radii.

<svg width="200" height="100">
    <ellipse
        cx="100"
        cy="50"
        rx="90"
        ry="40"
        fill="purple"
    />
</svg>

Example 5: Drawing a Polygon

The <polygon> element creates a closed shape by connecting multiple coordinate points.

The points attribute contains a sequence of X and Y coordinate pairs.

<svg width="200" height="200">
    <polygon
        points="
            100,10
            120,80
            190,80
            130,120
            150,190
            100,150
            50,190
            70,120
            10,80
            80,80
        "
        fill="gold"
    />
</svg>

The browser connects each coordinate pair to the next point and automatically closes the final shape.

Example 6: Adding Text

The <text> element displays text inside an SVG drawing area.

<svg width="200" height="100">
    <text
        x="40"
        y="60"
        fill="red"
        font-size="24"
    >
        Hello SVG
    </text>
</svg>

Complete SVG Example

Multiple SVG elements can be combined inside one drawing area to create a complete graphic.

<svg width="300" height="200">

    <rect
        x="10"
        y="10"
        width="280"
        height="180"
        fill="lightblue"
    />

    <circle
        cx="150"
        cy="100"
        r="50"
        fill="red"
    />

    <text
        x="150"
        y="105"
        fill="white"
        font-size="20"
        text-anchor="middle"
    >
        SVG Demo
    </text>

</svg>

Common SVG Attributes

SVG elements use attributes to control their dimensions, coordinates, colors, borders, and other visual properties.

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="70"
        fill="lightblue"
        stroke="navy"
        stroke-width="8"
    />
</svg>

SVG vs Normal Images

SVG and raster images solve different types of visual problems.

Browser Rendering Flow

When the browser encounters inline SVG markup, it reads the SVG elements and calculates how each shape should be drawn.

HTML Document
      │
      ▼
Find <svg>
      │
      ▼
Create Drawing Area
      │
      ▼
Read Shape Elements
      │
      ▼
Read Coordinates
      │
      ▼
Calculate Geometry
      │
      ▼
Apply Fill & Stroke
      │
      ▼
Draw Graphic
      │
      ▼
Display SVG

Real-World Applications

SVG is used throughout modern websites and web applications.

Advantages of SVG

SVG provides several important benefits for web graphics.

Common Beginner Mistakes

<!-- ❌ Circle center is outside the visible area -->

<svg width="200" height="200">
    <circle
        cx="500"
        cy="500"
        r="50"
        fill="red"
    />
</svg>


<!-- ✅ Circle is inside the visible area -->

<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="50"
        fill="red"
    />
</svg>

Best Practices

<svg
    viewBox="0 0 200 200"
    style="width: 100%; max-width: 400px; height: auto;"
    role="img"
    aria-label="Blue circle"
>
    <circle
        cx="100"
        cy="100"
        r="80"
        fill="blue"
    />
</svg>

Frequently Asked Questions

Key Takeaways

Summary

SVG stands for Scalable Vector Graphics and provides a way to create graphics using shapes, coordinates, and mathematical drawing instructions.

Unlike raster images such as JPG and PNG, SVG graphics are not built from a fixed grid of pixels.

Because the browser can recalculate vector geometry at different sizes, SVG graphics can remain sharp when enlarged or reduced.

The <svg> element creates the drawing area, and elements such as <circle>, <rect>, <line>, <ellipse>, <polygon>, and <text> create visual content inside it.

SVG uses a coordinate system that begins at the top-left corner, where positive X values move right and positive Y values move downward.

Different shape elements use different attributes to define their positions and dimensions.

The fill property controls the interior of a shape, while stroke and stroke-width control its outline.

Multiple SVG elements can be combined to create complete illustrations, diagrams, charts, and interface graphics.

The order of SVG elements matters because later elements can be painted above earlier elements.

The viewBox attribute is especially important for creating responsive SVG graphics with a consistent internal coordinate system.

SVG is widely used for company logos, interface icons, charts, maps, diagrams, educational graphics, dashboards, and interactive visualizations.

SVG can be styled with CSS, controlled with JavaScript, and animated to create dynamic visual experiences.

SVG should be used for graphics that benefit from vector scaling, while raster image formats remain more suitable for photographs and highly detailed pixel-based images.

By understanding SVG elements, coordinates, attributes, responsive scaling, accessibility, and optimization, developers can create sharp and flexible graphics for modern websites.

In the next lesson, you will learn about HTML Canvas and how JavaScript can be used to draw pixel-based graphics dynamically.