← Back to HTML Course | Chapter 6: Canvas, SVG & Media | Lesson 2 of 6

HTML SVG

Imagine drawing a smiley face on a standard rubber balloon. If you blow up the balloon to make it twice as big, your drawing will stretch, become blurry, and look pixelated. This is how standard image files (like JPEGs or PNGs) behave when zoomed. Now, imagine bending a piece of shiny copper wire to form that exact same smiley face. No matter how close you look, the wire lines remain perfectly sharp, smooth, and clean. This is exactly how HTML SVGs behave. SVG stands for Scalable Vector Graphics. Instead of storing images as dots of color, SVGs store images as mathematical coordinates, allowing your logos, icons, and illustrations to scale cleanly to any size without ever losing their sharp detail.

In this page:

  1. What is SVG?
  2. Drawing Basic Shapes (rect and circle)
  3. Drawing Complex Paths with path
  4. Styling SVG with CSS
  5. Inline vs. External SVG
  6. More SVG Shapes (line, polyline, polygon, ellipse)
  7. SVG Text Element
  8. SVG vs Canvas
  9. SVG Accessibility (title and desc)
Syntax
markup 
<svg width="width" height="height">
  <shape attribute="value" />
</svg>

What is SVG?

SVG (Scalable Vector Graphics) is an XML-based file format used to define vector graphics directly inside your HTML. Unlike raster images, SVGs scale flawlessly to any screen resolution and display zoom level without pixelating.

Note:
  • Use SVG for website logos, interface icons, and flat illustrations to keep them looking sharp on all devices.
  • Accepted attributes:
  • xmlns — http://www.w3.org/2000/svg (needed in standalone files)
  • width / height — size
  • viewBox — min-x min-y width height
  • preserveAspectRatio — xMidYMid meet | slice | none ...
Warning: Avoid using SVG for complex photographic content, as it will result in massive, slow-loading files.

Example: What is SVG?

markup 
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Drawing Basic Shapes (rect and circle)

SVG includes built-in element tags (like rect and circle) to draw basic shapes directly. You define their sizes, positions, and fill colors using standard XML attributes inside the tags.

Note:
  • Use cx and cy attributes on your circle tags to define their center coordinates, and r to define the radius.
  • Accepted attributes:
  • rect x, y, width, height — position and size
  • rect rx, ry — corner radii
  • circle cx, cy, r — center and radius
  • fill — color | none
  • stroke, stroke-width — outline color and width
Warning: Always declare your shape dimensions within the valid coordinate bounds of your parent svg tag to prevent them from getting cut off.

Example: Drawing Basic Shapes (rect and circle)

markup 
<svg width="120" height="120">
  <rect x="10" y="10" width="50" height="30" fill="red" />
  <circle cx="80" cy="80" r="20" fill="green" />
</svg>

Drawing Complex Paths with path

To draw custom shapes, curves, or advanced icons, you use the powerful path tag. The path tag uses a specialized d (data) attribute containing commands (like M for move-to, L for line-to, and Z to close-path) to trace complex lines.

Note:
  • Use an online vector editor (like Figma or Illustrator) to design your paths and copy the generated SVG code directly.
  • Accepted attributes:
  • d — path commands M L H V C S Q T A Z
  • fill — color | none
  • stroke — color
  • stroke-width — number
  • fill-rule — nonzero | evenodd
Warning: SVG path data is highly complex; trying to write long path coordinates by hand is tedious and error-prone.

Example: Drawing Complex Paths with path

markup 
<svg width="100" height="100">
  <path d="M10 10 L90 10 L50 90 Z" fill="orange" />
</svg>

Styling SVG with CSS

Because SVGs are treated as native HTML elements, you can easily style and animate their properties using standard CSS stylesheets or inline rules.

Instead of standard CSS styles, SVGs use specialized properties (like fill for color and stroke for borders).

Note: Use hover effects in your stylesheets to create interactive, color-changing navigation icons on your page.
Warning: Standard CSS color properties (like color) will not work on SVG shapes; you must use fill and stroke instead.

Example: Styling SVG with CSS

markup 
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" style="fill: purple; stroke: black;" />
</svg>

Inline vs. External SVG

You can embed SVG code directly into your HTML page (inline), or load it as an image file using the standard img tag. Inline SVG is interactive and styleable with CSS, while external SVG files keep your HTML code clean and leverage browser caching.

