SVG Viewer & Editor

SVG (Scalable Vector Graphics) is an XML-based format for describing two-dimensional graphics. Unlike PNG or JPG, which store pixels, SVG describes shapes, paths, and text as mathematical vectors. This means SVGs scale infinitely without pixelation — a 100×100 SVG looks crisp at 1000×1000 or 10×10.

SVGs are ideal for logos, icons, charts, and UI elements. They're typically smaller than equivalent raster images for simple graphics, can be styled with CSS, animated with JavaScript, and edited in any text editor. All modern browsers render SVG natively.

Vector graphics have several advantages: scalability (no quality loss at any size), smaller file size for simple shapes, accessibility (text in SVG can be read by screen readers), and editability (change colors, dimensions, or paths without redrawing). SVGs also support transparency, gradients, and filters.

Raster formats (PNG, JPG) are better for photographs and complex imagery where vector representation would be impractical. Use SVG for UI elements, icons, and illustrations; use raster for photos and textures.

SVGs can be optimized by removing unnecessary metadata, comments, and redundant attributes. Use viewBox for responsive scaling. Prefer path elements over complex groups when possible. Minimize decimal precision in coordinates. Tools like SVGO can automate optimization.

When embedding SVGs in HTML, consider inline SVG for critical above-the-fold icons (avoids extra requests) or sprite sheets for many icons. For external files, ensure proper caching headers.

SVGs integrate seamlessly with web tech. Use <img src="file.svg"> for simple display, <object> or <iframe> for scripting access, or inline <svg> for full CSS/JS control. SVGs can be used as CSS backgrounds, in favicons, and as data URLs. They work with responsive images via srcset when exported to raster at different resolutions.