如何通过命令行或Python脚本将含JavaScript的SVG转为PNG

我懂你现在的困扰——带JavaScript的SVG想转PNG，试了svgexport和Inkscape都没成功对吧？别慌，这俩工具本来就不擅长处理带JS的SVG，给你两个能搞定的方案，一个用命令行，一个用Python脚本，都是基于真实浏览器引擎，能正确渲染JS生成的内容。

这个方法最快捷，不需要额外装复杂的库，只要你电脑上有Chrome或者Chromium就行：

• 先把你的SVG代码保存成本地文件，比如命名为input.svg
• 打开终端，执行对应命令：
  如果你用Chrome：

  chrome --headless --disable-gpu --screenshot=output.png --window-size=100,100 input.svg
  

  如果你用Chromium：

  chromium --headless --disable-gpu --screenshot=output.png --window-size=100,100 input.svg
  

  参数说明：
  • --headless：让浏览器在后台运行，不用弹出窗口
  • --disable-gpu：避免GPU渲染可能带来的兼容性问题
  • --screenshot：指定输出的PNG文件名
  • --window-size：要和你的SVG宽高一致，你的SVG是100x100，所以设成100,100

如果需要集成到Python工作流里，用Playwright绝对靠谱，它会调用真实的Chromium引擎渲染页面，完美支持JS：

1. 先安装依赖：

   pip install playwright
   playwright install chromium
   

2. 写个简单的转换脚本：

   from playwright.sync_api import sync_playwright
   
   def svg_to_png(svg_path, png_path, width=100, height=100):
       with sync_playwright() as p:
           # 启动无头Chromium浏览器
           browser = p.chromium.launch(headless=True)
           # 设置页面视口大小和SVG一致
           page = browser.new_page(viewport={"width": width, "height": height})
           
           # 读取本地SVG文件内容
           with open(svg_path, 'r', encoding='utf-8') as f:
               svg_content = f.read()
           
           # 把SVG内容加载到页面中
           page.set_content(f'<div style="width:{width}px; height:{height}px;">{svg_content}</div>')
           # 等待页面加载完成（确保JS执行完毕）
           page.wait_for_load_state('networkidle')
           # 如果你的SVG有异步JS操作，可以加一行等待：page.wait_for_timeout(1500)
           
           # 截图保存为PNG
           page.screenshot(path=png_path, full_page=False)
           browser.close()
   
   # 调用示例：把input.svg转成output.png
   svg_to_png('input.svg', 'output.png', 100, 100)
   

为啥之前的工具不行？ #

• svgexport本质是用Node.js的静态SVG解析库，根本不会执行SVG里的JavaScript，所以JS生成的元素根本不会被渲染出来。
• Inkscape默认不支持执行SVG中的JS，就算开了实验性选项，兼容性也很差，很多复杂的JS逻辑还是处理不了。

内容的提问来源于stack exchange，提问作者Nathan.Eilisha Shiraini