Auto-tracing a photograph to SVG and ending up with a larger, slower file that looks worse than the original.
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.
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 fact | Detail |
|---|---|
| Type | Vector, written in XML |
| Resolution | Independent; scales with no pixelation |
| Photographs | Not suitable; use a raster format |
| Transparency | Yes, including partial opacity |
| Interactivity | Supports CSS, animation and scripting |
| Compressed form | SVGZ, 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.
Leaving live text in a logo SVG without outlining or embedding the font, so it substitutes on other machines.
Assuming every SVG is tiny, when heavy filter effects and thousands of trace paths can make one slower than a PNG.
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.
Same cluster
More from the glossary
Neighbouring entries, so every term in the set is one hop from every other.
Thumbnail
A thumbnail is a small version of an image used in search results, grids and previews.
Super-resolution
Super-resolution uses a trained model to produce a higher-resolution version of an image, adding detail that plain interpolation cannot.
TIFF
TIFF (Tagged Image File Format) is a flexible container for high quality raster images, used mainly in printing, scanning and archiving.
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.
Keep reading
Elsewhere on Photomop
Platform image rules
Image size, file type and background rules for 22 selling platforms, each one sourced.
Read itConvert image
JPG, PNG, WebP and AVIF, with an honest answer about HEIC and alpha.
Read itAll the tools
The whole toolbox in three families, with what each one needs before it can run.
Read itOn-device privacy
The pipeline in five steps, what leaves your device, and how to check it yourself.
Read it
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.