Note: Use inline SVG when you want to style or animate your icons, and use img tags for standard, static logo displays.
Warning: If you load an SVG using an img tag, you will not be able to style its individual shapes using your page's CSS stylesheet.

Example: Inline vs. External SVG

markup 
<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="blue" />
</svg>
<img src="icon.svg" alt="Icon">

More SVG Shapes (line, polyline, polygon, ellipse)

Beyond rect and circle, SVG offers line for straight segments, polyline for a series of connected straight lines, polygon for a closed shape made of straight lines, and ellipse for ovals with independently controlled horizontal and vertical radii.

Note:
  • Use polygon instead of manually drawing multiple line elements whenever you need a closed shape like a triangle or star.
  • Accepted attributes:
  • line x1, y1, x2, y2 — end points
  • polyline / polygon points — list of x,y pairs
  • ellipse cx, cy, rx, ry
  • fill / stroke / stroke-width
Warning: polyline and polygon coordinates are just space or comma separated x,y pairs — a single misplaced number shifts every point after it.

Example: More SVG Shapes (line, polyline, polygon, ellipse)

markup 
<svg width="150" height="100">
  <line x1="0" y1="0" x2="100" y2="0" stroke="black" />
  <polygon points="10,90 50,10 90,90" fill="teal" />
  <ellipse cx="120" cy="50" rx="20" ry="10" fill="pink" />
</svg>

SVG Text Element

The text element draws actual, selectable, searchable text inside an SVG image, positioned using x and y coordinates.

Unlike canvas text, SVG text remains part of the document, so it can be styled with CSS, selected by users, and read by screen readers.

Note:
  • Style SVG text with regular CSS font properties for consistency with the rest of your page's typography.
  • Accepted attributes:
  • x, y — text position
  • text-anchor — start | middle | end
  • font-size, font-family, fill
  • dominant-baseline — auto | middle | hanging
Warning: The y coordinate for SVG text refers to the baseline of the text, not the top, which can be confusing when first positioning text precisely.

Example: SVG Text Element

markup 
<svg width="150" height="50">
  <text x="10" y="30" font-size="20">Hello SVG</text>
</svg>

SVG vs Canvas

SVG describes shapes as elements in the document, which means each shape stays selectable, scriptable, and infinitely scalable without losing quality, but performance can suffer with thousands of elements.

Canvas is a single bitmap you draw pixels onto, which handles huge numbers of dynamic shapes efficiently but loses all individual shape information once drawn.

Note:
  • Choose SVG for icons, logos, charts, and anything that needs to scale perfectly or respond to individual clicks.
  • Choose canvas for games, complex animations, or image editing with many moving pieces.
Warning: Once something is drawn onto canvas, you cannot click on or restyle that specific shape anymore — you would have to track its coordinates and redraw everything yourself.

Example: SVG vs Canvas

markup 
<svg width="50" height="50">
  <circle cx="25" cy="25" r="20" fill="blue" />
</svg>
<canvas id="myCanvas" width="50" height="50"></canvas>

SVG Accessibility (title and desc)

Adding a title element as the first child of an svg gives screen readers a short accessible name for the graphic, similar to alt text on an image.

The desc element can provide a longer, more detailed description when the graphic conveys more complex information, like a chart.

Note: Always add a title element to meaningful SVG icons and illustrations, just as you would add alt text to an img.
Warning: An SVG with no title or desc and no aria-label is completely invisible and meaningless to screen reader users, even if it looks perfectly clear visually.

Example: SVG Accessibility (title and desc)

markup 
<svg width="100" height="100">
  <title>Company Logo</title>
  <desc>A blue circle representing our brand logo</desc>
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>
Live Example
Related Topics

HTML Canvas · HTML Media · HTML Video · HTML Audio

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using standard CSS color properties (like color) instead of fill and stroke to color your SVG shapes.
  2. Attempting to style individual shapes inside an SVG loaded through a standard img tag.
  3. Forgetting to specify a viewBox attribute, which prevents your responsive SVGs from scaling proportionally.
Chapter Summary
  • SVG defines vector graphics using mathematical coordinates, keeping your designs razor-sharp at any resolution.
  • Use built-in shapes (like rect and circle) or the powerful path tag to draw custom illustrations and icons.
  • Style inline SVGs cleanly using fill and stroke properties, or load them as static files using standard img tags.
Browser Support

Standard SVG elements and inline styling properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson HTML Canvas Next Lesson → HTML Media

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.