What are width, height, and viewBox on svg?

width and height set the displayed size. viewBox defines the internal coordinate system, letting SVG content scale responsively inside the box.

HTML <svg> Tag

Q: What is the HTML svg tag used for?

The svg tag embeds scalable vector graphics directly in HTML. Unlike raster images, SVG graphics stay sharp at any size and can be styled with CSS or animated.

Q: What is the difference between svg and img?

img displays raster images from a src file. svg contains vector markup as DOM elements, so it scales without quality loss and can be edited in code.

Q: Do I need JavaScript for inline SVG?

No. Basic shapes, paths, and text render without JavaScript. Use JavaScript only when you need dynamic updates or complex interactions.

Beginner

⏱️ 7 min read

📚 Updated: Jun 2026

🎯 3 Examples

Graphics

Overview

What You’ll Learn

The <svg> tag embeds scalable vector graphics in HTML. This guide covers syntax, shapes, icons, viewBox sizing, comparisons with img and canvas, accessibility, and best practices for beginners.

Inline SVG

Vector graphics in HTML markup.

Basic Shapes

Rectangles, circles, lines, paths.

Icons & Logos

Sharp graphics at any size.

viewBox Sizing

Responsive coordinate scaling.

svg vs img / canvas

Choose the right format.

Best Practices

Optimize, label, and test SVGs.

Fundamentals

What Is the `<svg>` Tag?

The <svg> tag is an HTML element used to embed scalable vector graphics directly into web pages. Unlike raster images (JPEG, PNG), SVG graphics are resolution-independent and stay sharp when scaled up or down.

✅

Valid HTML5 — Vector Graphics Container

SVG content is written as XML-like markup inside svg. Child elements such as rect, circle, and path become part of the DOM and can be styled with CSS.

Common uses include icons, logos, charts, diagrams, maps, and decorative illustrations. Because SVG is markup, it works well for responsive layouts and accessible graphics.

Foundation

📝 Syntax

Wrap your vector graphic content between opening and closing svg tags:

syntax.html

<svg width="100" height="100">
  <!-- Your SVG content here -->
</svg>

Rectangle and Circle Example

basic-shapes.html

<svg width="200" height="200" role="img" aria-label="Blue square and red circle">
  <rect width="100" height="100" fill="blue" />
  <circle cx="150" cy="150" r="50" fill="red" />
</svg>

Syntax Rules

In HTML5, xmlns is optional for inline SVG; it is required in standalone SVG files.
Child shape elements like rect and circle use XML-style self-closing tags.
Set width and height (or CSS) so the graphic has a visible box.
Use viewBox when you want internal coordinates to scale responsively.

Cheat Sheet

⚡ Quick Reference

Topic	Code Snippet	Notes
Basic container	`<svg>...</svg>`	Vector root
Size	`width="200" height="150"`	Display box
viewBox	`viewBox="0 0 200 150"`	Coordinate system
Rectangle	`<rect width="100" height="50" fill="blue"/>`	Basic shape
Circle	`<circle cx="50" cy="50" r="40"/>`	Basic shape
Accessibility	`role="img" aria-label="..."`	Screen readers

Comparison

⚖️ `<svg>` vs `<img>`

Feature	`<svg>`	`<img>`
Format	Vector markup (DOM)	Raster file (PNG, JPEG, WebP)
Scaling	Stays sharp at any size	Can pixelate when enlarged
Source	Inline markup or external .svg file	`src` attribute points to image file
Styling	CSS can target SVG elements	Limited to image-level CSS
Best for	Icons, logos, diagrams	Photos and complex bitmap art

Comparison

⚖️ `<svg>` vs `<canvas>`

Choose the right graphics technology for your project:

Feature	SVG	`<canvas>`
Type	Vector XML markup	Bitmap pixels
Drawing	Markup + optional JavaScript	JavaScript Canvas API required
Best for	Icons, logos, accessible diagrams	Games, dynamic charts, filters
Accessibility	Native DOM elements + ARIA	Needs `aria-label` and alternatives

Reference

🧰 Attributes

The <svg> element supports sizing, coordinate, and accessibility attributes plus global HTML attributes.

attributes.html

<svg width="200" height="150" viewBox="0 0 200 150" role="img" aria-label="Decorative chart">
  <!-- Your SVG content here -->
</svg>

width / height Sizing

Sets the displayed dimensions of the SVG viewport in CSS pixels.

width="200" height="150"

viewBox Scaling

Defines min-x, min-y, width, and height of the internal coordinate system.

viewBox="0 0 200 150"

role / aria-label A11y

Describe meaningful graphics for assistive technologies.

role="img" aria-label="Sales chart"

class / id Global

Hook for CSS to style the SVG container or child elements.

class="site-logo"

Try viewBox example

Hands-On

Examples Gallery

viewBox layouts, basic shapes, and icon-style graphics with copy-ready code and live previews.

👀 Live Preview

Inline SVG with rectangle and circle:

📚 Common Use Cases

Use <svg> for icons, logos, charts, diagrams, and any graphic that must scale cleanly across screen sizes.

viewBox and Coordinates

Control responsive scaling with viewBox while drawing shapes inside a fixed coordinate space:

