Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallTo display SVG code on a webpage, save it as an .svg file and reference it with an HTML <img>, or place the SVG markup inline in the page. To create a separate PNG or PDF file, use a renderer such as rsvg-convert or Inkscape. The right method depends on whether you need to show the vector on a webpage or export a raster or document file.
Choose how you want to render the SVG
| What you need | Use this method | Important consideration |
|---|---|---|
| Show an SVG on a webpage | Save the markup as an .svg file and use <img>, or embed the markup inline. |
SVG loaded as an image has restrictions: scripts are disabled and external resources may not load. |
| Save a PNG or PDF from a terminal | Use librsvg’s rsvg-convert. |
Dimensions, physical units, DPI, transparency, and the viewBox affect the result. |
| Export from a desktop editor or by object ID | Use Inkscape’s command-line export. | Check the command-line manual for the syntax supported by your installed version. |
Display SVG code in a browser
Use an SVG file as an image
Put the SVG markup in a plain-text file with an .svg extension, for example graphic.svg. Then reference that file from your page:
<img src="graphic.svg" alt="Description of the graphic">The path in src is relative to the HTML file unless you provide an absolute URL. The alt text should describe the image’s purpose for people who cannot see it; do not use the filename as a substitute for a useful description.
You can also use SVG as a CSS background image, or draw it onto a canvas with drawImage. MDN documents SVG support in these image contexts, as well as in HTML <img> and <svg> elements, SVG <image>, and <feImage>.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
Embed the markup inline
If you have the SVG source and want it directly in the page, put its elements inside an <svg> element in the HTML. Inline SVG is part of the document rather than a separate image file. This can be useful when page-level styling or direct access to SVG elements is important. It is a different embedding context from loading an SVG through <img>, so do not assume that behavior or restrictions are identical.
Know the limits of image-context SVG
When an SVG is used as an image, browser security and feature restrictions apply: JavaScript is 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 distinguishes this image context from viewing SVG directly or embedding it as a document with <iframe>, <object>, or <embed>. If the image is blank or incomplete, check for scripts, external dependencies, or styles that the image context cannot use before changing the markup.
Convert SVG to PNG or PDF with rsvg-convert
GNOME’s rsvg-convert, part of librsvg, renders SVG to PNG by default and can also produce PDF or PostScript. For a basic PNG conversion, run:
rsvg-convert input.svg > output.pngThe command reads input.svg and writes the rendered PNG to standard output; the shell redirects that output to output.png. To request PDF output, set the format explicitly:
rsvg-convert --format=pdf input.svg > output.pdfWhen no input filename is supplied, rsvg-convert reads from standard input. That makes it usable in a pipeline when another program supplies SVG markup.
Set dimensions and preserve proportions
Use --width and --height to request output dimensions. Add --keep-aspect-ratio if the image should keep its proportions within those bounds:
rsvg-convert --width=1024 --height=768 --keep-aspect-ratio input.svg > output.pngThese are maximum dimensions for the rendered output when aspect ratio is preserved; the result may use less than one requested dimension to avoid distortion. If you need a particular pixel size, inspect the SVG’s dimensions and viewBox and verify the generated file rather than assuming that every SVG fills both requested dimensions.
Understand DPI, viewBox, and transparent backgrounds
- Physical units: librsvg’s default DPI for physical units is 96. An SVG declared as 2 by 3 inches therefore renders as 192 by 288 pixels at that default; at 300 DPI it renders as 600 by 900 pixels.
- Only a viewBox: when only a
viewBoxprovides dimensions, librsvg uses the viewBox dimensions as pixel dimensions. - Percentage dimensions: percentage width and height need a viewport size. Without one, librsvg uses the viewBox size if a viewBox is present.
- No width, height, or viewBox: librsvg measures the graphical extents at 1:1 scale, but its documentation strongly recommends specifying dimensions or a viewBox.
- Background: PNG output is transparent where nothing is painted by default. If the destination requires an opaque image, set a background color using the option supported by your installed
rsvg-convertversion.
These rules explain why two SVG files containing similarly sized artwork can export to different pixel dimensions. Before conversion, check the root <svg> element for its width, height, and viewBox, and consider whether physical units or percentages are involved.
Recommended Free Tools
Export a PNG with Inkscape
Inkscape can export an SVG to PNG from the command line:
inkscape --export-type="png" my_file.svgInkscape also documents exporting by object ID with --export-id, which is useful when the file contains multiple objects and you need a particular one. The Inkscape wiki describes itself as a work in progress and links to the current command-line manual; options can depend on the installed version, so consult that manual if the command is rejected or you need precise export controls.
Why can the rendered SVG look different or be blank?
An SVG is vector markup, but its output still depends on the context and rendering engine. Start with the checks below, changing one issue at a time.
The SVG is blank in an image element
- Confirm that the file path in
srcresolves to the intended SVG. - Check that the file contains visible shapes within its coordinate system and that the shapes are not fully transparent or styled to blend into the background.
- Look for scripts or external images and stylesheets. Scripts are disabled in image contexts, and external resources may not load there.
- Check the SVG’s
width,height, andviewBox. Missing or mismatched dimensions can cause unexpected sizing or positioning.
The exported PNG has the wrong size or proportions
Check whether the source uses physical units, percentages, or only a viewBox. The renderer’s DPI and available viewport affect how those declarations become pixels. With rsvg-convert, set width and height deliberately and use --keep-aspect-ratio when stretching would be wrong.
The output has a transparent background
That is the default for unpainted areas in librsvg’s PNG output. If a downstream tool or destination expects an opaque image, set an explicit background color during conversion rather than assuming white will be added automatically.
Fonts, effects, or other features differ between renderers
SVG support is not identical across rendering engines. According to the librsvg documentation, librsvg handles static, non-scripted, non-animated SVG, relies on system fonts, and supports many SVG 1.1 and SVG2 features. An SVG that depends on animation, scripts, a particular font that is unavailable on the rendering system, or renderer-specific behavior may not look the same everywhere. For predictable output, test with the engine that will produce the final image and make required fonts available there.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your SVG is already published in a webpage and you need a screenshot of that rendered page, ScreenshotNeo can capture a URL with one request. It is not a converter for arbitrary raw SVG markup or a local SVG file; use rsvg-convert or Inkscape for those jobs. ScreenshotNeo’s clean-shot options remove cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides screenshot tools for AI agents and MCP clients.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace https://stripe.com with the public URL of the page containing your SVG. The request returns an image; use ScreenshotNeo’s API documentation for request options and response details. ScreenshotNeo offers 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for the free plan.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Which SVG rendering method should you use?
- For a webpage, use an SVG file in an
<img>or embed the markup inline when you need document-level integration. - For a repeatable terminal conversion to PNG or PDF, use
rsvg-convertand set dimensions or format explicitly when needed. - For desktop review or exporting selected objects, use Inkscape and follow the command-line manual for your version.
- For output that must look consistent, account for image-context security restrictions, renderer feature support, system fonts, and sizing declarations.
Frequently Asked Questions
Can I convert SVG directly to PDF with rsvg-convert?
Yes. Specify --format=pdf and redirect the output to a PDF file.
Does an SVG in an HTML image element run its JavaScript?
No. Scripts are disabled when SVG is loaded in an image context such as <img>.
Why does my PNG have no white background?
Librsvg leaves unpainted areas transparent by default; set a background color if you need an opaque export.
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.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors
