求助：克隆含SVG动画的指定网站及SVG资源下载问题

Hey there, let's work through this problem together! The interactive infographic you're targeting uses dynamic SVG animations that are likely loaded client-side via JavaScript, which is why standard mirroring tools like wget and WebHTTrack aren't capturing them properly. Here are actionable solutions to get those SVGs saved:

1. Manually Extract SVGs via Browser DevTools (Quickest Method) #

This works great if you just need the SVGs without full automation:

• Open the target page in your browser (Chrome/Firefox recommended)
• Press F12 to open Developer Tools
  • Option A (Inline SVGs): Go to the Elements tab, search for <svg> using the Ctrl/Cmd+F search bar. Right-click the SVG element, select Copy > Copy Element, then paste the content into a new file with a .svg extension.
  • Option B (External SVGs): Switch to the Network tab, use the filter dropdown to select SVG. Refresh the page, and you'll see all SVG resource requests. Right-click the relevant SVG entry and choose Save to download it directly.
• Note: If the animations rely on external CSS or JS files, make sure to download those too (from the Network tab) and keep them in the same directory as your SVG files to preserve animation behavior.

2. Tweak wget Parameters for Better Coverage #

Standard wget calls might miss dynamically referenced SVGs. Try this command to capture more assets:

wget --recursive --page-requisites --no-parent --accept=svg,html,css,js,woff,woff2 --wait=1 --random-wait http://interactive.unwomen.org/multimedia/infographic/violenceagainstwomen/en/index.html

Breakdown of key flags:

• --recursive: Crawls linked pages/resources
• --page-requisites: Downloads all files needed to render the page (CSS, JS, images)
• --no-parent: Prevents crawling outside the infographic's directory
• --accept: Limits downloads to essential file types including SVG
• --wait/--random-wait: Avoids overwhelming the server with requests

⚠️ Caveat: This still might miss SVGs inserted purely via JavaScript after page load. If that's the case, move to the next method.

3. Use Puppeteer for Browser-Automated Download (Best for Dynamic Content) #

Puppeteer is a Node.js tool that simulates a real browser, so it can capture content rendered by JavaScript. Here's a simple script to extract all SVGs:

1. First, install Puppeteer via npm:

npm install puppeteer

2. Create a file named download-svgs.js with this code:

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

(async () => {
  // Launch a headless browser
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  // Wait for the page to fully load (including JS animations)
  await page.goto('http://interactive.unwomen.org/multimedia/infographic/violenceagainstwomen/en/index.html', {
    waitUntil: 'networkidle2' // Waits until only 2 network connections remain
  });

  // Extract all SVG elements from the page
  const svgElements = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('svg')).map(svg => svg.outerHTML);
  });

  // Save each SVG to a local file
  svgElements.forEach((svgContent, index) => {
    const fileName = `infographic-svg-${index}.svg`;
    const filePath = path.join(__dirname, fileName);
    fs.writeFileSync(filePath, svgContent);
    console.log(`Successfully saved: ${fileName}`);
  });

  await browser.close();
})();

3. Run the script:

node download-svgs.js

This will save every inline SVG from the page as individual files. If your SVGs reference external resources (like image assets or CSS), you can extend the script to download those too using Puppeteer's network request handling.

4. Check for Hidden SVG Sources #

Some SVGs might be embedded as background images in CSS or loaded via JavaScript src attributes. To find these:

• In DevTools' Elements tab, inspect elements that should contain the SVG
• Look for background-image: url(...) styles or <object>/<embed> tags pointing to SVG files
• Copy those URLs and download them directly using your browser or wget

内容的提问来源于stack exchange，提问作者Morteza Pourmirzai