SVG: Scalable Vector Graphics & Infinite Resolution
SVG (Scalable Vector Graphics) is an XML-based vector image format developed by W3C, enabling infinite-resolution graphics, native interactivity, CSS styling, and direct DOM manipulation. Unlike raster formats (JPEG, PNG), SVG describes images mathematically using paths, shapes, and curves, making it ideal for logos, icons, charts, diagrams, and responsive web design.
Core SVG Concepts
SVG uses vector primitives instead of pixels:
Basic Shapes
<rect>: rectangles with optional rounded corners (rx, ry)<circle>: circles with radius attribute (r)<ellipse>: ellipses with x/y radii (rx, ry)<line>: straight lines between two points<polyline>: connected series of lines<polygon>: closed polyline (polygon shape)<path>: complex curves using Bezier commands (M, L, C, Q, A, Z)
Path Data Language
- M (moveto): move drawing cursor
- L (lineto): draw straight line
- C (cubic bezier): smooth curves with control points
- Q (quadratic bezier): parabolic curves
- A (arc): circular arcs
- Z (closepath): close path with straight line
Example: <path d="M100,100 L200,200 C300,300 400,200 500,100" stroke="black" fill="none"/>
Text & Fonts
<text>: renders text with font family, size, color- Fonts: system fonts or embedded font families
- Text on path:
<textPath>to render text along curved path
Scaling & Resolution Independence
SVG's fundamental advantage is infinite scalability:
Mathematical Representation
- Image defined by equations, not pixels
- Scaling to any size: vector remains sharp (no pixelation)
- File size independent of resolution
- Logo at 16px or 1600px: same file size, same quality
Viewbox & Aspect Ratio
viewBox="0 0 100 100": defines coordinate systemwidth="200" height="200": rendered size on page- SVG automatically scales viewBox to fit rendered dimensions
- Aspect ratio:
preserveAspectRatiocontrols fit behavior
Example Scaling
- PNG logo 200×200px: 15 KB
- Same logo scaled to 400×400px PNG: pixelated or requires new export
- Same logo as SVG: scales infinitely, same 5 KB file
- Responsive: one SVG file scales to mobile, tablet, desktop perfectly
CSS Styling & Interactivity
SVG elements can be styled with CSS and manipulated with JavaScript:
CSS Properties
fill: color inside shapestroke: outline colorstroke-width: outline thicknessopacity: transparency (0-1)transform: rotate, scale, skew- Gradients:
<linearGradient>,<radialGradient>for complex fills - Filters: blur, drop shadow, color manipulation
Interactivity
<svg>
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>
<script>
document.querySelector('circle').addEventListener('click', () => {
alert('Clicked!');
});
</script>
SVG elements are direct DOM nodes—can be selected, styled, and event-handled like HTML elements. This enables:
- Hover effects (
:hoverCSS or JavaScript) - Animation (CSS animation, SVG
<animate>element, JavaScript) - Dynamic updates (redraw on data change)
- Form interactivity (buttons, sliders, input fields in SVG)
Animation & Interaction
SVG Native Animation
<circle cx="50" cy="50" r="40" fill="red">
<animate attributeName="r" from="40" to="100" dur="2s" repeatCount="indefinite"/>
</circle>
CSS Animation
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
circle { animation: rotate 2s infinite; }
JavaScript Animation
let angle = 0;
setInterval(() => {
circle.setAttribute('transform', `rotate(${angle})`);
angle += 5;
}, 16); // 60 FPS
File Size & Compression
Uncompressed SVG
- Typical logo: 2-5 KB (path data + styling)
- Complex chart: 20-100 KB
- Animated graphic: 50-200 KB
SVGZ (Gzip Compression)
- Gzip compresses SVG 60-80% (text format compresses well)
- Logo 5 KB SVG → 1.5 KB SVGZ
- Server must set
Content-Encoding: gzipandContent-Type: image/svg+xml - Browser decompresses transparently
Minification
- Remove whitespace, comments, unnecessary attributes
- Example:
<circle cx="50" cy="50" r="40" fill="red"/>→<circle cx="50" cy="50" r="40" fill="red"/> - Savings: 10-30% (whitespace, decimals)
File Size Comparison
- PNG logo (200×200px): 10-15 KB
- WebP logo: 5-8 KB
- SVG logo: 2-4 KB (uncompressed), 1-2 KB (SVGZ)
- SVG wins for most graphics
Use Cases
Web Icons & Logo
- Single SVG file scales to favicon, mobile app icon, banner logo
- Example: Material Design Icons (4000+ open-source SVG icons, <1 KB each)
Data Visualization & Charts
- D3.js, Chart.js leverage SVG for interactive charts
- Responsive: redraws on window resize or data update
- JavaScript can update SVG DOM directly for real-time data
Illustrations & Diagrams
- Illustrators export SVG from Adobe Illustrator, Inkscape, Figma
- Infinitely scalable, perfect for responsive design
- Can be animated with CSS/JavaScript for interactive tutorials
Responsive Web Design
- Single SVG serves all screen sizes (mobile, tablet, desktop)
- No asset duplication (vs. raster formats requiring multiple resolutions)
- Reduces HTTP requests and bandwidth
Animated UI Elements
- Loading spinners, progress indicators, animated buttons
- CSS animation or SVG
<animate>for smooth effects - Lightweight and performant (native rendering, no JavaScript overhead)
Browser Support & Limitations
Modern Support
- Chrome/Firefox/Edge/Safari: 100% SVG support (2024)
- IE11: Limited SVG support (basic shapes work, some filters fail)
- Mobile browsers: 100% support
Limitations
- Text rendering: SVG text not indexed by search engines (use
<title>and<desc>for accessibility) - Complex filters: performance overhead on large documents
- Rasterization: converting SVG to PNG/JPEG still required for fallback (email clients, legacy browsers)
- File size trade-off: simple shapes better as SVG, photorealistic images better as JPEG/WebP
Best Practices
- Use semantic shapes: prefer
<rect>,<circle>over<path>when possible (smaller file) - Minify output: remove whitespace, decimals (3.5000000 → 3.5)
- Embed vs. Link:
<img src="logo.svg">,<svg>...</svg>, or<object>depending on use case - SVGZ compression: Gzip SVG on server for 60-80% size reduction
- Responsive viewBox: use viewBox and CSS max-width for scaling
- Accessibility: include
<title>and<desc>for screen readers - Optimize paths: reduce decimal precision to 1-2 digits
SVG is essential for modern responsive design, replacing raster graphics for icons, logos, diagrams, and scalable interface elements.
Related conversions
Most teams that read this guide convert images in one of these directions: