SVG Format Guide — What Is SVG and When to Use It

SVG is the format every designer eventually discovers and wonders why they weren't using it all along. Unlike photos, SVG images stay perfectly sharp at any size — from a 16px favicon to a 10-metre billboard. This guide explains how it works, when to use it, and when not to.

What Is SVG?

SVG stands for Scalable Vector Graphics. Instead of storing a grid of coloured pixels like JPEG or PNG, an SVG file stores a set of mathematical instructions — "draw a circle here, a rectangle there, follow this path in blue." The browser or graphics app then renders those instructions at whatever size you need.

Because the instructions are resolution-independent, the result is always crisp. Zooming in on an SVG never reveals pixelation — it just recalculates and redraws.

SVG vs PNG vs JPG — Which Should You Use?

When to Use SVG

• Logos — a company logo must look perfect at 32px in a browser tab and 3000px on a banner. Only SVG does both from one file.
• Icons — UI icons (hamburger menus, arrows, social media icons) are all geometric shapes that SVG handles perfectly.
• Illustrations and diagrams — charts, maps, infographics, technical drawings all benefit from infinite scalability.
• Animations — SVG supports CSS and JavaScript animation natively, making it great for animated icons and loaders.
• Web fonts alternative — inline SVG is often faster and more controllable than icon fonts.

When NOT to Use SVG

• Photographs — photos have millions of subtle colour variations. Tracing them as vector paths creates huge files with poor quality. Use JPEG or WebP for photos.
• Complex raster art — digital paintings with gradients, textures, and photo-like detail don't convert well to paths.
• Email clients — many email clients (Outlook especially) don't render SVG. Use PNG for email headers and banners.

How to Convert SVG to PNG, JPG, or PDF

Sometimes you need a raster version — for email, social media, or apps that don't support SVG. Convertlo handles all three in your browser:

You can also convert from the homepage — select the Image tab, choose SVG as the From format, then pick PNG, JPG, or PDF as the output.

SVG File Structure (Quick Look)

SVG files are plain text XML, which means you can open them in a text editor and read them. A simple circle in SVG looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#5b6af5"/>
</svg>

This makes SVG editable in code editors, versionable in Git, and easily manipulable with CSS and JavaScript — something no raster format can match.

When SVG Breaks — and What to Do About It

SVG's "it just works everywhere" reputation is mostly deserved, but there are a handful of situations where things fall apart in ways that aren't obvious until you're staring at a broken graphic at 11pm before a launch.

Browser rendering differences. Chrome, Firefox, and Safari all implement SVG through their own rendering engines, and the results aren't always identical. Complex filter effects — drop shadows built with feDropShadow, blur composites, colour matrices — render noticeably differently across engines. If a shadow looks slightly off in Safari or a gradient banding appears in Firefox, it's almost always an SVG filter handling difference rather than a bug in your file.

Fonts not embedded. If your SVG contains text, and you haven't converted that text to paths, the file depends on the viewer's machine having the same font installed. Open it on a different computer and the text renders in whatever fallback font the OS picks, often with completely different spacing. The fix is to convert text to outlines before exporting — in Illustrator it's Type → Create Outlines, in Figma select the text layer and use Flatten.

Design app filters that don't survive export. Figma's blur effects, complex layer blends, and some stroke properties get rasterised on export rather than translated to SVG filter primitives. The exported SVG will include a bitmap region inside what looks like a vector file — which defeats the purpose. The workaround is to check the file size after export: if a supposedly simple icon is 200KB, a rasterised region is probably hiding in there.

Older app compatibility. Some apps — certain versions of Office, older Android WebViews, email clients — either ignore SVG entirely or only support a restricted subset of the spec. For anything destined for email or a legacy context, export a PNG fallback. The SVG stays as the source of truth; the PNG is what actually ships.

SVG in Practice: Real Workflows

Understanding what SVG is good for in theory is one thing. Here's how it actually gets used day-to-day in design and development work.

Icon systems with <use>. Rather than embedding the same icon markup fifty times across a page, most production web apps define all icons once in a hidden SVG sprite at the top of the document, then reference each one with <use href="#icon-name">. This keeps the DOM clean, lets you change a colour in one place, and means the browser parses the path data once instead of repeatedly. Tools like SVGO and svg-sprite automate the sprite-building step.

CSS animations. Because SVG elements are part of the DOM, they respond to CSS just like HTML elements do. You can target a specific path inside an icon and animate its fill, stroke-dashoffset, or transform with standard CSS transitions. That "draw on" line animation where a path appears to write itself is just stroke-dashoffset animating from the full path length to zero.

Figma vs Illustrator exports. Figma exports fairly clean SVG for simple shapes but tends to over-specify transforms and sometimes uses non-standard attribute ordering that can confuse older parsers. Illustrator output is verbose — lots of legacy metadata and empty groups — but tends to be more spec-compliant. In both cases, running the output through SVGO before committing to a codebase is worth the habit; it typically cuts file size by 30–60% and removes the clutter without touching the visual result.

Multiple logo variants in one file. An SVG can contain several <symbol> definitions — horizontal lockup, stacked version, icon-only mark — each with its own ID. Developers can then reference whichever variant they need with <use>, keeping the entire logo system in a single file rather than scattered across separate assets.

Frequently Asked Questions

What is an SVG file?

SVG (Scalable Vector Graphics) stores images as mathematical paths rather than pixels. This means they scale to any size with zero quality loss, making them ideal for logos, icons, and illustrations.

When should I use SVG instead of PNG?

Use SVG for logos, icons, and illustrations that need to look sharp at any size. Use PNG for photographs or images with complex colour gradients that don't translate well to vector paths.

Can I convert SVG to PNG for free?

Yes. Convertlo converts SVG to PNG, JPG, or PDF free in your browser — no upload, no signup required. Visit svg-to-png to get started.

Can browsers display SVG directly?

Yes — all modern browsers (Chrome, Firefox, Safari, Edge) render SVG natively. You can use SVG as an <img> tag, a CSS background, or inline directly in your HTML.

Can I open SVG files in Photoshop?

You can, but Photoshop imports SVG as a rasterised bitmap at whatever resolution you specify in the import dialog — after that point it's pixels, not paths. If you need to keep the vector data editable, open the file in Illustrator or Inkscape instead. Photoshop is fine for exporting a one-time PNG from an SVG, but it's not a useful SVG editor.

Why does my SVG look different in different browsers?

SVG is rendered by the browser's own graphics engine, and implementations vary. Complex filter effects (blur, drop shadows, colour matrices) are the most common source of visible differences — Chrome, Firefox, and Safari handle them differently. Missing fonts are another frequent cause: if the SVG uses a typeface that isn't installed on the viewer's machine, the text reflows in a fallback font and spacing changes noticeably. Converting text to outlines before exporting removes the font dependency entirely.