photomopOpen the studio

File formats

SVG

Also called .svg, scalable vector graphics or vector file. Here is what it means, when it changes what you export, and what people get wrong.

File formatsRuns on your deviceUpdated 10 August 2026

The short answer

SVG (Scalable Vector Graphics) is an XML file that describes shapes, paths and text as mathematical instructions rather than pixels. A renderer draws it fresh at whatever size is requested, so it stays sharp on any screen or print size, but it is unsuitable for photographs.

Updated

The short version

SVG at a glance

Quick facts about SVG: type, resolution, photographs, transparency, interactivity, compressed form
Quick factDetail
TypeVector, written in XML
ResolutionIndependent; scales with no pixelation
PhotographsNot suitable; use a raster format
TransparencyYes, including partial opacity
InteractivitySupports CSS, animation and scripting
Compressed formSVGZ, an SVG compressed with gzip

Slide the table sideways to see every column.

How does an SVG stay sharp at any size?

A raster image is a fixed grid of samples. Enlarge it and software has to invent the missing samples, which is why blown-up JPEGs go soft or blocky. An SVG holds no grid at all. It holds statements: a path from here to there with this curvature, a circle of this radius, a rectangle with this fill.

When the file is displayed, the renderer solves those instructions against the current output resolution and draws crisp edges every time, whether that is a 24 px toolbar icon or a two-metre banner. A viewBox defines the internal coordinate space, and everything scales relative to it. File size follows the complexity of the artwork, not its display dimensions, so the same logo file costs the same whether you show it tiny or enormous.

Why is SVG the wrong format for photographs?

Because a photograph is millions of individually varying samples, and there is no compact set of shapes that describes them. Auto-tracing a photo produces thousands of overlapping paths that render slowly, produce a file far larger than the JPEG you started with, and look posterised, like a screen-printed poster rather than the original.

You can embed a raster image inside an SVG, but that only wraps a JPEG or PNG in XML. It does not become scalable, and it does not get smaller. Vector suits artwork that was drawn: logos, icons, diagrams, maps, charts, typography and illustration with defined edges.

What else can an SVG file contain?

More than most people expect, which is both useful and a caution.

  • Text as real text, selectable and searchable, though it renders with whatever font the viewer has unless the font is embedded or the text is converted to outlines.
  • CSS styling, so colours and strokes can respond to a dark theme or a hover state.
  • Gradients, clipping paths and filter effects such as blurs and drop shadows.
  • Animation and scripting, which is why an SVG can be interactive rather than static.
  • Accessibility metadata, through title and description elements that screen readers announce.

Because SVG can carry script, many platforms sanitise uploaded SVG files or refuse them outright. That is a sensible precaution rather than a bug, and it is worth knowing before you plan a workflow around user-supplied vector files.

When do you need to export a raster copy?

Whenever the destination expects pixels. Shopify lists SVG among its accepted product media types, but marketplace listing photos are generally raster, and platforms that publish requirements in pixel dimensions (eBay's recommended 1600 x 1600 px, Etsy's recommended 2000 px on each side) are describing raster uploads.

Favicons and app icons are the other common case: even where SVG is supported, providing PNG sizes remains the reliable path, and Windows icon resources use ICO. The practical habit is to keep the SVG as the master, since it can generate any size cleanly, and export PNG or JPEG at the exact dimensions each destination asks for.

What people get wrong about svg

Each one is a real failure mode, not a style preference.

  1. Auto-tracing a photograph to SVG and ending up with a larger, slower file that looks worse than the original.

  2. Leaving live text in a logo SVG without outlining or embedding the font, so it substitutes on other machines.

  3. Assuming every SVG is tiny, when heavy filter effects and thousands of trace paths can make one slower than a PNG.

  4. Uploading an SVG logo to a listing that requires raster images at specific pixel dimensions.

Questions people ask

SVG, answered

The follow-up questions people search for once they have the definition.

Can you convert a JPEG into a real SVG?

Not meaningfully. Tracing software can approximate a photo with flat shapes, but the result is a stylised poster effect, not the original image, and the file is usually larger. Vector conversion works well for simple logos and line art, not photographs.

Is SVG better than PNG for a logo?

As the master file, yes. One SVG renders sharply at every size, so you never maintain a folder of exports. For delivery you still need PNG in the specific sizes email clients, marketplaces and app stores require, since many will not accept vector.

Why does my SVG look different on someone else's computer?

Usually fonts. Text in an SVG renders with a font installed on the viewing machine, so a missing font substitutes and the layout shifts. Convert text to outlines before sharing a final logo, or embed the font, and the appearance stops depending on the viewer.

Can SVG files be animated?

Yes, through CSS animation, JavaScript, or SVG's own animation elements. This works well for icons, loading indicators and diagram walkthroughs. For anything resembling video footage, a video file is far more efficient than animating vector shapes.

Are SVG files safe to accept from other people?

Treat them with care. Because SVG is XML that can include scripts and external references, an uploaded file can carry active content. Platforms that accept SVG usually sanitise it first. If you are handling user uploads, strip scripts and external links before serving the file.

From the studio

Tools that do this

Each one runs on your own device, so the photo stays where it is.

Sources

Where the facts on this page come from. Every link opens the specification, standard or documentation the claim was read at.

Now do it to a photo

Photomop is a photo studio that runs on your own device. Resize, crop, compress, convert, batch edit, remove a background and change one all work in the browser tab you are reading this in, at full resolution and with no watermark. The on-device page shows you how to check that the photo stays put.