How to Save a Webpage as PDF with SVG Charts and Canvas Content

To save a webpage as a PDF, open it in Chrome or Firefox, choose the browser’s print command, select its PDF destination, inspect the preview, and save. SVG charts usually remain crisp vector graphics when the browser can render them and their dependencies load. Canvas charts are bitmap drawings, so check their size and sharpness at the intended print scale. A PDF is a print rendering: interactive or animated screen details may not carry over.

If a chart is missing, first identify whether it is inline SVG, an SVG image, a CSS background, or a canvas. The fix depends on how the chart is embedded and what it needs to render.

1. Save the page from Chrome or Firefox

Let the page and its charts finish loading. For an interactive chart, select the view or data you want in the PDF.
In Chrome on Windows or Linux, press Ctrl+P. On Mac, press Command+P. You can also choose Print from the browser menu.
In Firefox, choose Print from the menu.
Set the destination to Save as PDF in Chrome or Save to PDF in Firefox.
Review the preview. Check all pages and charts, then adjust orientation, scale, margins, and background printing if those controls are available and the result needs them.
Save the PDF, open the saved file, and inspect the pages containing charts.

Browser controls and output can vary by platform and setup. Chrome’s official instructions cover printing from a computer in its print help; Mozilla’s steps are in Firefox’s print help. Mozilla notes that a webpage may be arranged differently for paper than it is on screen, so preview the entire document before saving.

2. Diagnose a missing or incomplete chart

Do not assume one print setting fixes every chart. Determine how the graphic is embedded and what resources it needs.

Chart type	What to check	Likely next step
Inline SVG	Is the SVG present in the page and visible before printing?	Check the print preview. If the page is yours, inspect print styles that hide or resize the chart.
SVG loaded as an image	Does the SVG depend on scripts, external images, or stylesheets?	Check whether its required resources load. SVG used in an image context can have scripts disabled and external resources blocked, depending on browser behavior.
SVG used as a CSS background	Is background printing enabled, if the browser offers that option?	Inspect the preview with the relevant background setting. A missing background is different from a failed inline SVG.
Canvas	Was the chart drawn before the print preview opened? Is it large enough at print size?	For a page you control, prepare the canvas for print and draw it at suitable dimensions before printing.

SVG support depends on its context and dependencies. MDN explains that SVG can be used in HTML and image contexts, and that image contexts may restrict JavaScript and external resources in its guide to SVG as an image. If the graphic is missing, inspect its embedding and dependencies rather than relying on a universal browser workaround.

3. Prepare a page you control for printing

Use print-specific styles to hide controls, set a legible chart size, and avoid screen-only layout rules. CSS print media queries let a page use different presentation for printing; @page can set page dimensions, orientation, and margins. The beforeprint and afterprint events can help an app adjust its UI around printing. See MDN’s printing guide.

<style>
  @media print {
    @page {
      size: landscape;
      margin: 12mm;
    }

    .screen-only,
    .chart-toolbar {
      display: none !important;
    }

    .chart {
      break-inside: avoid;
      max-width: 100%;
    }
  }
</style>

<script>
  window.addEventListener("beforeprint", () => {
    // Example: switch the app to a print-friendly chart view here.
  });

  window.addEventListener("afterprint", () => {
    // Restore screen-only state here if the app changed it.
  });
</script>

This example sets landscape paper, margins, and a basic rule for keeping charts together. Adapt the selectors and layout to your page; check the browser preview because print layout can differ from screen layout. If a chart is generated asynchronously, make sure it has finished drawing before the user opens print preview.

4. Understand canvas size and export limits

Canvas stores a bitmap drawing rather than semantic vector chart content. Changing only its displayed size with CSS scales that bitmap and can distort it. Set the canvas width and height attributes, or its dimensions through JavaScript, to match the drawing you need. MDN documents these sizing considerations in its canvas element reference.

If you own the page, exporting the completed canvas to an image and printing that image can be a fallback. toDataURL() defaults to PNG and encodes resolution metadata at 96 dpi for formats that support it. For a large image, MDN recommends toBlob() instead of creating a large in-memory data URL. Export can throw SecurityError if the canvas is not origin-clean, such as when it contains content from another site. The exported image is raster, not a resolution-independent vector chart, so use enough pixels for the intended print size. See MDN’s toDataURL reference.

const canvas = document.querySelector("canvas");

