To render SVG code as an image, save the markup in a file ending in .svg and open it in a browser, or reference that file from HTML with an <img> element. To create a PNG or PDF file instead, use a renderer such as rsvg-convert or Inkscape. The right method depends on whether you need to display the vector graphic or export a separate image.
Choose how you want to render the SVG
| Goal | Use | What you get |
|---|---|---|
| Show a graphic on a web page | Save the markup as an SVG file and use it in an <img>, or embed the markup inline in HTML. |
A scalable vector graphic displayed in the browser. |
| Create a PNG from the command line | Use GNOME’s rsvg-convert. |
A raster image with controllable dimensions and output format options. |
| Export from a desktop editor or by object ID | Use Inkscape’s command-line export. | A PNG file, including an option to export a selected object. |
| Make a PDF | Use rsvg-convert --format=pdf. |
A PDF rendered from the SVG. |
SVG is vector artwork, so it can be rendered at different sizes without first defining a fixed pixel grid. A PNG is raster: its dimensions determine the number of pixels, and enlarging it later can make edges look soft. Keep the SVG when you need scalability or want to revise the artwork; export a PNG when a workflow or destination needs a raster image.
Display SVG code in a browser
Save the code as an SVG file
Put the complete SVG markup in a plain-text file and save it with an .svg extension, for example graphic.svg. The file should contain an SVG root element and the shapes, text, or other supported content that make up the drawing. You can then open the file in a browser to inspect it directly, or use it on a page:
<img src="graphic.svg" alt="Description of the graphic">Replace the source path with the location of your SVG relative to the HTML page, and write meaningful alternative text if the graphic conveys information. For a decorative image, use an empty alt value so assistive technology can skip it.
Recommended Free Tools
#1 Best Overall
Embed SVG markup inline
You can also place SVG markup directly in an HTML document, rather than saving and referencing a separate file. This is useful when the vector is part of the page itself or needs to participate in the page’s styling. MDN documents SVG use through HTML <svg> elements, image elements, CSS backgrounds, and Canvas drawing. The restrictions described below apply specifically when SVG is used as an image; they are not the same as viewing the SVG directly or embedding it as a document.
Know the limits of SVG-as-image
An SVG used in an image context—such as an <img> or CSS background—has security and feature restrictions. Scripts are disabled, external resources such as images and stylesheets cannot be loaded unless they are inlined through data URLs, and some platform-native styling is disabled. MDN notes that these restrictions do not apply when the SVG is viewed directly or embedded as a document with <iframe>, <object>, or <embed>. If a graphic depends on JavaScript or separately loaded assets, it may therefore appear incomplete as an image even though it behaves differently when opened directly. MDN’s SVG-in-HTML guide describes the supported embedding contexts and their distinctions.
Convert SVG to PNG or PDF with rsvg-convert
rsvg-convert, part of the librsvg project, renders SVG to PNG by default and can also output PDF or PostScript. After installing the tool for your operating system, run it in a terminal from the directory containing the input file.
Basic PNG conversion
rsvg-convert input.svg > output.pngThe command reads input.svg and writes the PNG bytes to output.png. The tool writes image data to standard output by default, which is why the shell redirection is needed. If you omit the input filename, it reads standard input, so you can pipe SVG markup or another command’s output into it.
Set output dimensions
To request a 1024-by-768-pixel output area while preserving the artwork’s proportions, use:
rsvg-convert --width=1024 --height=768 --keep-aspect-ratio input.svg > output.pngPreserving aspect ratio prevents the image from being stretched to fit a rectangle of a different shape. The rendered artwork may not fill both requested dimensions: the renderer fits it within the requested bounds while maintaining its proportions. For an image that must fill an exact layout, choose dimensions with the same aspect ratio as the SVG or plan how the surrounding page will handle empty space.
Export a PDF
rsvg-convert --format=pdf input.svg > output.pdfUse PDF when the destination needs a document format rather than a pixel image. The output format can be selected with --format; PNG is the default. See the rsvg-convert manual for supported options and details for the installed version.
Understand SVG dimensions, DPI, and background
Unexpected output size is often caused by the SVG’s sizing declarations, not by a failed conversion. The root element’s width, height, and viewBox affect how the renderer maps the drawing to pixels. librsvg documents these sizing rules:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →- Physical units: the default resolution for physical units is 96 DPI. An SVG declared as 2 by 3 inches therefore renders to 192 by 288 pixels at the default. At 300 DPI, the same physical dimensions correspond to 600 by 900 pixels.
- Only a viewBox: when the SVG has a
viewBoxbut no explicit width and height, librsvg uses the viewBox dimensions as pixel dimensions. - Percentage dimensions: percentage width or height needs a viewport size. If none is supplied, librsvg uses the viewBox size when one is present.
- No dimensions or viewBox: librsvg measures the graphic’s extents at a 1:1 scale, but its documentation strongly recommends specifying dimensions or a viewBox.
These rules are specific to librsvg’s documented behavior; other renderers can make different choices. If the output must have a predictable size, add explicit dimensions or a suitable viewBox and set export dimensions deliberately.
PNG output is transparent where nothing is painted by default. That is useful for logos and overlays, but a viewer with a white background can make transparency easy to miss. If the receiving application requires an opaque image, set a background color using an option documented for your installed rsvg-convert version. The manual lists the available background and sizing options.
Export a PNG with Inkscape
If you already use Inkscape for reviewing or editing SVG artwork, its command line can export a PNG:
inkscape --export-type="png" my_file.svgInkscape also documents exporting by object ID with --export-id, which can be useful when a document contains multiple objects and you only need one. The Inkscape command-line wiki identifies itself as a work in progress and points to the current command-line manual, so check the manual for the syntax supported by your installed version. Inkscape’s command-line guide provides the export overview.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsWhy an SVG looks blank or different
- The file opens but appears blank: check that the SVG root has a usable
viewBoxor width and height, and that the artwork lies within the visible coordinate area. Missing dimensions and percentages without a viewport can lead to unexpected sizing; librsvg’s documented sizing behavior is described above. - It works when opened directly but not in an image element: image-context restrictions can disable scripts and prevent external images or stylesheets from loading. Inline required assets as data URLs where appropriate, or use a document embedding context if the SVG needs features unavailable in an image.
- Text changes appearance: librsvg uses system fonts. A font unavailable on the machine rendering the image may be substituted, changing line breaks or spacing. Install the required font where permitted, or convert text to paths in an authoring workflow when consistent typography is essential.
- Animation or script-driven content is missing: librsvg handles static, non-scripted, non-animated SVG. A static export will not reproduce behavior that depends on animation or scripts.
- Some effects differ across browsers or tools: renderers do not support exactly the same feature set. librsvg supports many SVG 1.1 and SVG 2 features, but compatibility is not a guarantee that every browser, library, or editor will produce identical output. Compare the graphic in the target renderer and simplify or replace unsupported effects if necessary.
- The PNG has the wrong dimensions: inspect the SVG’s width, height, units, and viewBox, then set explicit export bounds. Physical units use a DPI conversion; viewBox-only and percentage-sized graphics follow different rules.
- The image background looks wrong: PNG transparency is the default for unpainted areas. Add a background if the destination cannot display transparency as intended.
For more on librsvg’s feature support and limitations, see its documentation. Browser display, librsvg, and Inkscape are separate rendering paths; test the final output in the environment where it will be used.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is a screenshot of a rendered web page rather than exporting the SVG file itself, ScreenshotNeo can capture a URL in one request. It is a website screenshot API and MCP server from ScreenshotNeo. This does not replace SVG-to-PNG conversion for a standalone graphic; it captures a page that displays the graphic.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpUse your own page URL and API key in place of the example values. The response can be PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for request parameters and response details.
- Cookie and consent banners, newsletter popups, and chat widgets are removed before capture; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers indicate the page verdict and whether the request was billed.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for Claude, Cursor, and other MCP clients. - The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Frequently Asked Questions
Can I render SVG code without converting it to PNG?
Yes. Save it as an .svg file and display it in a browser, or embed the markup inline in HTML. It remains vector artwork.
Does rsvg-convert support animated SVG?
No. librsvg is documented as handling static, non-scripted, non-animated SVG.
Why is an SVG PNG transparent?
PNG output is transparent in areas where nothing is painted by default; specify a background when you need an opaque image.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
