How to Take Selenium Screenshots of a Page with SVG Graphics

Short answer: Selenium screenshots capture what the browser has rendered, including inline SVG graphics. Use driver.save_screenshot() for the current browser view, an element screenshot for a cropped SVG or chart, and a browser-specific full-page method when you need the complete scrollable document. If a chart appears blank or incomplete, wait for the application to finish drawing it before capturing.

Choose the screenshot scope

What you need	Method	What to check
Visible browser view	driver.save_screenshot("page.png")	This captures the current browser context, not necessarily the entire scrollable document.
One SVG or chart element	element.screenshot("chart.png")	The element must be present and visible; the output is cropped to its bounds.
Entire scrollable page	A full-page API supported by your browser and Selenium binding	Full-document capture is not interchangeable with the ordinary current-context screenshot. Selenium documents such a method for Firefox’s Python API.

Selenium’s documented file screenshot methods save PNG images. Inline SVG does not need to be converted to a separate bitmap first: the browser renders it as page content, and the screenshot captures the rendered result. See the Selenium Python WebDriver API and the Selenium browser-window screenshot guide.

Capture an SVG page with Python

Install Selenium with pip install selenium, then run this script. Replace the example URL and, if necessary, the selector with one that identifies your chart.

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait

url = "https://example.com/page-with-svg"
driver = webdriver.Chrome()

try:
    driver.get(url)

    # Wait for the SVG element to exist and become visible.
    svg = WebDriverWait(driver, 20).until(
        EC.visibility_of_element_located((By.CSS_SELECTOR, "svg"))
    )

    # Cropped screenshot of the SVG element.
    svg.screenshot("chart.png")

    # Screenshot of the current browser view.
    driver.save_screenshot("page.png")
finally:
    driver.quit()

Selenium’s get() waits for the page’s onload event, but an application may draw or update a chart afterward. Waiting for an SVG to become visible is a useful baseline; for an asynchronously populated chart, wait for a condition that reflects completed data or drawing, such as a chart-specific class, nonempty SVG content, or a known final axis label. The correct condition depends on the page. See the navigation and screenshot API documentation.

Save the current browser view

Use driver.save_screenshot("page.png") when the visible browser view is the desired output. The alternative driver.get_screenshot_as_file(path) also saves a PNG and returns False if it encounters an I/O error. Check the return value if you use that method.

saved = driver.get_screenshot_as_file("page.png")
if not saved:
    raise OSError("Could not write screenshot.png")

Capture only the SVG or its container

Use an element screenshot when you need the chart without the surrounding page. Some charts put the SVG inside a wrapper, so target the wrapper if the SVG’s own bounds omit a legend or label.

chart = driver.find_element(By.CSS_SELECTOR, "svg")
chart.screenshot("chart.png")

To capture a containing chart region instead, choose its actual selector, for example .chart-container. Selenium’s screenshot guide includes element screenshot examples: browser and element screenshots.

Capture a full document

A normal screenshot represents the current browser context and should not be assumed to include every scrolled section. Selenium’s Firefox Python API documents save_full_page_screenshot for full-document capture. Confirm that the method is available for your chosen browser and binding before relying on it; support varies by API.

# Firefox Python binding; confirm availability in your installed Selenium version.
driver.save_full_page_screenshot("full-page.png")

For other browser and language combinations, consult that binding’s screenshot API and verify the resulting image dimensions and captured content. The Selenium Firefox Python API documents the full-page method.

Java example

The same rendered-content approach works in Java. This example saves a current-context screenshot through Selenium’s TakesScreenshot interface. Add the Selenium Java dependency used by your project and configure a compatible browser driver.

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;

public class SvgScreenshot {
    public static void main(String[] args) throws IOException {
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://example.com/page-with-svg");
            new WebDriverWait(driver, Duration.ofSeconds(20)).until(
                d -> d.findElement(org.openqa.selenium.By.cssSelector("svg")).isDisplayed()
            );
            File screenshot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
            Files.copy(screenshot.toPath(), new File("page.png").toPath());
        } finally {
            driver.quit();
        }
    }
}

