HTML SVG
In this page:
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.
Warning: Avoid using SVG for complex photographic content, as it will result in massive, slow-loading files.
Example: What is SVG?
<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.
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)
<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.
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
<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
<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
<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.
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)
<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.
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
<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
<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)
<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>- Using standard CSS color properties (like color) instead of fill and stroke to color your SVG shapes.
- Attempting to style individual shapes inside an SVG loaded through a standard img tag.
- Forgetting to specify a viewBox attribute, which prevents your responsive SVGs from scaling proportionally.
- 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.
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: