How to open an SVG file online and save it as PNG or JPG

How to open an SVG file online and save it as PNG or JPG

An SVG is a text file that describes a drawing, so it opens in a browser rather than a photo app. Preview it safely, find out why it might look wrong, then save it in the format the next app accepts.

Why SVG files cause trouble outside a browser

Many photo viewers, upload forms, and print services don't accept SVG, and when a file does open it can look wrong. An icon drawn in white disappears on a white background. A file with no width, height, or viewBox gets a default size of 300 × 150 pixels, and the drawing can end up outside that area. An icon that uses currentColor shows as black, because a standalone image has no text color to borrow.

Files from other people bring one more worry: an SVG can contain scripts and links. Shown as an image, none of that runs.

Preview the SVG, then export it

Open the file in the SVG Previewer. Paste the code, drop the .svg file on the text box, or upload it. It draws the SVG as an image, the way an <img> tag would, so scripts, event handlers, and links inside the file don't run. Switch between light, dark, and checkerboard backgrounds to find white or transparent parts, zoom from 25% to 800%, and read the size and viewBox. Images and web fonts linked from the file are not loaded.

For a PNG, use SVG to PNG. Choose a scale from 1x to 8x or an exact width or height, and keep the background transparent or pick a color. The drawing is rendered at the final size, so a 24 × 24 icon at 4x comes out as a sharp 96 × 96 PNG instead of an enlarged small one. The PNG can be up to 8000 pixels on each side.

When a form or print service insists on JPG, use SVG to JPG. JPG has no transparency, so pick the color that fills the empty areas, and set the quality: the default of 92 keeps graphics clean, with full color resolution from 90 up. For logos and flat artwork, PNG is the better choice whenever it is accepted.

Open an SVG and save it as PNG or JPG

  1. Drop the .svg file on the SVG Previewer, or paste its code.
  2. Switch the background to dark and then to checkerboard to find white or transparent parts.
  3. If the drawing is tiny or missing, check the size and viewBox shown under the preview.
  4. For a transparent image, open SVG to PNG, choose 2x or more, keep Transparent background ticked, and download.
  5. For a form that only takes JPG, open SVG to JPG, pick the background color, keep the quality at 92, and download.

What the SVG tools can't load or keep

  • Images and web fonts linked from the SVG are not loaded, so text in a custom font falls back to a system font. Convert the text to paths in your design app first.
  • Animations driven by JavaScript don't play in the preview.
  • PNG and JPG output is limited to 8000 pixels on each side.
  • JPG has no transparency. Empty areas take the background color.

Frequently asked questions

Is it safe to open an SVG file from someone else?

Yes, in the SVG Previewer. The file is shown as an image, so browsers don't run its scripts or open its links, and nothing is uploaded.

Why does my SVG look blank?

Often the drawing is white on a white background, or the file has no size and no viewBox and falls back to 300 × 150. Switch to the dark background and check the viewBox.

Will an SVG converted to PNG be blurry?

No. The vector drawing is rendered at the final pixel size, so a 4x or 8x PNG is as sharp as the SVG.

Should I save a logo as PNG or JPG?

PNG. Flat colors and sharp edges are what JPG handles worst, and PNG keeps transparency.

Tools used in this guide

  • SVG PreviewerImage Tools

    Shows SVG code as an image with zoom, backgrounds, and size details.

  • SVG to PNGImage Tools

    Turns SVG files into sharp PNG images at any scale, with transparency.

  • SVG to JPGImage Tools

    Turns SVG files into JPG images at any size, on a background color you pick.

More from the blog

All guides