canvas.toBlob((blob) => {
  if (!blob) {
    throw new Error("Canvas export returned no image.");
  }

  const imageUrl = URL.createObjectURL(blob);
  const printImage = new Image();
  printImage.onload = () => {
    const printWindow = window.open("", "_blank");
    if (!printWindow) {
      URL.revokeObjectURL(imageUrl);
      throw new Error("Allow the print window, then try again.");
    }

    printWindow.document.write(`<img src="${imageUrl}" style="max-width:100%;height:auto">`);
    printWindow.document.close();
    printWindow.addEventListener("afterprint", () => {
      URL.revokeObjectURL(imageUrl);
      printWindow.close();
    });
    printWindow.focus();
    printWindow.print();
  };
  printImage.onerror = () => {
    URL.revokeObjectURL(imageUrl);
    throw new Error("The exported canvas image could not be loaded.");
  };
  printImage.src = imageUrl;
}, "image/png");

This is an author-side pattern, not a universal fix: the canvas must be ready and exportable, the browser must allow the new window, and the print stylesheet may need to set page margins. For a known-size print layout, calculate the required pixel dimensions from the physical size and desired raster resolution, then render the chart at those dimensions. The browser’s print scaling can still affect the final output. Firefox also documents the specialized mozPrintCallback canvas API, but it is Firefox-specific and is not a general cross-browser remedy; see MDN’s HTMLCanvasElement reference.

5. Troubleshoot common PDF chart problems

Symptom	Possible cause	What to try
Chart is absent in preview	The chart has not finished rendering, print CSS hides it, or a required resource failed to load.	Wait for rendering; inspect the page’s print styles and chart dependencies. Preview again.
SVG appears incomplete	The SVG is embedded as an image and relies on scripts or external resources that are unavailable in that context.	Check the SVG embedding method and external dependencies. If you own the page, make required assets available in the print path.
CSS background chart is missing	The browser’s print settings omit backgrounds.	If available, enable background printing and review the preview.
Canvas chart is blurry or distorted	A small bitmap is being enlarged by CSS or print scaling.	Render at suitable canvas dimensions and avoid enlarging a low-resolution drawing.
Canvas export throws `SecurityError`	The canvas is not origin-clean, often because it includes cross-origin content.	Review the sources drawn into the canvas and their origin permissions. Do not assume export is possible for every page.
Chart is clipped across pages	The screen layout does not fit the print page or a chart splits at a page boundary.	Try landscape, adjust scale and margins, and use print CSS such as `break-inside: avoid` where suitable.
PDF differs from the interactive page	Print output is a rendering for paper/PDF; interactive or animated states may not be represented.	Select the desired chart state before printing, then inspect the saved PDF.

6. Browser printing or author-side fixes?

Approach	Best fit	Trade-off
Browser print preview	A one-off PDF of a page you do not control.	Fast, but dependent on the page’s print layout, chart readiness, and browser rendering.
Print CSS and chart preparation	A page or app you maintain and can change.	More work up front; lets you adapt layout and chart dimensions for print.
Canvas image export	A page you control where a finished canvas needs a deliberate image output.	Produces raster output, can use substantial memory for large images, and may fail for a non-origin-clean canvas.

For a page you do not control, preview and save first, then investigate the specific missing chart. For an app you maintain, prepare the print layout and chart state, then inspect output at the intended page size. Neither browser is established as universally better for complex SVG or canvas charts.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its PDF endpoint can capture a URL in one request. Use it when you need a PDF capture without setting up a browser workflow; its listed options include paper size, margins, landscape, and page ranges. See the ScreenshotNeo documentation for request parameters.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -d format=pdf -o page.pdf

import requests

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

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  format: 'pdf'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('page.pdf', new Uint8Array(await res.arrayBuffer()));

Replace the example URL with the page you need. Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. PDF output is still a capture of the rendered page, so review the result when chart fidelity matters.

Performance, reliability, and cost

Browser printing has no per-capture API charge described in the browser help, but it requires opening and reviewing the page yourself. Large canvas exports can consume memory; using toBlob() avoids building a large data URL, though the rendered bitmap still occupies memory. External chart resources and asynchronous chart drawing can affect whether the preview contains a complete graphic. Allow the page to settle, inspect the preview, and verify the saved file.

For automated captures, ScreenshotNeo bills only clean shots: bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Responses identify the page verdict and billing status in headers. Its plans are Free: 1,000 shots/month with no card; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free. Every feature is on every plan. Review current request options and response details in the API documentation.

FAQ

Will SVG charts stay vector in the PDF?

It depends on how the SVG is embedded and rendered. Check the saved PDF at the size you plan to use; do not assume every SVG-based chart will remain vector.

Can I save an interactive chart’s current state?

Select the desired data or view before printing and wait for the chart to finish drawing. The PDF represents print output, not necessarily every interactive behavior.

Can I export a canvas from any webpage?

No. A page’s canvas may not be accessible to your script, and a non-origin-clean canvas can block export. The export fallback is intended for pages you control.

Which browser is best for preserving charts?

The available documentation does not establish one browser as universally best for complex SVG and canvas output. Use the preview and inspect the saved PDF for your page.