What is HTML SVG?
SVG (Scalable Vector Graphics) is an XML-based markup language for describing two-dimensional vector graphics. Unlike raster image formats such as PNG or JPEG, SVG images are defined mathematically using shapes, paths, and curves—meaning they scale infinitely without losing quality. In modern web applications, SVG can be embedded directly into HTML documents using the <svg> element, treating it as a first-class citizen of the DOM alongside HTML, CSS, and JavaScript.
An SVG element inside HTML is not merely an image—it is a live, interactive document fragment. You can style it with CSS, manipulate it with JavaScript, animate it with SMIL or CSS animations, and even make it accessible to screen readers. This tight integration makes SVG a powerful tool in the modern web developer's toolkit.
A Basic Example
Here is a simple SVG circle embedded directly in HTML:
<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="coral" stroke="navy" stroke-width="4" />
</svg>The viewBox attribute defines the internal coordinate system. The circle's center is at (100, 100) with a radius of 80, all within a 200×200 viewport. The xmlns attribute is required for inline SVG in HTML to ensure the browser treats it as SVG rather than generic XML.
Why SVG Matters in Modern Web Applications
🚀 Deploy your AI agent in 10 minutes
Managed Hermes hosting. Zero DevOps. 100M tokens/mo included.
Try it free →Modern web applications demand responsive, high-performance, and visually crisp interfaces across a multitude of devices and screen densities. SVG delivers on all these fronts:
Resolution Independence
On retina displays and high-DPI screens, raster images often appear blurry unless served at multiple resolutions. SVG renders sharply at any zoom level or pixel density because it is resolution-independent by nature.
Small File Sizes for Complex Graphics
Logos, icons, charts, and diagrams expressed as SVG are often dramatically smaller than their raster counterparts, especially when the graphics consist of geometric shapes rather than photographic imagery. Gzip compression further reduces SVG file sizes, as XML compresses extremely well.
Full DOM Integration
Inline SVG becomes part of the HTML document tree. You can attach event listeners, update attributes in real time, and use CSS selectors to style individual parts of a graphic. This opens up possibilities for interactive data visualizations, animated UI components, and theme-aware icon systems.
Animation and Interactivity
SVG supports declarative animations through both SMIL (<animate>, <animateTransform>) and CSS @keyframes. Combined with JavaScript, you can create rich, performant animations that respond to user input, data changes, or application state.
Accessibility
Because SVG elements can carry semantic metadata like <title> and <desc>, and because they are DOM nodes, they can be made accessible to screen readers. This is a significant advantage over raster images, which require separate alt text handling.
How to Use SVG in Modern Web Applications
1. Inline SVG
Inline SVG is the most powerful approach. You place the SVG markup directly inside your HTML. This gives you complete control over styling, scripting, and animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline SVG Example</title>
<style>
.icon { width: 48px; height: 48px; }
.icon path { fill: currentColor; }
.icon:hover { transform: scale(1.2); transition: transform 0.2s; }
</style>
</head>
<body>
<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Heart icon</title>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5
2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09
C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5
c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
fill="red" />
</svg>
<p>The heart icon above is an inline SVG styled with CSS.</p>
</body>
</html>Notice the use of currentColor in the CSS—this allows the SVG to inherit the text color of its parent, making it easy to integrate into existing color schemes. The <title> element provides accessible text for screen readers.
2. External SVG Referenced via <img> or <object>
For static graphics that don't need DOM manipulation, referencing an external SVG file via <img> is straightforward and benefits from browser caching:
<img src="icons/logo.svg" alt="Company logo" width="120" height="40" />However, SVGs loaded through <img> cannot be styled from the parent document's CSS, nor can they be scripted. If you need limited interactivity but still want an external file, use <object>:
<object type="image/svg+xml" data="interactive-map.svg" width="600" height="400">
<p>Your browser does not support SVG.</p>
</object>SVGs loaded via <object> have their own document context, which means you can embed a <style> block or script inside the SVG file itself.
3. SVG as CSS Background Image
SVG works beautifully as a background image in CSS, often used for decorative elements or icons:
.checkmark-bg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%234CAF50'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}Data URIs embed the SVG directly in CSS. For production, you can URL-encode the SVG string or use a build tool to inline it automatically.
4. SVG Sprites for Icon Systems
A powerful pattern for icon systems is to define all icons in a hidden SVG sprite sheet and reference individual icons via <use>:
<!-- Hidden sprite sheet -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<defs>
<g id="icon-search">
<circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2"/>
<line x1="15" y1="15" x2="20" y2="20" stroke="currentColor" stroke-width="2"/>
</g>
<g id="icon-user">
<circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
<path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2"/>
</g>
</defs>
</svg>
<!-- Reference icons anywhere in the document -->
<svg class="icon" width="24" height="24">
<use href="#icon-search"></use>
</svg>
<svg class="icon" width="24" height="24">
<use href="#icon-user"></use>
</svg>The <use> element clones the referenced graphic. Styling via CSS works on the cloned elements, but note that styles defined on the original <g> element cascade down. Using currentColor for stroke and fill allows the icons to inherit color from the referencing SVG's color property.
5. Styling SVG with CSS
SVG elements accept a subset of CSS properties that closely mirrors standard HTML styling, plus SVG-specific properties:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<style>
.my-rect {
fill: var(--primary-color, dodgerblue);
stroke: navy;
stroke-width: 3;
transition: fill 0.3s ease;
}
.my-rect:hover {
fill: var(--hover-color, coral);
}
.my-text {
font-family: 'Inter', sans-serif;
font-size: 14px;
fill: white;
text-anchor: middle;
dominant-baseline: middle;
}
</style>
<rect class="my-rect" x="10" y="10" width="80" height="80" rx="8" />
<text class="my-text" x="50" y="50">SVG</text>
</svg>CSS custom properties (var(--primary-color)) work seamlessly inside SVG, enabling theming. The text-anchor and dominant-baseline properties control text alignment within SVG text elements.
6. Animating SVG
You can animate SVG elements using CSS animations or SMIL. CSS animations are generally preferred for their performance and familiarity:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
@keyframes pulse {
0%, 100% { r: 20; fill: dodgerblue; }
50% { r: 30; fill: coral; }
}
.pulsing-circle {
animation: pulse 2s ease-in-out infinite;
}
@keyframes dash {
to { stroke-dashoffset: 0; }
}
.drawing-path {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 3s linear forwards;
}
</style>
<circle class="pulsing-circle" cx="100" cy="80" r="20" />
<path class="drawing-path"
d="M20,150 C50,100 150,100 180,150"
fill="none" stroke="navy" stroke-width="3"
stroke-linecap="round" />
</svg>The stroke-dasharray / stroke-dashoffset trick creates a "drawing" effect, where the path appears to be traced out over time. This is a classic SVG animation technique that works beautifully for line-drawing reveals.
7. Interactive SVG with JavaScript
Since inline SVG is part of the DOM, you can attach event listeners and manipulate attributes directly:
<svg id="interactive-chart" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
<rect x="30" y="80" width="40" height="100" fill="#3498db" class="bar"></rect>
<rect x="80" y="50" width="40" height="130" fill="#3498db" class="bar"></rect>
<rect x="130" y="30" width="40" height="150" fill="#3498db" class="bar"></rect>
<rect x="180" y="60" width="40" height="120" fill="#3498db" class="bar"></rect>
<rect x="230" y="20" width="40" height="160" fill="#3498db" class="bar"></rect>
<text x="200" y="190" text-anchor="middle" font-size="14" fill="#333">Click a bar</text>
</svg>
<script>
document.querySelectorAll('.bar').forEach(bar => {
bar.addEventListener('click', function() {
const currentHeight = parseFloat(this.getAttribute('height'));
const newHeight = currentHeight === 160 ? 100 : currentHeight + 20;
this.setAttribute('height', newHeight);
this.setAttribute('y', 180 - newHeight);
this.style.fill = newHeight > 130 ? '#e74c3c' : '#3498db';
});
bar.addEventListener('mouseenter', function() {
this.style.opacity = '0.7';
});
bar.addEventListener('mouseleave', function() {
this.style.opacity = '1';
});
});
</script>This creates a simple interactive bar chart where clicking a bar changes its height and color, and hovering adjusts opacity. The SVG attributes height and y are updated to keep the bar anchored at the bottom.
8. Responsive SVG
Making SVG responsive involves setting the viewBox and allowing the width/height to scale with the container. The most robust approach uses CSS:
.responsive-svg {
width: 100%;
height: auto;
max-width: 600px; /* optional constraint */
}
/* For SVGs that should preserve aspect ratio */
.responsive-svg-preserve {
width: 100%;
height: auto;
}
Apply the class to the SVG element. The viewBox handles the internal scaling, while CSS controls the external dimensions:
<svg class="responsive-svg" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="800" height="600" fill="#f0f0f0" />
<circle cx="400" cy="300" r="200" fill="steelblue" />
<text x="400" y="310" text-anchor="middle" font-size="48" fill="white">Responsive</text>
</svg>The SVG will now scale fluidly within its parent container while maintaining the aspect ratio defined by the viewBox dimensions.
Best Practices for SVG in Modern Web Apps
1. Optimize SVG Files Before Deployment
SVG files from design tools often contain unnecessary metadata, editor-specific namespaces, and verbose path data. Use tools like SVGO (SVG Optimizer) to strip extraneous data and reduce file size. Integrate SVGO into your build pipeline:
// Example SVGO configuration in a Node.js build script
const optimize = require('svgo');
// Configure with plugins like removeDoctype, removeComments,
// removeMetadata, removeUnusedDefs, cleanupNumericValues
2. Use viewBox, Not Fixed width/height Internally
Always define a viewBox on your root SVG element. Avoid hardcoding pixel-based width and height attributes inside the SVG unless you specifically need fixed dimensions. Let CSS handle the external sizing for maximum flexibility.
3. Leverage currentColor for Theming
Design icon SVGs using currentColor for fill and stroke values. This allows a single SVG to adapt to any color context simply by setting the CSS color property on the parent element or the SVG itself.
4. Provide Accessible Metadata
Include <title> and <desc> elements for meaningful graphics. Use aria-label or role="img" on decorative SVGs. For complex data visualizations, provide a text alternative adjacent to the SVG:
<svg role="img" aria-labelledby="chart-title chart-desc" viewBox="0 0 400 200">
<title id="chart-title">Quarterly Revenue Chart</title>
<desc id="chart-desc">Bar chart showing revenue increasing from Q1 to Q4</desc>
<!-- chart elements -->
</svg>5. Keep SVG Structure Clean and Semantic
Use meaningful IDs, group related elements with <g>, and structure your SVG logically. Avoid deeply nested transforms that make debugging difficult. Name your layers and groups so that inspecting the SVG in DevTools is intuitive.
6. Test Across Browsers and Assistive Technologies
While SVG support is excellent across modern browsers, rendering quirks still exist—especially with complex filters, foreignObject elements, or advanced SMIL animations. Test on Firefox, Chrome, Safari, and Edge. Verify accessibility with screen readers like VoiceOver and NVDA.
7. Consider External Sprite Sheets for Large Icon Libraries
For applications with dozens of icons, maintain a single external SVG sprite file. Cache it effectively, and reference icons with <use>. This keeps HTML clean and reduces duplication. Tools like svg-sprite-loader (for Webpack) can automate sprite generation.
8. Use CSS Custom Properties for Dynamic Styling
CSS custom properties penetrate SVG shadow DOM boundaries when using <use> in some browsers, but support varies. For maximum compatibility, style inline SVG directly with custom properties defined on the SVG element or an ancestor.
Conclusion
SVG has evolved from a niche vector format into a cornerstone of modern web development. Its seamless integration with HTML, CSS, and JavaScript makes it ideal for responsive icons, interactive data visualizations, animated UI elements, and accessible graphics. By understanding the fundamentals—inline embedding, the viewBox coordinate system, CSS styling, animation techniques, and the <use> sprite pattern—you unlock a versatile, performant graphics layer that works beautifully across devices and screen resolutions. The key takeaways are to optimize your SVG assets, keep them accessible, leverage currentColor and CSS custom properties for theming, and always test across browsers. With these practices in place, SVG becomes not just an image format but a dynamic, living part of your application's interface.