What is SVG? The Complete Guide to Scalable Vector Graphics

SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics. Unlike raster formats such as PNG or JPG, which store images as a fixed grid of colored pixels, SVG describes shapes, lines and curves using mathematical equations. This one difference has enormous practical consequences.

How SVG works under the hood

Open any SVG file in a text editor and you will see something like this: <path d="M10 20 L90 20 L50 80 Z" fill="#4f46e5"/>. That single line draws a filled triangle. The browser (or any SVG renderer) reads those coordinates and draws the shape at whatever size is needed, pixel-perfect every time.

• Paths: arbitrary curves and straight lines defined by a compact syntax
• Shapes: <rect>, <circle>, <ellipse>, <polygon> for common geometry
• Text: fully searchable, selectable and accessible text rendered as vector
• Gradients & filters: drop shadows, blurs, color transforms built in
• Animations: SMIL animations and CSS transitions work natively inside SVG

SVG vs raster: a practical comparison

The clearest way to understand the difference is to zoom in. Zoom to 400% on a PNG logo and you will see jagged, blurry pixels. Zoom to 400% on the same logo as an SVG and it remains razor-sharp. This is because the browser recalculates the math at every zoom level.

• Resolution-independent: one file works at 16px (favicon) and 2000px (billboard) equally well
• Smaller file size for simple graphics: a vector logo is often 10× smaller than its PNG equivalent
• Fully editable: change colors, shapes and sizes directly in CSS or a text editor
• Accessible: screen readers can read SVG text and titles
• Animatable: CSS and JavaScript can animate any SVG attribute

When should you use SVG?

Always use SVG for:

• Logos and brand marks
• Icons and UI elements
• Illustrations with flat or gradient colors
• Charts, graphs and data visualizations
• Animated UI elements

Stick to PNG/JPG for:

• Photographs and realistic images
• Complex textures with millions of color variations
• Screenshots

Browser and tool support

Every modern browser (Chrome, Firefox, Safari, Edge) has full SVG support. SVG also works in design tools (Figma, Illustrator, Inkscape), email clients (inline SVG in most modern clients), and as <img> tags, CSS backgrounds, or inline HTML.