What Is an SVG File? How to Open, Convert, and Use One

You downloaded a logo and got a file ending in .svg. Double-clicking opened your browser instead of a photo viewer — or worse, a wall of code. Nothing is broken. An SVG is simply not the same kind of thing as a JPG or PNG, and once you know what it is, everything it does makes sense.

An SVG file is a picture stored as written instructions instead of pixels. That single difference is why an SVG logo stays razor-sharp on a business card and on a billboard, why it is often a fraction of the size of the equivalent PNG, and why your computer treats it like a document. This guide covers what is inside one, how to open it, how it compares to PNG and JPG, and when to use it. If you just need a normal image right now, our free SVG to PNG converter handles that in your browser — the file never leaves your device.

SVG stands for Scalable Vector Graphics, an open standard maintained by the W3C — the same organisation behind HTML — natively supported by every major browser for well over a decade.

The important word is vector. JPG, PNG, GIF and WebP are raster formats: a fixed grid of coloured dots. A 400 x 400 PNG holds 160,000 pixel values and never more — enlarge it and the computer invents the missing detail. That is exactly what "blurry" looks like.

A vector file stores geometry instead: "draw a circle here, this big, fill it blue." There are no pixels to run out of. At 40 pixels or 4,000, the software re-draws those instructions at the size you asked for, so edges are always mathematically perfect.

The second unusual thing: those instructions are stored as plain, human-readable text — XML, the same family as HTML. You can open an SVG in Notepad or TextEdit and read, search, edit and save it. That is why it works so well with websites, version control and code editors — and why your computer sometimes opens it in a text app instead of an image viewer.

A complete, valid SVG file that draws a solid blue circle:

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

That is the entire file — 115 bytes, rendering identically at any size. For comparison, we generated the same blue circle as a PNG at several resolutions:

The PNG grows with every pixel added. The SVG does not — the same 115 bytes on a favicon or a poster. That is the whole argument for vector, in one table.

Vocabulary you will meet in real SVG files:

• viewBox — the coordinate system the drawing uses. It is what makes the file resolution-independent.
• <path> — the workhorse: drawing commands describing any shape. Real logos are mostly paths.
• <text> — real, selectable, searchable text, not a picture of text.
• <image> — an embedded raster picture. This one matters: it is how a file can be SVG on the outside and pixels on the inside.

These formats are not competing at the same job. Pick by what the image is.

The short rule: if a human drew it — logo, icon, chart, map, lettering, diagram — use SVG. If a camera captured it, use JPG or WebP. PNG is the middle ground for pixel artwork needing transparency or crisp edges. See also JPG vs PNG.

Nothing is wrong if double-clicking an SVG does not show a picture — your OS classifies it as a document because technically it is one. To view it:

1. Any web browser — fastest, works everywhere. Drag the .svg onto an open Chrome, Safari, Firefox or Edge window. Browsers render SVG natively, so it appears instantly and perfectly.
2. Windows. File Explorer shows SVG thumbnails and the Photos app opens them on current Windows 11. If yours still opens SVGs in Notepad, right-click → Open With → Choose another app, pick your browser, and tick "Always use this app".
3. Mac. Preview opens SVG files; pressing Space gives a Quick Look preview.
4. Phones. iOS and Android photo galleries generally do not show SVGs. Use your mobile browser, or convert first.
5. If an app refuses it — many older tools, email clients and uploaders take only raster — convert it with the free SVG to PNG converter.

⚠️ One sizing gotcha before you convert. Many SVGs — especially icon-library and Figma exports — declare only a viewBox and no fixed width or height. That is deliberate: it is what makes them resolution-independent. But the file then has no inherent pixel size, so browser-based converters must pick one, and the fallback is often far smaller than your artwork deserves. If a converted PNG comes out unexpectedly small or squashed, that is why. Fix it by opening the SVG in a text editor and adding explicit width and height attributes before converting.

Two routes, depending on whether you think in shapes or in code.

1. Visually, in a vector editor. Inkscape is free, cross-platform, and uses SVG as its native format — nothing is lost on save. Figma, Illustrator and Affinity Designer also import and export SVG well. Use these to move shapes or restyle artwork.
2. As text, in any editor. Changing a colour is a one-second find-and-replace: locate fill="#2563eb", type a different hex code, save. Grab hex values with the Color Picker. Faster than opening a design app.