viewbox-layout.html

<svg width="200" height="150" viewBox="0 0 200 150">
  <rect x="10" y="10" width="100" height="50" fill="skyblue" />
  <circle cx="150" cy="75" r="30" fill="orange" />
</svg>

Try It Yourself

Basic Shapes

The svg tag enables rectangles, circles, lines, and paths as a foundation for more complex graphics:

basic-shapes.html

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

Try It Yourself

Icons and Logos

SVGs are ideal for icons and logos because they remain sharp at any display size:

icons-and-logos.html

<svg width="100" height="100" role="img" aria-label="Red circle icon">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Try It Yourself

A11y

♿ Accessibility

Add meaningful labels — Use role="img" with aria-label or aria-labelledby for informative graphics.
Mark decorative SVGs — Use aria-hidden="true" when the graphic adds no information beyond decoration.
Provide text alternatives — Include visible captions or nearby text for charts and diagrams.
Keep contrast readable — Ensure stroke and fill colors meet contrast guidelines.

🧠 How <svg> Works

Author writes vector markup

Shapes and paths go inside the svg container with coordinates and styles.

Markup

Browser builds the graphic

The SVG viewport maps coordinates to pixels using width, height, and viewBox.

Render

Graphics scale cleanly

Vector paths stay sharp on retina displays and responsive layouts.

Crisp, scalable visuals

Icons, logos, and diagrams render sharply without extra image files.

Compatibility

Browser Support

The <svg> tag is fully supported in all modern browsers. Legacy Internet Explorer has partial limitations in older versions.

✓ Baseline · HTML5

Vector graphics everywhere

Modern browsers render inline SVG with full DOM access and CSS styling.

95% Core tag support

Google Chrome Fully supported

Full support

Mozilla Firefox Fully supported

Full support

Apple Safari Fully supported

Full support

Microsoft Edge Fully supported

Full support

Internet Explorer IE 9+ · Partial

Partial support

Opera Fully supported

Full support

<svg> tag 95% supported

Bottom line: Use <svg> confidently in modern browsers; test legacy IE if you still support it.

Wrap Up

Conclusion

The HTML <svg> tag lets you integrate scalable vector graphics directly into your pages with clarity and flexibility. Understanding syntax, viewBox, accessibility, and optimization helps you build sharp icons, logos, and diagrams for any screen size.

View Examples Gallery Try viewBox example

Pro Tips

💡 Best Practices

✅ Do

Optimize SVGs by removing unnecessary metadata and comments
Minify SVG code to reduce file size in production
Add role="img" and aria-label for meaningful graphics
Use viewBox for responsive scaling

❌ Don’t

Embed huge unoptimized SVG files inline on every page
Skip accessibility labels on informative charts or icons
Use SVG for detailed photographs (use img instead)
Assume all legacy browsers support every advanced SVG feature

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<svg>`

Bookmark these before you add vector graphics to your pages.

Core concepts

🎨 01

Vector

Scales without blur.

Purpose

■ 02

Shapes

rect, circle, path.

Markup

📏 03

viewBox

Responsive coords.

Sizing

⚖️ 04

vs img / canvas

Right tool choice.

Comparison

♿ 05

aria-label

Accessible graphics.

A11y

🌐 06

Modern Support

All major browsers.

Compatibility

❓ Frequently Asked Questions

What is the HTML svg tag used for?

It embeds scalable vector graphics in HTML. SVG stays sharp at any size and can be styled with CSS.

What is the difference between svg and img?

img shows raster files via src. svg contains vector markup that scales without quality loss.

What are width, height, and viewBox?

width and height set display size. viewBox defines the internal coordinate system for responsive scaling.

Do I need JavaScript for inline SVG?

No. Basic shapes render without JavaScript. Use JS only for dynamic drawing or interactions.

Is svg supported in all browsers?

Yes in all modern browsers. Legacy Internet Explorer versions have partial limitations.

Draw scalable graphics

Practice <svg> shapes, viewBox, and icons in the Try It editor.

Try viewBox example →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML sup Tag HTML table Tag

HTML <svg> Tag

What You’ll Learn

Inline SVG

Basic Shapes

Icons & Logos

viewBox Sizing

svg vs img / canvas

Best Practices

What Is the <svg> Tag?

📝 Syntax

Rectangle and Circle Example

Syntax Rules

⚡ Quick Reference

⚖️ <svg> vs <img>

⚖️ <svg> vs <canvas>

🧰 Attributes

Examples Gallery

👀 Live Preview

📚 Common Use Cases

viewBox and Coordinates

Basic Shapes

Icons and Logos

♿ Accessibility

🧠 How <svg> Works

Author writes vector markup

Browser builds the graphic

Graphics scale cleanly

Crisp, scalable visuals

Browser Support

Vector graphics everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <svg>

Vector

Shapes

viewBox

vs img / canvas

aria-label

Modern Support

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML sup Tag

HTML table Tag

HTML img Tag

HTML canvas Tag

Draw scalable graphics

About the author

What Is the `<svg>` Tag?

⚖️ `<svg>` vs `<img>`

⚖️ `<svg>` vs `<canvas>`

Six truths every developer should know about `<svg>`