How to Convert SVG to PNG or JPG at the Right Size

Convert an SVG in five steps

1. Add the SVG file to the converter.
2. Choose PNG if the image has transparent areas or you want sharp edges, or JPEG if it is a photograph-like illustration with many colors that must be small.
3. Pick the size in the maximum size menu. The SVG is drawn so that its longest side equals that value, anywhere from 640 to 3840 pixels. Raster images are never enlarged, but SVG is drawn at the chosen size because it can be rendered sharply at any scale.
4. If you chose JPEG, set the background color, since JPG cannot hold transparency.
5. Download the result and open it at 100 percent to check edges and text.

With "Original size" selected, the SVG is drawn at the size written in the file, or at 1024 pixels on the long side if the file states no size.

Size units in the file and what they become

An SVG's width and height can be written in several units, and the converter turns the absolute ones into pixels at 96 pixels per inch, which is the CSS convention. That includes centimeters, millimeters, inches, points and picas.

So a logo exported at 10 cm wide becomes only about 378 pixels with Original size, which looks soft on a modern screen and will be too small for print. The unit tells you what the designer intended on paper, not how many pixels you need. Use the maximum size menu to set the real target instead of relying on Original size. Percentages are ignored and the size is taken from the viewBox instead, and the converter reads em as 16 pixels and ex as 8, which are conventions rather than the designer's intent, so rely on the menu choice for these.

Pixel math: how big should the PNG be

Work backwards from the destination.

• Website image displayed 400 CSS pixels wide: on a screen with a device pixel ratio of 2, which is common on phones and laptops, the browser needs 800 pixels. Choose 800.
• Presentation slide or video frame: full HD is 1920 x 1080; choose 1920.
• Print at 10 cm width, 300 dpi: 10 / 2.54 x 300 = 1181 pixels. Choose 1280 as the next menu value up.
• A4 sheet, 300 dpi: 210 mm = 2480 pixels wide, 297 mm = 3508 pixels high. The long side is 3508, so choose 3840.
• A3 poster, 300 dpi: the long side is 420 mm = 4961 pixels. That exceeds the largest menu value of 3840, which spread over 420 mm gives 3840 / (420 / 25.4) = 232 dpi, below the 300 dpi target. For print jobs that big, export the PNG from the design program that made the SVG, or hand the SVG itself to the printer, since it can be drawn at any size.

Three typical files and what Original size gives

An icon with only a viewBox. Many icon sets ship files like viewBox="0 0 24 24" with no width or height. The file states no size, so Original size draws it at 1024 pixels on the long side, a scale factor of 1024 / 24 = 42.7. That is plenty sharp, and usually larger than you need for a web icon, so choose 256 or 640 from the menu when 1024 is too heavy.

A logo exported in millimeters. A file declaring width="5mm" is 5 / 25.4 x 96 = 18.9 pixels wide at Original size, much too small to use. Choose a menu size like 1280 and the same vector is drawn at 68 times the width, still crisp.

A chart exported in pixels. A chart saved as width="800" height="400" gives an 800 x 400 PNG at Original size. If the chart text looks small in your slide, go for 1920 instead; the layout scales as a whole, so labels grow along with the bars.

The viewBox, and why edges get cut off or padded

The viewBox attribute defines the drawing's own coordinate system, for example viewBox="0 0 100 100". The width and height say how large the picture is shown. When the two have different shapes, the default rule (preserveAspectRatio set to xMidYMid meet) scales the drawing to fit inside and centers it. MDN's example: a 100 x 100 viewBox in a 60 x 30 viewport scales by 0.3, fills only 30 x 30 pixels and leaves 15 pixels of empty space on each side. In your output those empty bands are transparent in a PNG and the background color in a JPG.

Cropping comes from the opposite mistake: drawing elements that lie outside the viewBox. Anything beyond its edges is clipped. If the file was exported with a viewBox that is smaller than the artwork, parts of an icon, a shadow or a stroke go missing. Open the SVG in an editor and set the drawing area to fit the artwork. A stroke that is centered on an edge loses half its width, a common reason for flat-looking borders.

Text, fonts and linked pictures

Text in an SVG is stored as text, and the converter's browser draws it with fonts that are available on your device. A font that is only referenced, not stored, will be replaced by a similar one, and the letter widths change, so lines can overflow or look different from what the designer saw. Browsers also refuse to load external files for an SVG that is drawn as a picture; MDN notes that external resources such as images and stylesheets cannot be loaded, though they can be used if embedded as data: URLs. Practical consequences: a web font linked from a stylesheet, or a picture linked by address, may not show.

The reliable fix lives in the editor, before conversion: convert text to outlines (paths), and embed any pictures instead of linking them. After that the SVG looks the same everywhere.

Blurry results and what to do

Blur almost never comes from the conversion; it comes from a size that was too small for where the image ended up. A 378 pixel PNG stretched to fill a 1000 pixel wide slide will be soft, because the PNG cannot gain detail. Go back to the SVG and draw it at the larger menu size. Since the SVG is drawn fresh at each size, larger output is genuinely sharper, unlike enlarging a PNG afterward. If edges look soft even at the right size, check whether the SVG contains embedded raster pictures; those keep their own resolution. For help choosing between PNG and JPG for the result, see JPEG vs PNG, and for what the file format itself can store, image file formats explained.