SVG Files: A Complete Guide for Developers and Designers

SVG is one of those technologies that looks simple from the outside — it is just a drawing format, right? — but rewards deeper study more than almost any other format in a developer's or designer's toolkit. SVG files scale infinitely without any loss of quality, weigh almost nothing for simple graphics, can be styled with CSS, animated with JavaScript or CSS transitions, and embedded directly into HTML. Understanding SVG properly changes how you think about graphics on the web.

You can view, inspect, and optimize any SVG file using the BrowseryTools SVG Tool — free, no sign-up, everything runs in your browser.

What Is SVG?

SVG stands for Scalable Vector Graphics. Unlike JPEG, PNG, or WebP — which store images as grids of colored pixels (raster images) — SVG stores images as mathematical descriptions of shapes. A circle is described as a center point and a radius. A path is described as a sequence of drawing commands: move to this point, draw a line to that point, draw a curve through these control points, close the path.

SVG is an XML-based format, meaning every SVG file is plain text, human-readable, and structured as a tree of nested elements. Open any SVG in a text editor and you see legible markup, not a binary blob. This has significant practical consequences: SVG files can be generated programmatically, modified with text-processing tools, diffed in version control, and embedded directly into HTML without any additional processing.

The format is a W3C standard, maintained alongside HTML and CSS. Every modern browser has a full SVG rendering engine built in.

Why SVG Beats Raster for Icons and Illustrations

The decisive advantage of SVG over raster formats for icons, logos, and illustrations is resolution independence. A raster icon created at 32×32 pixels will look blurry on a Retina display, which renders at 2× or 3× physical pixels per CSS pixel. To fix this, you either need to export multiple resolution variants (@1x, @2x, @3x), increase the source resolution (larger files, more memory), or use image-set in CSS to serve the right resolution. With SVG, you create the graphic once and it looks perfect at every size, on every display, forever.

File size is the other major advantage for simple graphics. A simple icon — a checkmark, an arrow, a hamburger menu — might be described in an SVG file using 200–500 bytes. The equivalent PNG at 2× Retina resolution might be 2–5 KB. At 3×, larger still. When an interface has 50 icons, the difference between 50 optimized SVGs (totaling ~20 KB) and 50 PNG sets (totaling ~300+ KB) is meaningful.

Raster images win for photographic content and complex, highly detailed illustrations with smooth gradients and textures. A vector SVG of a photograph would be enormous and would look stylized rather than photographic. The right format depends entirely on the nature of the content.

SVG Anatomy: The Core Elements

A minimal SVG file has this structure:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#3b82f6" />
  <path d="M8 12 L12 16 L16 8" stroke="white" stroke-width="2" fill="none" />
</svg>

The key elements and attributes to understand:

• viewBox — Defines the internal coordinate system. viewBox="0 0 24 24" means the drawing space spans from (0,0) to (24,24). The SVG can then be rendered at any actual size — 16×16, 32×32, 200×200 — and the browser scales the coordinate system to fit. This is the mechanism behind resolution independence.
• path — The most powerful SVG element. A d attribute contains drawing commands: M (move to), L (line to), C (cubic bezier curve), A (arc), Z (close path). Almost any shape can be expressed as a path.
• circle, rect, ellipse, line, polygon — Convenience elements for common shapes. A <circle> takes cx, cy, and r. A <rect> takes x, y, width, and height, plus optional rx for rounded corners.
• text — SVG can render typographic text that scales with the image and remains selectable and accessible, unlike text rendered into a raster image.
• g (group) — Groups child elements together so transforms, styles, and opacity can be applied to the entire group at once.
• defs and use — Define reusable elements once and reference them multiple times with <use>. Essential for icon systems that use a single SVG sprite.

Styling SVG with CSS and Animating It

SVG elements are part of the DOM when SVG is inlined in HTML. This means CSS can target them directly using all the same selectors used for HTML elements. You can change fill colors, stroke widths, and opacity on hover, in dark mode, or in response to any state change:

