How is a vector (SVG) different from a raster (PNG, JPG)?

A raster is a grid of pixels: zoom in and the little squares appear. SVG stores not pixels but a mathematical description of shapes — lines, curves, circles. When the image is drawn, the browser recalculates them for the size you need, so SVG stays sharp at any scale, whether it's a 16 px icon or a billboard.

Who created SVG, and when?

SVG is an open standard from the W3C. Version 1.0 became an official Recommendation on 4 September 2001, and version 1.1 followed in 2003 (with a second edition in 2011). Adobe, Apple, IBM, Microsoft, Sun and others worked on the specification.

Why can I open an SVG file in a text editor?

Because SVG is text in the XML format, not binary data like a photo. Inside you'll find human-readable tags such as and . You can open the file in any text editor, edit it by hand, search it, and compress it with gzip to get a compact .svgz.

Can I save a photograph as SVG?

Technically yes, but there's no point. A photo has millions of unique colors and smooth gradients that can't be described efficiently with shapes. An SVG of a photo would be enormous and slow to render. Use JPG, WebP or AVIF for photos, and keep SVG for logos, icons and illustrations.

How do I open or convert an SVG?

An SVG opens in any modern browser — just drag the file into the window. To place a vector where SVG isn't supported, convert it to a raster, for example with the FormatZ SVG to PNG converter. For printing, SVG to PDF works well.

What Is SVG? The Vector Format That Never Loses Quality at Any Size

You blow up a logo on a website to a huge size — and it stays perfectly crisp, without a single jagged square. That's the SVG format at work. Let's unpack why it stores a picture as math rather than pixels, how that lets it scale forever without losing quality, and why it's a terrible choice for photographs.

What SVG is in plain English

SVG (Scalable Vector Graphics) is a format that stores an image not as a set of finished dots, but as instructions for how to draw the picture. Instead of "this pixel is blue and that one is red," the file says: "draw a circle with a radius of 40 centered here, fill it blue, then run a line over to there."

Because of this, an SVG is re-rendered every time you open it — and always at the exact size of your screen. The software takes the formulas and draws the shapes at whatever sharpness the device asks for, whether that's a tiny icon in a browser or a giant banner on a wall. The "scalable" in the name isn't marketing; it's a literal description of the format's defining superpower.

In short

SVG is a "blueprint of a picture," not the picture itself. It describes shapes with math, so it stays sharp at any zoom level and stays small for simple graphics. That same nature is exactly why it's no good for photos.

Vector vs raster: the core difference

To understand SVG, you need one contrast: vector versus raster. These are two fundamentally different ways to store an image.

Raster graphics (PNG, JPG, the photos from your phone) are a grid of colored pixel squares. The picture is made of a fixed number of dots, like a mosaic. As long as you view it at its original size, it looks great. But enlarge it and the squares show through: you get blur and "stair-stepping" on the edges. A raster simply has nowhere to find new detail.

Vector graphics (SVG) store geometry instead of dots: points, lines, Bézier curves, circles, rectangles. It's a set of formulas. When the picture needs to appear, those formulas are recalculated for the current resolution — and the math is just as exact for a 16-pixel icon as it is for a storefront sign a floor high.

Trait	Vector (SVG)	Raster (PNG, JPG)
What it stores	Shape formulas	A grid of pixels
When enlarged	Stays sharp	Pixelates
Inside the file	Text (XML)	Binary data
Ideal for	Logos, icons	Photographs
Photographs	Poor	Excellent

A raster is a finished mosaic of fixed tiles. A vector is the recipe — and you can lay the mosaic at any size you like.

Who created SVG: the W3C standard

SVG isn't one company's closed project — it's an open standard from the W3C (the World Wide Web Consortium, the very body that writes the rules of the web). SVG 1.0 reached official Recommendation status on 4 September 2001. Version 1.1 arrived in 2003, with its second edition in 2011; 1.1 remained the format's workhorse for years.

The specification was hammered out by rivals you rarely see at the same table: Adobe, Apple, IBM, Microsoft, Sun Microsystems, Corel and others. That lineup is exactly why the format became genuinely universal rather than tied to a single product. From day one SVG was built on already-proven web technologies — XML for structure, CSS for styling, the DOM for scripting.

A repeating geometric pattern — the kind of simple-shape graphic a vector describes perfectly — Patterns built from repeating shapes are a classic vector job: a couple of formulas instead of thousands of pixels. Photo: Pexels

Why vectors scale forever

This is SVG's signature property, and it works with elegant simplicity. Since the file holds a description of shapes rather than pixels, the image has no "native resolution." There's nothing to pixelate — because there are no pixels in the file until the moment it's drawn.