This waits for visibility, not necessarily completion of chart data or animation. Replace the wait predicate with an application-specific ready condition if needed. Selenium’s browser-window guide demonstrates screenshots with Java’s TakesScreenshot.

Make asynchronous charts ready before capture

1. Navigate to the target URL.
2. Wait for a page-specific signal that the chart is populated, rather than relying only on navigation completion.
3. Wait for the target SVG or chart container to be visible.
4. Capture the element or current browser view, depending on the desired scope.
5. Open the PNG and verify that the chart, labels, and expected page region are present.

For a simple site where SVG presence is sufficient, the Python example’s visibility wait may be enough. For a data-driven chart, presence can happen before the data arrives. If animations are active, use the application’s completion signal or a stable state exposed by the page; there is no universal Selenium wait that proves every SVG chart is finished.

Common problems and fixes

Symptom	Likely cause	What to try
The SVG or chart is missing	The application inserts or draws it after the page load event.	Wait for a chart-specific ready condition and then for the element to be visible.
The screenshot is blank or the SVG looks incomplete	The graphic may not have finished rendering, or the chosen capture method/browser behaves differently for that page.	Inspect the output image, wait for the app’s completed state, and compare an element screenshot with a current-context screenshot. No universal SVG-specific repair is established.
The chart is clipped	An element screenshot uses that element’s bounds, or the viewport screenshot does not include off-screen content.	Capture a wrapper that includes labels and legends, adjust the viewport when appropriate, or use a supported full-page method.
Only part of the document appears	The ordinary screenshot captures the current context rather than necessarily the complete scrollable document.	Use a full-page method documented for your browser and binding, then verify the output.
The screenshot file is absent	The path is unwritable, invalid, or points to a missing directory.	Use a writable path, create its parent directory, and check the return value of get_screenshot_as_file.
The script exits before capture or hangs	The wait condition never becomes true, or the browser session is not cleaned up after an exception.	Use a realistic timeout and a condition tied to the page; keep browser shutdown in a finally block.

Performance, reliability, and output checks

• Capture only what you need: an element screenshot avoids saving surrounding content when the chart alone is the deliverable. Full-page captures can produce much larger images.
• Wait on state, not arbitrary time: an explicit condition usually avoids both premature capture and unnecessary fixed delays. A fixed sleep can still be appropriate when the page offers no observable readiness signal, but it is less precise.
• Keep browser cleanup reliable: call driver.quit() in a finally block so failures during waiting or writing do not leave a session open.
• Validate the artifact: check that the PNG exists and inspect its dimensions and visible chart content. The output depends on the page, browser, viewport, and capture scope.
• Cost: Selenium itself is an open-source browser automation tool; your operational costs come from running the browser and infrastructure. This method has no per-screenshot API charge, but you manage browser setup, execution, and failures.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. The URL below uses the same request shape documented in the ScreenshotNeo API docs; replace the URL with the page you want to capture.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page-with-svg -o shot.webp

Equivalent Python and Node.js calls:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page-with-svg"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/page-with-svg'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await require('node:fs/promises').writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, with the response identifying the page verdict and billing status in headers. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card.

FAQ

Does Selenium need to convert an inline SVG to PNG before taking a screenshot?

No. The browser renders inline SVG as page content, and Selenium’s screenshot captures the rendered browser output as PNG.

Should I screenshot the SVG or the whole page?

Use an element screenshot for a cropped chart and a driver screenshot for the current browser view. Use a supported full-page API when you need the complete scrollable document.

Why can an SVG still be blank after driver.get()?

The page’s load event does not guarantee that later application code has finished fetching data or drawing the chart. Wait for a page-specific completed state.

Will the ordinary Selenium screenshot include below-the-fold content?

Do not assume so. Check the API for your browser and binding; Selenium’s documented Firefox Python API includes a full-page screenshot method.

References

• Selenium Python WebDriver API: navigation and screenshots
• Selenium documentation: browser-window and element screenshots
• Selenium Firefox Python API: full-page screenshot methods