SVG in HTML

SVG in HTML is used to create scalable vector graphics directly inside a web page. SVG stands for Scalable Vector Graphics. Unlike bitmap images made from pixels, SVG graphics are made from shapes, paths, text, and coordinates. This means they can scale up or down without becoming blurry.

SVG is commonly used for icons, logos, diagrams, charts, illustrations, interface graphics, loaders, badges, simple animations, and technical drawings. It works well when the graphic should stay sharp at different sizes, including high-DPI screens and responsive layouts.

Basic Syntax of SVG in HTML

SVG can be written directly in HTML using the <svg> element. Inside it, you can add shapes such as rectangles, circles, lines, paths, polygons, and text.

<svg width="300" height="160" viewBox="0 0 300 160">
  <rect x="20" y="20" width="120" height="80" fill="#2c8ffa" />
  <circle cx="210" cy="60" r="40" fill="#111160" />
</svg>

This creates a rectangle and a circle. The SVG element defines the drawing area, and each child element creates a vector shape. Because these are real SVG elements, they can be styled, selected, and manipulated.

SVG viewBox

The viewBox attribute is one of the most important parts of SVG. It defines the internal coordinate system of the graphic. A viewBox with 0 0 300 160 means the coordinate system starts at x 0, y 0, has width 300, and height 160.

<svg viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" />
</svg>

The viewBox allows the SVG to scale cleanly. The internal circle remains based on a 100 by 100 coordinate system, even if the SVG is displayed at 200 by 200 pixels or any other size.

Common SVG Shapes

Element	Purpose	Example
<rect>	Rectangle or square	Buttons, bars, blocks
<circle>	Circle	Dots, icons, markers
<ellipse>	Oval shape	Badges, diagrams
<line>	Straight line	Connectors, axes
<polyline>	Connected line points	Graphs, routes
<polygon>	Closed multi-point shape	Stars, triangles
<path>	Custom complex shape	Icons, logos

Rectangle and Circle Example

Rectangles and circles are simple and useful for learning SVG coordinates. A rectangle uses x, y, width, and height. A circle uses center coordinates and radius.

<svg viewBox="0 0 240 120" width="240" height="120">
  <rect x="10" y="20" width="100" height="60" rx="8" fill="orange" />
  <circle cx="170" cy="50" r="35" fill="green" />
</svg>

The rx attribute rounds the rectangle corners. SVG shape attributes are very readable for simple graphics, which makes SVG good for diagrams and UI icons.

SVG Path

The <path> element is the most flexible SVG shape. It uses a d attribute with path commands. Paths can create icons, curves, complex logos, waves, arrows, and custom illustrations.

<svg viewBox="0 0 100 100" width="120" height="120">
  <path d="M 50 10 L 90 90 L 10 90 Z" fill="#111160" />
</svg>

In this path, M moves to a starting point, L draws lines, and Z closes the shape. Path syntax can become complex, but vector design tools often generate it automatically.

Inline SVG vs Image SVG

SVG can be used inline inside HTML or loaded as a separate image file. Inline SVG gives more control because CSS and JavaScript can target the internal shapes. External SVG files are cleaner when the graphic is reused many times.

Method	Example	Best Use
Inline SVG	<svg>...</svg>	Interactive icons, styled diagrams
Image tag	<img src="icon.svg">	Simple reusable images
CSS background	background-image: url(icon.svg)	Decorative graphics
Object/embed	Loads SVG document	Less common specialized cases

If the SVG is just a static logo or icon, using an image file may be enough. If you need to animate parts, change colors with CSS, or attach events to shapes, inline SVG is usually better.

Styling SVG with CSS

SVG shapes can be styled with attributes or CSS. Common styling properties include fill, stroke, stroke-width, opacity, and transforms.

<svg class="icon" viewBox="0 0 100 100">
  <circle class="icon-bg" cx="50" cy="50" r="40" />
</svg>

<style>
  .icon-bg {
    fill: #2c8ffa;
    stroke: #111160;
    stroke-width: 4;
  }
</style>

CSS styling is especially useful for icon systems because the same SVG can adapt to themes, hover states, active states, and brand colors.

SVG Text

SVG can render text with the <text> element. This is useful for labels in diagrams, charts, badges, and generated graphics. However, normal HTML text is usually better for long readable content.

<svg viewBox="0 0 300 100" width="300" height="100">
  <text x="20" y="60" font-size="32" fill="#111160">
    SVG in HTML
  </text>
</svg>

SVG text can scale with the graphic, but accessibility and font rendering should be considered. For normal paragraphs, headings, and article content, use regular HTML text instead.

SVG Accessibility