What you cannot do: edit an embedded photo as shapes. If the SVG holds an <image> element with a long base64 string, that content is raster data — movable and scalable, but there are no shapes to edit.

The two directions are not equally easy, and most online converters will not tell you that.

SVG to PNG or JPG is easy and always faithful. The computer renders the instructions at your chosen size — nothing is guessed. Use the free SVG to PNG converter for email signatures, marketplace listings, or any app that will not take vectors. Pick a generous size; you can shrink a PNG with the Image Resizer, but you cannot add detail back.

PNG or JPG to SVG is the hard direction, and means two different things:

Embedding is instant and pixel-perfect — the right answer when a system demands a .svg extension but you only have a raster image, or when combining a photo with vector elements. Our PNG to SVG and JPG to SVG tools do exactly this, in your browser. Be clear what you get: a valid SVG whose contents are your original pixels. It looks identical to the source and does not gain scalability. It also gets bigger — we measured +34% on a large image, up to +60% on a small one, because the bytes are re-encoded as base64 text. Converting this way never saves bandwidth.

Vectorizing is what you need for a logo that must scale, artwork for a Cricut or laser cutter, or large-format print. It requires tracing software — Inkscape's Path → Trace Bitmap free, Illustrator's Image Trace paid. Quality depends entirely on the source: clean, high-contrast graphics with solid colours trace beautifully; photographs and gradients produce either a posterised blob or tens of thousands of paths. For photos, do not vectorize — keep them raster and compress the image instead.

How to tell which you were given: open the .svg in a text editor. Many <path> elements means a real vector. A single <image> with a long data: string means embedded pixels wearing an SVG costume.

Use SVG for:

• Logos and brand marks. One file covers the favicon and the billboard. If a designer ever made your logo, an SVG, AI or EPS master almost certainly exists — ask before tracing.
• Icons and UI elements. Tiny files, crisp at every screen density, recolourable with one line of CSS.
• Charts, diagrams, maps and floor plans. Labels stay real text — searchable, selectable, screen-reader accessible.
• Anything that must print large — banners, vehicle wraps, signage — and cutting machines (Cricut, Silhouette, CNC, laser), which follow vector paths as tool routes.

Do not use SVG for:

• Photographs. Continuous-tone imagery has no shapes to describe — use JPG or WebP.
• Anywhere raster is required. Most email clients, older CMSs and many print portals reject SVG outright.
• Extremely complex illustrations. An SVG with 50,000 paths renders slower and can exceed the equivalent JPG. Vector is smaller only for simple things.
• Favicons, without checking. SVG favicons work in current browsers; older ones expect .ico — use the Favicon Generator.

Because SVG is XML that browsers execute as part of a page, it can legitimately contain <script> elements and event handlers. A malicious SVG can carry JavaScript in a way a JPG or PNG cannot — which is why WordPress, most email clients and many forums block SVG uploads by default.

In practice:

• Opening an SVG you trust is fine. The risk is not "SVGs are dangerous" — it is "untrusted SVGs served on your own domain are dangerous".
• If you accept SVG uploads, sanitise them server-side, or serve them from a separate domain so scripts cannot touch your session.
• To inspect one, open it in a text editor — reading the XML runs nothing.
• Display untrusted SVGs through an <img> tag — browsers do not execute scripts in SVGs loaded that way.

Converting an untrusted SVG to PNG neutralises it completely — rasterising discards everything that is not a picture. FileNaut's converters run entirely in your browser, so nothing is uploaded anywhere.

• Keep the vector master. The one irreversible mistake is losing the SVG and keeping only exported PNGs — going back is reconstruction, never recovery.
• Set explicit width and height before converting to PNG — it removes all ambiguity about output size.
• Minify before shipping to a website. Design tools leave editor metadata in exported SVGs; stripping it routinely halves the file size.
• Check your SVG on a dark background. Black line art on transparency vanishes in dark mode — common and avoidable.
• Working with raster too? The Image Converter handles PNG, JPG and WebP; the image compression guide covers shrinking them.