What Is SVG? | How It Differs from PNG and JPEG, and How to Convert It When It Won’t Open

How SVG differs from PNG and JPEG

PNG and JPEG record a picture as coloured dots (pixels) arranged in a grid. This is called a raster format. SVG instead records drawing instructions as text, such as “draw a circle of radius 50 at this position in this colour”. Because the picture is redrawn from those instructions each time it is displayed, the edges stay sharp however far you zoom in.

An SVG is XML text, so opening it in Notepad shows a list of tags. That is why “my SVG looks like garbled text in Notepad”: the file isn’t broken. The differences between raster formats are covered in PNG vs JPEG vs WebP.

Where SVG works and where it doesn’t

Most problems come from the place you hand the file to not supporting SVG. Knowing where it works lets you decide whether to convert it before sending.

Upload forms reject SVG not because of size or appearance but for security. SVG is text, so scripts can be written inside it, and many services ban SVG uploads in advance because running such a script on their site would be a problem. Your own SVG gets the same treatment, so for uploads it is quicker to prepare a PNG from the start. Conversely, SVG is the better choice for feeding cutting machines or laser engravers. Points to check before processing, using family crests as an example, are covered in making SVG and transparent PNG files of family crests.

How to convert SVG to PNG or JPEG

Because SVG doesn’t lose quality when enlarged, you have to decide yourself what size to export when converting to PNG. This is the biggest difference from converting between PNG files.

1. 1

   Check whether the SVG has a width and height

   Open it in a text editor and see whether the opening <svg> tag has width and height. If not, add them, or set them in the same ratio as the viewBox values. An SVG without them may be treated as a default size and exported small.

2. 2

   Decide the finished size you need

   For the web, use twice the width you want to display; for print, work back from the number of pixels needed. If you change the SVG’s width and height to the target size before converting, you get a PNG of that size.

3. 3

   Drag it into the converter

   Load the SVG into the image format converter and choose PNG as the output format. Processing happens entirely in your browser, and the image is not sent to a server.

4. 4

   Decide how to handle the background

   PNG keeps the background transparent. JPEG can’t store transparency, so transparent areas are filled with white. If the artwork would look wrong on a white background, keep it as PNG.

Troubleshooting when it won’t open or looks wrong

SVG problems fall into two kinds: “it won’t open” and “it opens but looks different”. Narrowing down the cause from the symptom tells you the fix.

The most common problem is fonts. If text is stored as text inside the SVG and the device opening it lacks that font, a different typeface is substituted, the widths change and the layout breaks. For SVGs you hand to others, converting text to outlines when exporting is the safe option. A checklist for swapping in a new logo is in logo redesigns.

Can you turn a PNG back into an SVG?

In short, not automatically. A PNG is a collection of pixels and no longer contains information such as “this is a circle” or “this is text”. What conversion software does is tracing: it estimates where colours change and redraws outlines. It is not restoring the original shapes.

• Simple, crisp shapes in a single colour (silhouettes, basic marks) trace reasonably well.
• Logos with fine lines, gradients or shadows tend to break down, with wavy edges and extra colours.
• Text becomes paths, so you can’t change the wording or font afterwards.
• Starting from a JPEG means compression noise gets picked up as shapes too.

So if you plan to use a logo for a long time, the surest approach is to get the SVG in the first place. When commissioning one, ask for the SVG together with exported PNGs (large, medium and small); that way you won’t need to recreate anything whether you use it on the web, in documents or on social media.

FAQ

How do I open an SVG file?

The easiest way is to drag and drop it into a browser. Chrome and Safari both display it as an image. If double-clicking opens the code, that is because the default app is a text editor; the file isn’t broken. To edit it, open it in vector software such as Illustrator, Inkscape or Figma. When giving it to someone, it is considerate to include a PNG too, since their setup may not open it.

Should I use SVG or PNG?

As a rule, use SVG for logos and icons on your own website and PNG for images you hand to other people or services. SVG doesn’t lose quality when enlarged and simple shapes keep files small, but social media, upload forms and Google Slides still don’t accept it. Neither suits photos; use JPEG or WebP. If unsure, keep the SVG as the master file and export PNGs for each use.

Why does the text shift when I print an SVG?

If the SVG contains text as text and the printing device doesn’t have that font, a different typeface is substituted. A different typeface has different character widths, so lines wrap or spill out of their boxes. Converting text to outlines (paths) when exporting turns it into shapes, so it won’t break. Print shops often ask for PDF or AI files anyway, so check which formats they accept in advance.

Is there a tool that converts PNG to SVG?

Tracing can produce something similar, but it doesn’t restore the original SVG. It can be usable for single-colour silhouettes or simple marks, but logos with fine lines, gradients or text end up with messy outlines. This site’s image format converter outputs PNG, JPEG and WebP, and does not export SVG. If you need an SVG, the surest route is to ask the original designer for the source file.