An SVG file is an image stored as text. SVG stands for Scalable Vector Graphics, an open W3C standard: the file is an XML document listing shapes, paths, colours and coordinates, which the viewer redraws at whatever size is needed. That is why an SVG stays sharp from favicon to billboard, can be opened in a text editor and can be styled with CSS. Files end in .svg and are served as image/svg+xml.

Is an SVG file a vector file?

Yes. SVG is a vector format: it stores geometry such as circles, lines and curves rather than a grid of pixels, so it is recalculated at every size and does not pixelate when enlarged. The exception is an SVG that wraps a bitmap in an image element. That file is technically SVG but behaves like the PNG or JPEG inside it. Open it in a text editor and search for data:image to check.

What opens a .SVG file?

Any modern web browser. Chrome, Edge, Firefox and Safari display an SVG if you drag the file in or choose Open with. On a Mac, Quick Look previews it when you select the file and press Space; the Preview app does not open SVG. To edit one, use Inkscape (free), Adobe Illustrator, Figma, or a plain text editor for code changes. On phones, a browser or a dedicated SVG viewer app is the most reliable route.

Is a SVG file the same as a PNG?

No. A PNG is a raster image, a fixed grid of pixels that blurs when enlarged. An SVG is a vector image written as XML text, so it scales cleanly and can be edited as code. SVG suits logos, icons and illustrations; PNG suits screenshots and anywhere SVG is not accepted, such as many social networks and email clients. For a logo, keep both.

What is an SVG file used for?

Mostly for graphics that have to work at many sizes: logos, website icons, illustrations, diagrams, charts and maps. SVG is also the usual input for cutting machines such as Cricut, and for laser cutters and pen plotters, because they follow the paths directly. On the web it can be styled with CSS and animated. It is a poor choice for photographs, which belong in JPEG, WebP or AVIF.

Are SVG files safe to open?

An SVG from a trusted source is fine. Because SVG can contain scripts and event handlers, an untrusted file should be treated like untrusted HTML. Shown through an img tag or a CSS background, browsers disable its scripts. Opened directly in a tab, inlined into a page, or embedded with object or iframe, its code can run. Sanitise untrusted SVG, for example with DOMPurify, before inlining it.

How do I turn an image into an SVG?

There are three routes. Trace it: Inkscape can trace a bitmap into paths, which works best on clean, high-contrast artwork such as logos and poorly on photos. Redraw it by hand in a vector editor, which gives the cleanest result. Or use an AI tool that redraws it: SVG Maker AI describes the uploaded image and generates a new SVG from that description, so the result is an interpretation rather than a trace.

What Is an SVG File? How It Works, Opens and Edits

Q: Do SVG files lose quality?

Not when you resize them, because the shapes are redrawn at each size rather than stretched. An SVG can still look poor for three reasons: it contains an embedded PNG or JPEG instead of real shapes, it was exported to a raster format and that copy was enlarged, or it has hairline details too fine for a very small pixel size such as a 16 px favicon.

What is an SVG file? An image written as text: a short XML document that tells the screen which shapes to draw, where, and in what colour, instead of storing a grid of pixels. That one design decision explains everything else about the format — why it stays sharp at any size, why you can open it in Notepad, why photographs are a poor fit for it, and why some websites refuse to accept it at all.

What is an SVG file?

SVG stands for Scalable Vector Graphics. It is an open standard that the W3C has developed since 1999, according to MDN, and the current version, SVG 2, is published as a W3C Candidate Recommendation. Files use the .svg extension, a server sends them with the media type image/svg+xml, and a gzip-compressed copy occasionally travels as .svgz.

Strip away the acronym and the SVG meaning comes down to three properties:

Text, not binary. Open the file in any text editor and you can read it, search it, diff it in Git and change a colour by hand.
Vector, not raster. It stores shapes as coordinates and curves, which are redrawn fresh at whatever size the display asks for.
Part of the web platform. Browsers draw it natively, CSS can style it and JavaScript can change it. That last point matters again in the security section.

Browser support stopped being a concern a long time ago. caniuse lists basic SVG support from Chrome 4, Firefox 3 and Safari 3.2, with Internet Explorer managing partial support from version 9. Every current desktop and mobile browser renders it.

What is inside a real SVG file

Here is a complete, working SVG file. Save these six lines as badge.svg, open it in any browser, and you get a green circle with a white tick.

badge.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
  <title>Green check badge</title>
  <circle cx="60" cy="60" r="54" fill="#16a34a"/>
  <path d="M34 62 L52 80 L88 42" fill="none" stroke="#ffffff"
        stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Read it from the top:

The root element. <svg> wraps everything. xmlns tells the parser that these are SVG elements; leave it out of a standalone file and most browsers show an XML tree or an error instead of a picture. Inline in an HTML page it is optional.
The coordinate system. viewBox="0 0 120 120" defines a canvas 120 units square with 0,0 at the top left. Every number below is measured in those units, not in pixels — the viewBox guide explains why that is what makes the file scale.
The default size. width and height say how big to draw it when nothing else decides. Remove them and CSS can size it freely while the viewBox keeps the proportions.
A label. <title> gives the graphic a text name that assistive technology can read. There is more to it than that, covered in accessible SVG.
A shape. <circle> has a centre (cx, cy), a radius (r) and a fill colour.
A path. <path> is the general-purpose shape. In d, M34 62 moves the pen without drawing and each L draws a straight line to the next point, which makes the tick. Curves use other letters (C, Q, A), and in real artwork that path data is where most of the file size lives.
The styling. fill="none" plus a white stroke 10 units wide, with rounded ends and a rounded corner.

Change #16a34a to #dc2626 and the badge turns red. Change r to 30 and the circle shrinks. That is the practical meaning of an image being code. Files exported from design tools are longer — editor metadata, nested groups, hundreds of path points — but they are built from exactly these parts. If one refuses to display, the usual causes are in why an SVG is not showing.

Is SVG a vector file? Vector vs raster

Yes. SVG is a vector format, and the difference between vector and raster is the whole decision. A raster image — PNG, JPEG, WebP, GIF — is a fixed grid of coloured pixels. Display it larger than that grid and the software has to invent the pixels in between, which is where blur and jagged edges come from. A vector image stores the geometry instead, so the shapes are recalculated at the target size every time they are drawn. A circle of radius 54 is the same circle at 16 pixels or across a shop window.

That also changes how file size behaves. We rendered the badge above to PNG with the sharp library at maximum compression: 2,401 bytes at 120 px, 13,802 bytes at 512 px and 31,696 bytes at 1024 px. The SVG is 316 bytes at all three sizes, and at any other. The gap is typical for flat icons and logos, and it reverses for detailed artwork — a file with thousands of path points can outweigh a well-compressed PNG. The SVG vs PNG comparison has the measurements.

SVG compared with common raster formats and print vector formats
Format	Stores	Scales cleanly	Typical use
SVG	Shapes as XML text	Yes	Logos, icons, illustrations, diagrams, cut files
PNG	Pixels, lossless	No	Screenshots, UI images, flat graphics at a fixed size
JPEG	Pixels, lossy	No	Photographs
WebP	Pixels, lossy or lossless	No	Photos and graphics on the web
PDF / EPS	Vector containers that can also hold pixels	Only the vector parts	Print hand-off — see SVG vs EPS

Do SVG files lose quality?

Not from scaling. But an SVG can still look soft or blocky, and there are three reasons it happens.

1. It is a raster image in an SVG wrapper

An SVG may contain an <image> element holding a PNG or JPEG. Some converters that promise to turn a JPG into an SVG do exactly this, and the result is technically SVG and practically still a photo. The file below embeds a real 2 × 2 pixel PNG and stretches it to 400 units. Open it and you get a smeared blend of four colours, not four crisp squares.

not-really-vector.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <image width="400" height="400"
         href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAGElEQVQI12MQW+z1/2ex2H8G1eTX/0EAAFNBCvIALnoQAAAAAElFTkSuQmCC"/>
</svg>

The check takes ten seconds: open the file in a text editor and search for <image or data:image. If a long base64 string is most of the file, it is a bitmap with an SVG label on it.

2. It was exported to a raster

Once an SVG has been saved as PNG or JPEG, the copy is a raster and scales like one. Keep the original SVG and export again at the size you need.

3. The detail is finer than the pixels

A vector still ends up on a pixel grid. At 16 px, a hairline stroke or a tiny gap has nowhere to land and blurs. That is a design problem, not a format problem — see grid alignment for icons.

How to open an SVG file

Two jobs hide under “open”: viewing the picture and editing it. Every browser does the first. The second needs a vector editor or a text editor.

On Windows

On Windows 10 and 11, double-clicking an .svg usually opens it in Microsoft Edge. Any browser works: right-click, choose Open with, and pick Chrome or Firefox. If File Explorer shows a generic icon rather than a thumbnail, Microsoft's free PowerToys File Explorer add-ons include an SVG thumbnail provider and a preview-pane renderer.

On macOS

Select the file in Finder and press Space: Quick Look renders SVG, which we confirmed on a current macOS release. To open it properly, drag it into Safari, Chrome or Firefox, or right-click and choose Open With. Preview is not the tool here — on the Mac we checked it does not register itself for SVG files at all.

On an iPhone or Android phone

Phones are where SVG support is patchiest. Photo galleries generally do not list SVGs, but if the file is a link or sits on a web page, the phone's browser simply displays it. For a downloaded file on Android, a file manager's Open with menu can usually hand it to Chrome. On an iPhone, long-press it in the Files app and try Quick Look. If neither works, a free SVG viewer app is the dependable fallback.

To edit one

Tools for editing an SVG file
Tool	Cost	What it is good for
Inkscape	Free, open source	Full vector editing on Windows, macOS and Linux. SVG is its native format.
Adobe Illustrator	Paid	Opens SVG with File › Open; saves or exports SVG back out.
Figma	Free tier	Drag the file onto the canvas and it becomes editable vector layers. Complex files can arrive as a pile of layers named “Vector”.
A text or code editor	Free	VS Code, Notepad or similar. The fastest way to change a colour, fix a viewBox or delete junk.
SVG Maker AI editor	Free, no account to open	Paste markup in and adjust it beside a live canvas. No file opening, no pen tool.

That last row is ours, so its limits are worth stating plainly: the SVG editor opens in the browser without an account, and pasting markup into its code panel is the only way in. From there you can recolour, change strokes, move or add basic shapes and text, and watch the XML update. The status bar shows whether the markup parses, and export refuses markup that does not, then writes viewBox, width, height and xmlns onto the file it hands you.

What SVG files are used for

Logos. One master file serves the website header, the business card and the signage. The logo file formats guide covers what to hand over alongside it.
Icons and interface graphics. Icon sets are drawn on small grids such as 0 0 24 24 and recoloured with currentColor — see styling SVG with CSS.
Illustrations, diagrams, charts and maps. Text inside them stays real text, selectable and searchable.
Animation. Paths can be drawn on, morphed and moved with CSS, SMIL or JavaScript, covered in the animation guide.
Cutting machines and plotters. Vinyl cutters, laser cutters and pen plotters follow the paths themselves, which is why craft software asks for SVG — see SVG for Cricut and laser-cut SVG.
Web apps. Components import SVGs directly; the details differ by framework, as the SVG in Next.js post shows.

When SVG is the wrong format

Photographs. A photo is millions of subtly different pixels. A vector version is either enormous or visibly posterised. Use JPEG, WebP or AVIF.
Very complex artwork. Every node, gradient and filter is recalculated on each paint. A file with tens of thousands of points or stacked blurs can make a page slow to render even when its byte size looks reasonable — optimising SVG covers both costs.
Places that will not take it. Many social networks, email clients and document tools do not accept or display SVG. Keep a PNG export for those.
Live text in an unusual font. A <text> element uses the fonts available where it is displayed, so a missing font silently falls back. Outline the text or ship the font — text in SVG explains the trade-off.

Why some sites refuse SVG uploads

Because SVG is part of the web platform, a file can carry more than shapes. This one is a valid SVG with an event handler and a script element in it:

not-just-a-circle.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#f97316"
          onclick="alert('An attribute just ran code')"/>
  <script>console.log('So did this element')</script>
</svg>

Open it directly in a browser tab and both are live: the script logs to the console as the file loads, and clicking the circle fires the alert. Reference the same file with <img src="not-just-a-circle.svg"> or as a CSS background and nothing runs, because browsers disable scripts for SVG used as an image. The risk is everywhere else. Paste untrusted markup into a page, inject it with innerHTML, embed it with <object> or <iframe>, or host user uploads on your own domain where visitors can open them directly, and its handlers run with the same access as your own code. So treat untrusted SVG exactly like untrusted HTML: show it through <img>, or sanitise it before inlining.

inline-untrusted.js

import DOMPurify from 'dompurify'

const res = await fetch('/uploads/logo.svg')
const untrusted = await res.text()

// SVG elements and filters only: no HTML, no MathML.
// Script elements and on* attributes are removed regardless.
const clean = DOMPurify.sanitize(untrusted, {
  USE_PROFILES: { svg: true, svgFilters: true },
})

document.querySelector('#logo').innerHTML = clean

That is the reason WordPress still blocks SVG uploads by default — the core discussion, ticket #24251, has been open since 2013 with sanitisation as the sticking point — and why a platform that rejects your logo is not being obtuse.

How to make an SVG file

By hand

The badge above is the proof that a text editor is enough. Writing SVG by hand suits icons, simple geometric marks and learning the format. It stops being practical the moment you need freehand curves.

In a vector editor

Draw in Inkscape, Illustrator or Figma and export as SVG. In Inkscape, Save As offers a plain SVG option that leaves out its editor-specific markup; Illustrator and Figma both have SVG in their export settings. Inkscape can also trace a bitmap into paths, which works well on clean, high-contrast artwork and badly on photos — the tracing guide explains why.

With AI

A text-to-SVG generator writes the markup from a description. In SVG Maker AI that happens in the dashboard after you sign in: you describe the image, the prompt is expanded before generation, and the server cleans the result — SVGO, a viewBox added if missing, and any <image> element removed, which rules out the bitmap-in-a-wrapper case above. A free account starts with one credit. You can also upload a picture, but be clear about what happens: a vision model describes it and a new SVG is drawn from that description, so the result is an interpretation, not a trace. General chatbots can write SVG code too, with caveats covered in can ChatGPT make an SVG.

Where to go next

To see the format from the inside, paste any SVG — the badge above will do — into the code panel of the SVG editor and change a number. To generate one from a sentence, start at text to SVG; to redraw an existing picture as a vector, see image to SVG, keeping in mind that it is an interpretation rather than a trace.

If you are choosing between formats, read SVG vs PNG next. If a file scales strangely or arrives cropped, the viewBox guide is where the answer usually is, and if it will not appear at all, start with why an SVG is not showing.