/* Target SVG elements with CSS */
.icon-check circle {
  fill: #22c55e;
  transition: fill 0.2s ease;
}

.icon-check:hover circle {
  fill: #16a34a;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .icon-check circle { fill: #4ade80; }
}

CSS animations and transitions work on SVG properties. The stroke-dasharray and stroke-dashoffset trick — animating a path from invisible to visible by manipulating how much of a dashed stroke is shown — creates the "drawing" effect seen on many loading indicators and onboarding illustrations. SVG also has its own <animate> and <animateTransform> elements (SMIL animation), though CSS and JavaScript animation are generally preferred for maintainability.

Using currentColor as the fill value makes an SVG icon inherit the text color of its parent element automatically, allowing a single icon to adapt to any color context without modification.

SVG Optimization with SVGO

SVG files exported from design tools like Figma or Illustrator contain a lot of unnecessary bloat: editor metadata, redundant attributes, group wrappers with no effect, floating-point coordinates with eight decimal places, id attributes generated by the design tool's internal node system. For a simple icon, this overhead can triple or quadruple the file size compared to a hand-optimized version.

SVGO (SVG Optimizer) is the standard tool for removing this overhead. It applies a configurable set of transformations: collapsing nested groups, removing invisible elements, rounding coordinates to reasonable precision, merging redundant paths, removing metadata and comments, and more. A typical SVGO pass reduces icon SVG file size by 30–60% with no visual change.

The BrowseryTools SVG Tool applies SVG optimization in your browser, giving you the optimized output without installing any command-line tools.

Inline SVG vs External File vs CSS Background

There are three main ways to include an SVG in a web page, each with different trade-offs:

• Inline SVG — The SVG markup is embedded directly in the HTML. Gives full CSS and JavaScript access to every element inside the SVG. Best for icons that need hover effects, color changes, or animation. Cannot be cached separately by the browser.
• External SVG file via <img> — The SVG is a separate file referenced with <img src="icon.svg">. The browser can cache the file. Simple to use. But CSS from the parent page cannot reach inside the SVG, and JavaScript cannot manipulate its contents.
• CSS background-image — The SVG is referenced as a CSS background. Works for purely decorative graphics. The SVG can also be inlined as a data URI in CSS, useful for small icons in component stylesheets. CSS cannot restyle elements inside the SVG.

SVG sprite sheets — a single SVG file containing all icons defined in <defs>blocks, referenced with <use href="sprite.svg#icon-name"> — offer a good balance: one cacheable network request for all icons, with per-icon DOM manipulation possible in most modern browsers.

Common SVG Pitfalls: XSS via SVG

SVG supports embedded scripts, event handlers, and external resource references, which makes it a viable attack vector for cross-site scripting (XSS) if user-uploaded SVG files are displayed in a browser context. An SVG file containing <script>alert(document.cookie)</script> will execute that script if the browser renders the SVG as part of a page.

The rules for safely handling user-uploaded SVGs:

• Never inline user-uploaded SVG in your HTML. Only inline SVGs you control.
• If you must display user-uploaded SVGs, serve them from a separate, sandboxed origin and display them in an <img> tag or a sandboxed <iframe>. The <img> tag does not execute scripts in the SVG.
• Sanitize user-uploaded SVGs by running them through a sanitizer (DOMPurify with the SVG configuration) before storing or displaying them.
• Set the Content Security Policy header to restrict script sources on pages that display SVGs.

Converting SVG to PNG

Some contexts do not support SVG: older email clients, certain CMS platforms, some image processing pipelines, app icon requirements for iOS and Android, and Open Graph preview images. In these cases, you need to export the SVG as a rasterized PNG.

Because SVG scales losslessly, you can export to PNG at any size. For app icons, this means exporting a single SVG source at 1024×1024 and deriving all smaller sizes from it. For Retina web use, export at 2× or 3× the CSS display size.

The BrowseryTools SVG Tool can render SVG to PNG at your chosen resolution, handling the conversion in-browser without any server upload. Useful when you have an SVG from a design tool and need a PNG for a context that does not accept SVG.