How to Take a Full-Page Screenshot of a Website with SVG Graphics

To capture an entire website with its SVG graphics, use Chrome DevTools’ Capture a full size screenshot, Firefox’s full-page screenshot feature, or Playwright with fullPage: true. These capture the page as the browser renders it. A PNG or JPEG screenshot is a raster image; the documented workflows do not promise to preserve the original SVG markup or editable vector paths. Check the saved image at its intended size, especially if SVG detail or sharpness matters.

Choose a capture method

Method	Best for	How it works
Chrome DevTools	A one-off manual capture	Capture the full page from Device Mode.
Firefox	A one-off capture in Firefox	Use the screenshot control or Web Console command.
Playwright	Repeatable or scripted captures	Run browser automation and set `fullPage: true`.

For manual work, use the browser you already have open. For repeat captures, use Playwright so the steps can be run from a script. If the screenshot must reflect real-device behavior, test on the device: Chrome Device Mode simulates dimensions but does not reproduce every aspect of an actual mobile device.

Capture a full page in Chrome DevTools

Open the webpage in Chrome and open DevTools.
Turn on Device Mode using the device toolbar button.
Open the Device Mode More options menu.
Choose Capture a full size screenshot. The separate Capture screenshot command captures only the visible viewport.
Open the saved image and inspect the top, middle, and bottom, including the SVG details you care about.

Chrome’s documented workflow captures the whole page, including content outside the current viewport. Device Mode can help set viewport dimensions; it is not a complete substitute for testing on a real device.

See Google’s Chrome DevTools Device Mode documentation.

Capture a full page in Firefox

Firefox provides a full-page screenshot control in its developer tools. If the screenshot button is not visible, open DevTools Settings, find Available Toolbox Buttons, and enable Take a screenshot of the entire page. Then use that control to save the capture.

You can also capture from the Web Console. Enter this command, replacing the filename if needed:

screenshot screenshot.png --fullpage

The --fullpage option requests the whole page rather than only the visible browser area. Consult Mozilla’s documentation for Firefox screenshot controls and Web Console tips.

Automate a full-page screenshot with Playwright

Playwright’s fullPage screenshot option captures the full scrollable page, as if it were one tall screen. Here is a complete Node.js example using Playwright’s documented API:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'screenshot.png', fullPage: true });
  await browser.close();
})();

Install Playwright in your Node.js project with npm install playwright, then run the script. Change the URL and viewport to match your use case. The networkidle wait is a practical choice for pages whose network activity settles; pages with persistent connections or background requests may need a different readiness condition, such as waiting for a page-specific element before capturing.

For Python, install the Playwright package and its browser, then use the same full-page option:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1440, "height": 900})
    page.goto("https://example.com", wait_until="networkidle")
    page.screenshot(path="screenshot.png", full_page=True)
    browser.close()

Install with pip install playwright and playwright install chromium. Replace the URL and viewport as needed. For dynamically rendered pages, wait for a selector that indicates the SVG or page content has loaded before taking the screenshot.

See the Playwright screenshot documentation.

Make sure SVG graphics render well

A screenshot records pixels produced by the browser’s rendering process. The documented capture features do not say that the output retains source SVG markup or editable vector paths. If you need editable vector artwork, keep or obtain the original SVG separately rather than treating a screenshot as a vector export.

Check the SVG loaded: inspect the saved output and confirm the graphic appears. If it is missing, check whether the page’s image or other resources loaded before capture.
Check the entire page: examine the top, middle, and bottom for missing or clipped content.
Check sharpness at the intended use size: choose capture dimensions and pixel density suitable for how the image will be displayed, then inspect the result at that size and zoom level.
Compare viewport and full-page captures: if an SVG appears differently or is clipped only in the full-page image, compare with a viewport capture and investigate the page’s loading and layout.
Consider embedding and CSS: SVG appearance can depend on how the graphic is embedded, its CSS, loading behavior, and browser rendering. Check those page-specific conditions when one graphic is incorrect.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its full-page capture loads lazy images, and its API can return PNG, JPEG, WebP, or PDF. Make one GET request with the page URL:

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

Python:

import requests

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

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
const image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

See the ScreenshotNeo API documentation for setup and options. Before the capture, ScreenshotNeo accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.

Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.

Troubleshooting

Symptom	Likely cause	What to do
Only the visible area was captured	You used the viewport screenshot command.	In Chrome choose Capture a full size screenshot; in Firefox enable and use the entire-page control or add `--fullpage`; in Playwright set `fullPage: true` (Python: `full_page=True`).
An SVG is missing	The graphic or its resources may not have loaded before capture.	Verify it appears in the browser, wait for a page-specific selector or content-ready condition, then capture again.
An SVG is clipped	The page layout, embedding, or CSS may constrain the graphic, or the full-page layout may differ from the viewport.	Compare a viewport screenshot and full-page screenshot, then inspect the page’s layout and SVG embedding.
The result looks soft when zoomed	A screenshot is a raster image at the chosen capture dimensions.	Capture at dimensions and pixel density suited to the intended display size. Retain the source SVG if editable vector output is required.
Playwright waits too long or does not reach network idle	The page may keep network activity open or make background requests.	Wait for a meaningful page selector or another page-specific readiness condition instead of relying on network idle.
Mobile output differs from a real phone	Device Mode simulates dimensions but not every real-device behavior.	Check the result on the target device when hardware-specific rendering or interactions matter.

Performance, reliability, and output checks

Full-page captures cover more content than viewport captures, so the page must render and load the content you want included. For repeatable work, use a scripted workflow such as Playwright and make its wait condition match the page. A fixed network-idle wait may not fit pages with persistent background traffic; a page-specific selector can make the capture condition more relevant. Inspect the final file rather than assuming that a successful command guarantees every SVG rendered correctly.

For fidelity, keep the viewport consistent across captures and verify the top, middle, and bottom. Use a real device when simulated viewport dimensions are insufficient. The research sources provide no benchmark for capture speed or a guarantee of editable SVG preservation.

Frequently asked questions

Does a full-page screenshot preserve SVG as a vector?

The cited browser and Playwright documentation describes screenshots of rendered pages and does not promise editable SVG output. Treat the screenshot as an image of the rendering; keep the SVG source if you need vector paths.

Can I capture SVG graphics below the fold?

Yes, provided the page renders those graphics: full-page capture includes content outside the visible viewport. Verify that lazy-loaded or otherwise delayed graphics have loaded before capture.

Which option should I use for repeated captures?

Use Playwright when you need a scriptable workflow that can be run again with the same URL, viewport, and readiness condition.

Does Chrome Device Mode equal testing on a phone?

No. It helps simulate viewport dimensions, but Google notes it does not reproduce every aspect of an actual mobile device.