SVG: Scalable Vector Graphics & Infinite Resolution

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 system
• width="200" height="200": rendered size on page
• SVG automatically scales viewBox to fit rendered dimensions
• Aspect ratio: preserveAspectRatio controls 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 shape
• stroke: outline color
• stroke-width: outline thickness
• opacity: 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 (:hover CSS 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: gzip and Content-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

1. Use semantic shapes: prefer <rect>, <circle> over <path> when possible (smaller file)
2. Minify output: remove whitespace, decimals (3.5000000 → 3.5)
3. Embed vs. Link: <img src="logo.svg">, <svg>...</svg>, or <object> depending on use case
4. SVGZ compression: Gzip SVG on server for 60-80% size reduction
5. Responsive viewBox: use viewBox and CSS max-width for scaling
6. Accessibility: include <title> and <desc> for screen readers
7. 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:

• JPG to WEBP
• PNG to JPG
• HEIC to JPG
• PNG to WEBP
• TIFF to PNG
• RAW to JPG