SVG accessibility depends on how the graphic is used. Informative SVGs should have a title, description, or accessible label. Decorative SVGs should be hidden from assistive technologies when they add no useful meaning.

<svg role="img" aria-labelledby="chart-title chart-desc" viewBox="0 0 200 100">
  <title id="chart-title">Sales chart</title>
  <desc id="chart-desc">Bar chart showing higher sales in March.</desc>
  <rect x="20" y="50" width="40" height="40" />
  <rect x="80" y="30" width="40" height="60" />
</svg>

For decorative SVG icons, use aria-hidden="true" and make sure the related button or link still has a clear accessible name.

SVG Animation

SVG can be animated with CSS or JavaScript. Simple hover effects and transitions can be done with CSS. More complex animations can use JavaScript or animation libraries.

svg circle {
  transition: fill 0.3s ease;
}

svg:hover circle {
  fill: #00bf63;
}

Animation should be used carefully. Respect reduced motion preferences and avoid unnecessary movement that distracts from content.

Responsive SVG

SVG is naturally good for responsive design when the viewBox is set correctly. You can control the displayed size with CSS while the vector graphic stays sharp. A common pattern is to set width to 100 percent and height to auto.

svg {
  width: 100%;
  height: auto;
}

The viewBox keeps the internal proportions stable. Without a proper viewBox, responsive scaling becomes harder and the SVG may not behave as expected in flexible layouts.

Using SVG Icons

SVG is a strong choice for icon systems. Icons can use currentColor so they inherit text color from CSS. This makes icons easy to theme and keeps them consistent with buttons, links, and navigation items.

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <path fill="currentColor" d="M12 2 L20 20 H4 Z" />
</svg>

For decorative icons next to visible text, hide the SVG with aria-hidden="true". For icon-only buttons, the button itself needs an accessible name such as an aria-label.

Optimizing SVG

Design tools often export SVG with extra metadata, editor-specific attributes, hidden layers, comments, and unnecessary decimals. Optimizing SVG can reduce file size and make the markup easier to maintain. Tools such as SVGO are commonly used for this in frontend workflows.

Do not over-optimize manually if it breaks the graphic. Keep important ids, labels, gradients, masks, and accessibility elements when they are needed. The goal is clean SVG, not unreadable or broken SVG.

When SVG Is Not the Best Choice

SVG is not ideal for every image. Photographs, screenshots, detailed textures, and complex raster artwork are usually better as JPG, PNG, or WebP. Converting a photo to SVG can create a huge file with poor performance and no real benefit.

Use SVG when the image is made from shapes, lines, icons, labels, or simple illustrations. Use raster formats when the image is pixel-based. Choosing the right format keeps pages faster, cleaner, sharper, and easier to maintain.

That decision matters on real production websites today for users.

SVG vs Canvas

Feature	SVG	Canvas
Graphic type	Vector elements	Bitmap drawing surface
Scaling	Sharp at any size	Can blur if scaled incorrectly
DOM access	Shapes are elements	Drawn pixels are not elements
Best for	Icons, diagrams, UI graphics	Games, simulations, image processing
Events	Can attach to shapes	Must calculate hit areas manually

Choose SVG for scalable interface graphics, icons, diagrams, and shapes that need styling or interaction. Choose canvas for fast pixel drawing, image manipulation, and frequent redraws.

SVG Security Notes

SVG files can contain scripts, external references, and complex markup depending on how they are created. Be careful when accepting SVG uploads from users. Many websites restrict SVG uploads or sanitize SVG files before using them.

If the SVG comes from a trusted design workflow, it is usually fine. If the SVG comes from unknown users, treat it as potentially unsafe and sanitize it. This is especially important in CMS platforms and public upload forms.

Common SVG Mistakes

• Forgetting viewBox and making SVG hard to scale.
• Using SVG for large photo-like images where JPG or PNG is better.
• Adding complex inline SVG that makes HTML hard to maintain.
• Forgetting accessible names for informative SVGs.
• Using untrusted SVG uploads without sanitizing.
• Choosing canvas when SVG element interaction would be simpler.

SVG in HTML is one of the best tools for sharp, scalable, lightweight graphics. Use it for icons, diagrams, logos, simple illustrations, and interactive vector elements. Keep the viewBox correct, choose inline or external SVG based on control needs, and handle accessibility and security carefully.

Can SVG be written directly in HTML?

Yes. Inline SVG can be written directly with the svg element and shape elements inside HTML.

Is SVG better than PNG?

SVG is better for scalable vector graphics such as icons and diagrams. PNG is better for pixel-based images, screenshots, and detailed raster artwork.

---