‹ Guides

SVG or a raster image

Keep vector artwork editable or export a raster copy with the right dimensions and background.

An SVG logo can work on a small button and a large banner. A photograph usually needs a raster export at the right size. Start with the artwork you have and the format the destination accepts. Keep the editable source so you can make another export later.

Know what kind of picture you have

A raster image is a picture on a grid of pixels. SVG describes graphics with elements such as shapes and paths, and can also contain raster images. The SVG 2 introduction defines it as an XML language for vector and mixed vector/raster graphics. So an .svg extension doesn't prove that every visible part is a scalable vector path.

For simple artwork originally drawn with paths, SVG lets you keep those paths instead of committing the whole design to one pixel size. For a photo or a screen capture, a raster export is usually the simpler thing to deliver. If you have an editable design file, keep it too. A delivery format isn't always a replacement for the source project.

Keep SVG when the destination can use it

Say you already have an SVG logo and need it in another color. Start with Recolor SVGs, which changes colors while keeping the output as SVG. For size changes that should stay vector, use Resize SVGs. Neither job requires making a PNG first.

SVG Viewer and Code Editor helps you inspect a file before deciding what to do with it. SVG Optimizer shrinks the SVG markup. After any change, open the saved copy and compare the design, including small shapes and text. A smaller file only helps if it still looks like the artwork you meant to keep.

Check the destination, too. A file picker that only accepts PNG or JPG needs a raster copy even if the SVG is the best source to keep. Keeping a source SVG and an exported image side by side often covers both.

Choose pixels at export time

Open SVG To Raster when the destination requires an image or a particular pixel size. Choose SVG, select a format in Convert to, and enter Output Width (px) or Output Height (px). Lock aspect ratio is on by default, so changing one dimension updates the other from the source's proportions.

The tool renders the vector at the requested output resolution instead of stretching a smaller raster preview. Its size controls accept 1 to 8192 pixels per side. That range is a tool limit, not a suggestion to export every logo at 8192 pixels. Set the size the destination needs and check the Raster Preview before downloading.

PNG is the starting format. For PNG and WebP, you can keep a transparent background or turn it off and choose a background color. JPG always uses the chosen background color, which starts as white. WebP and BMP appear only when the browser can encode them. For JPG or WebP, the quality control gives you another choice to compare with the preview and file size.

Check text and linked resources

An SVG can refer to a font or an image outside the file. When a browser renders an SVG as an image, linked external resources can be restricted. That's one reason a design that looked right in an editor can change in a raster preview. The SVG processing modes specification describes the restrictions of secure image processing.

For important lettering, prepare a self-contained export in the design app, or convert the text to paths there. Then check the saved PNG or JPG. Look at the border, any empty margin, and the letters as well as the central symbol. An export that's technically the requested size can still have the wrong composition for a button or profile picture.

Don't expect tracing to restore a photograph

Image To SVG goes in the other direction by tracing a bitmap into vector artwork. That can be useful for a graphic with simple edges. Compare the result with the source before deciding it's a useful master. Changing how a picture is represented can't bring back detail missing from the bitmap you supplied.

Keep the original SVG for later changes and export fresh raster copies from it when you need different sizes. The Lambda Guru tools process these files on your device. The last step is still yours: open the saved file where it'll be used and make sure it looks right there.

Follow one export from source to pixels

The SVG export walkthrough includes a small design with known dimensions and a viewBox. Try its 160 by 90 and 640 by 360 exports to see how thin edges and lettering change. The transparency walkthrough covers the background choice using a separate generated graphic.