Picture the instruction "draw a line from point A to point B." You can render that line on a matchbox or on the side of a building — it stays straight and crisp either way, because the instruction doesn't change, only the scale does. That's exactly what a browser does with SVG: it recalculates the coordinates for the size you need and redraws from scratch.

The practical payoff: a single logo file works for everything at once — a 16×16 favicon, a site header, a slide deck, a printed poster. And it's always perfectly sharp, including on Retina and other high-density displays, where raster icons so often look fuzzy.

2001SVG 1.0 released (W3C)

∞scaling with no quality loss

XMLthe format's text foundation

SVG is text — and that's a superpower

Open a PNG in Notepad and you'll see a mess of unreadable characters. Open an SVG and you'll see tidy text with recognizable tags. That's because an SVG is an XML document — ordinary text, not a binary file. Inside you'll find human-readable elements like <circle>, <rect> and <path>.

That "text-ness" brings a whole cluster of practical advantages:

Editing in code. Changing a shape's color or nudging an element can be done right in a text editor, with no graphics program — sometimes it's a one-second fix.
Search and automation. You can search SVG content as plain text and process it in bulk with scripts, like any other code.
Version-control friendly. Git sees precise, line-by-line changes in an SVG — unlike a raster, which to Git is just "a whole new binary."
gzip compression. Text compresses beautifully. A gzipped SVG is called .svgz and is typically 20–50% smaller than the original; web servers often serve SVG pre-compressed on the fly.

Small files — for simple graphics

A logo or icon in SVG often weighs just a few kilobytes: a couple of dozen shapes are described more compactly than the same drawing as pixels. But this only holds for simple graphics — the more detail and shading, the heavier a vector gets.

Styles, animation and interactivity

Because SVG plays by the rules of the web, it can do far more than "just sit there as a picture." You can work with it almost like ordinary HTML.

Styling with CSS. Colors, strokes, shadows and hover effects use the same stylesheets as the rest of your site. You can recolor an icon to match a page theme without touching the file itself.
Animation. SVG shapes can move and morph in three ways: with CSS, with the built-in SMIL language, and with JavaScript. That's how you get "living" logos and smooth loading indicators.
Interactivity. SVG elements respond to clicks and hovers — the basis for clickable maps and live charts, for example.
Gradients and filters. Built-in smooth color transitions, blurs and shadows — with no raster images attached.

Flat blue geometric shapes — an example of vector forms with crisp edges — Flat shapes with crisp edges are what a vector encodes most compactly — and can animate. Photo: Pexels

Where SVG shines, and where it doesn't

SVG has a clear zone of strength and one big weakness. Knowing the boundary is half the value of understanding the format.

SVG is brilliant for:

logos and branding — one file for every medium, from a business card to a billboard;
icons and UI elements — crisp on any screen, easy to recolor with CSS;
illustrations with flat colors — artwork with sizable areas of a single shade;
charts, diagrams and infographics — they can be generated programmatically and made interactive;
maps — lossless scaling is especially handy here.

The big weakness: photographs

SVG is categorically wrong for photos. A photograph has millions of unique colors and smooth tonal gradients that simply can't be described efficiently with shapes. Trying to save a photo as SVG produces a gigantic file that also renders slowly. Photos call for a raster: JPG, WebP or AVIF.

A simple rule of thumb: if a picture was "drawn on a computer," it's a job for SVG; if it was "taken with a camera," keep it as a raster. Logo, icon, diagram — vector. Portrait, landscape, screenshot — raster.

Layered chevron shapes in flat colors — illustrating the layered build-up of vector graphics — The same vector motif can be blown up to any size — the edges stay clean. Photo: Pexels

How to open and convert SVG

Good news: every modern browser understands SVG, no exceptions. The fastest way to view a file is to drag it into a Chrome, Firefox, Safari or Edge window. For editing, reach for a vector editor such as Inkscape (free), Adobe Illustrator, or the online tool Figma.

Sometimes you need to turn a vector into a raster — for instance, to drop the image into an editor, a messenger, or a service that doesn't understand SVG. In that case you convert it to PNG: a format with transparency and lossless compression that opens anywhere.

Upload the file

Drag your .svg into an online converter — nothing to install.

Pick size and format

Set the resolution or DPI you want, since a vector rasterizes to a specific size.

Download the result

The finished PNG opens in any program or service.

Turn SVG into PNG in a couple of seconds

The free FormatZ converter rasterizes a vector at the resolution you choose, right in your browser — no install, no sign-up.

Convert SVG to PNG

Need a different format? There's SVG to JPG for compatibility and SVG to PDF for printing. And if you need to go the other way and turn a raster logo into a vector, PNG to SVG comes in handy. The full list of conversions lives on the all formats page.