如何将pyvis生成的图形（含大型图）导出为矢量图或.png格式？

Great question! Pyvis is fantastic for building interactive network graphs, but it’s definitely a pain that it only exports to HTML natively. I’ve tackled this exact issue a few times, so here are the most reliable workarounds to get your graphs into PNG or SVG format:

Exporting to PNG #

If you need raster images like PNG, these automated methods work best for both small and large graphs:

Method 1: Use Selenium (Most Reliable for Large Graphs) #

Selenium lets you programmatically control a browser to load the HTML, wait for the graph to render, and take a full-page screenshot. Here’s how to set it up:

1. First install the package and download a browser driver (ChromeDriver is recommended):

   pip install selenium
   

   (Grab ChromeDriver matching your Chrome version and add it to your system PATH.)

2. Run this code to export your graph:

   from selenium import webdriver
   from selenium.webdriver.chrome.options import Options
   import time
   
   # Path to your pyvis-generated HTML file
   html_file_path = "your_graph.html"
   
   # Configure Chrome to run headless (no visible window)
   chrome_options = Options()
   chrome_options.add_argument("--headless=new")
   # Adjust window size to fit your entire graph (increase for very large graphs)
   chrome_options.add_argument("--window-size=3840,2160")
   
   # Initialize the driver and load the HTML
   driver = webdriver.Chrome(options=chrome_options)
   driver.get(f"file://{html_file_path}")
   
   # Wait for the graph to fully render (adjust sleep time for large graphs)
   time.sleep(7)
   
   # Save the screenshot as PNG
   driver.save_screenshot("exported_graph.png")
   driver.quit()
   

   For extra-large graphs, you can set an even bigger window size—Selenium will capture the entire rendered area, not just what’s visible on a standard screen.

Method 2: Use html2image (Simpler for Smaller Graphs) #

If you want a more lightweight approach, html2image wraps wkhtmltoimage to convert HTML directly to images.

1. Install the package and dependencies:

   pip install html2image
   

   (On Ubuntu, install wkhtmltopdf first with sudo apt install wkhtmltopdf; on Windows, download the official installer for wkhtmltopdf.)

2. Run this simple code:

   from html2image import Html2Image
   
   hti = Html2Image()
   # Adjust size to match your graph's dimensions
   hti.screenshot(html_file="your_graph.html", save_as="exported_graph.png", size=(1920, 1080))
   

   Note: This might struggle with very complex or slow-loading graphs compared to Selenium.

Method 3: Manual Screenshot (Quick One-Offs) #

If you only need to export once, just open the Pyvis HTML file in your browser, resize the window to fit the entire graph, then right-click the graph and select "Save image as..." (Chrome/Firefox) or use your OS’s full-screen screenshot tool.

Exporting to SVG (Vector Format) #

Pyvis uses Vis.js under the hood, which defaults to canvas rendering—so we need to switch it to SVG first, then export the vector data.

Step 1: Generate an SVG-Rendered Pyvis Graph #

When creating your Pyvis network, add a configuration option to force SVG rendering:

from pyvis.network import Network

# Initialize your network as usual
net = Network(height="1000px", width="100%")
# Add your nodes and edges here...

# Enable SVG rendering
net.set_options("""
{
  "renderer": {
    "type": "svg"
  }
}
""")

# Save the HTML file
net.write_html("svg_graph.html")

Step 2: Export the SVG #

Option A: Automated Export with JavaScript

Edit the generated svg_graph.html to add a button that triggers SVG export. Add this code right before the closing </body> tag:

<button onclick="exportSVG()">Export SVG</button>
<script>
function exportSVG() {
  // Target the SVG element created by Vis.js
  const svgElement = document.querySelector(".vis-network svg");
  if (!svgElement) {
    alert("SVG element not found!");
    return;
  }

  // Convert SVG to a downloadable blob
  const svgData = new XMLSerializer().serializeToString(svgElement);
  const blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
  const url = URL.createObjectURL(blob);

  // Create a download link and trigger it
  const downloadLink = document.createElement("a");
  downloadLink.href = url;
  downloadLink.download = "exported_graph.svg";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(url);
}
</script>

Open the modified HTML in your browser, click the button, and your SVG will download automatically.

Option B: Manual Extraction

If you don’t want to edit the HTML, open svg_graph.html in your browser, right-click the graph, select "Inspect" to open DevTools, find the <svg> element under the .vis-network container, right-click the SVG tag, select "Copy" → "Copy outer HTML", then paste the code into a new file and save it with a .svg extension.

内容的提问来源于stack exchange，提问作者Dimitri Taits