iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
html2canvas saves a rendered SVG-containing region as a raster PNG, not as an editable SVG file. Call html2canvas(element), convert the returned canvas with toDataURL('image/png'), and download that data URL. If you need vector editability, download the original SVG markup or resource separately instead of renaming the PNG.
First decide which file you need
“Save an SVG with html2canvas” can mean two different jobs:
| Goal | Correct method | Result |
|---|---|---|
| Save how a page region looks, including layout and styling | Render the region with html2canvas and download the canvas | Raster PNG (or another canvas image format) |
| Keep the artwork editable and infinitely scalable | Download the original SVG source or resource | SVG markup, preserving vector data |
html2canvas reconstructs a view from the DOM and CSS properties it understands; it is not a literal browser-pixel screenshot. Differences are possible when an SVG uses unsupported properties, fonts, filters, or browser-specific behavior. The project’s documentation describes the canvas workflow and supported browsers (evergreen Chrome/Chromium, Firefox, and Safari); test the actual browser and library version used by your application.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Download a rendered region as PNG
Include html2canvas in your page, select the element containing the SVG, wait until its content is ready, and trigger a download from the resulting canvas.
#1 Best Overall
- Give the capture region a stable selector such as
id="capture". - Load html2canvas using your project’s normal dependency method.
- Call
html2canvas()after the SVG and related assets have loaded. - Convert the canvas to PNG and click a temporary download link.
html2canvas(document.querySelector('#capture')).then(canvas => {
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = canvas.toDataURL('image/png');
link.click();
});The filename and MIME type deliberately say PNG. A canvas created by html2canvas contains pixels; changing the filename to .svg does not turn those pixels into SVG vectors.
A complete button example
<button id="save" type="button">Save PNG</button>
<section id="capture">
<svg viewBox="0 0 240 120" role="img" aria-label="Example chart">
<rect width="240" height="120" fill="#eef2ff"/>
<path d="M20 90 L80 50 L140 70 L220 25" fill="none" stroke="#4338ca" stroke-width="6"/>
</svg>
</section>
<script>
document.querySelector('#save').addEventListener('click', async () => {
const element = document.querySelector('#capture');
const canvas = await html2canvas(element);
const link = document.createElement('a');
link.download = 'chart.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
</script>Use the html2canvas documentation for installation and current API details. Keep the capture element visible long enough for fonts, images, and SVG data to finish loading.
Control the capture dimensions and quality
html2canvas accepts options as its second argument. A larger scale can make a PNG sharper but increases memory use and may hit browser canvas limits.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →const element = document.querySelector('#capture');
const canvas = await html2canvas(element, {
backgroundColor: '#ffffff',
scale: window.devicePixelRatio,
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight
});
const link = document.createElement('a');
link.download = 'region.png';
link.href = canvas.toDataURL('image/png');
link.click();For an empty or clipped result, compare the element’s scrollWidth/scrollHeight with windowWidth/windowHeight. Very large pages can exceed the maximum canvas dimensions supported by the target browser; capture smaller sections or reduce scale.
Capture one SVG element
If the SVG is nested in a larger panel, select the SVG (or a wrapper around it) rather than the entire page:
const svg = document.querySelector('#capture svg');
const canvas = await html2canvas(svg, { backgroundColor: null });
const link = document.createElement('a');
link.download = 'illustration.png';
link.href = canvas.toDataURL('image/png');
link.click();A transparent background is useful for compositing, but the final appearance still depends on the SVG and CSS properties html2canvas can interpret.
When you need the original editable SVG
Do not use html2canvas for source export. If the SVG is inline, serialize that element and download the XML. If it is an external file, request that resource and save the response. In both cases, preserve the original viewBox, paths, text, styles, and metadata.
const svg = document.querySelector('#capture svg');
const source = new XMLSerializer().serializeToString(svg);
const blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.download = 'illustration.svg';
link.href = url;
link.click();
URL.revokeObjectURL(url);This simple serializer is for an inline SVG already in your document. If styles are supplied only by external CSS, fonts are loaded remotely, or the SVG references external images, package those dependencies according to your application’s needs. Source download and visual capture are separate deliverables: one preserves vectors, the other preserves the rendered composition.
Cross-origin SVGs and images
Browser security can prevent a canvas from being read. A remote SVG, image, font, or an image URL that redirects to another origin may taint the canvas. Once tainted, toDataURL() and similar readback methods fail.
Use CORS only when the server permits it
const canvas = await html2canvas(document.querySelector('#capture'), {
useCORS: true
});useCORS: true asks the browser to make a CORS-enabled request; it cannot grant permission. The asset server must return suitable Access-Control-Allow-Origin headers. Configure the server, host the asset on the same origin, or use a proxy supported by html2canvas:
const canvas = await html2canvas(document.querySelector('#capture'), {
proxy: 'https://your.example.com/html2canvas-proxy'
});Only use a proxy you control or trust and configure it to allow the specific resources your application needs. Do not treat allowTaint: true as an export fix: a tainted canvas remains unreadable under browser security rules.
Recommended Free Tools
Redirect edge cases
A repository issue opened January 17, 2023 describes a same-origin image URL redirecting to a CDN where the reporter found useCORS ineffective. Treat that as a reported edge case, not proof that every redirect fails. Inspect the final URL and response headers in browser developer tools, then test the exact asset and browser combination.
Why SVG details can be missing
Because html2canvas reconstructs the scene from DOM information, unsupported SVG features can disappear or differ. A reported issue describes an SVG line missing from a saved screenshot; such reports are useful diagnostics, not a universal guarantee of failure.
- Reduce the SVG to a minimal test case and compare it with the browser’s on-screen rendering.
- Check stroke width, transforms, clipping paths, filters, masks, gradients, embedded styles, and web fonts.
- Wait for fonts and images before capture.
- Try capturing the SVG alone to distinguish SVG rendering from surrounding CSS/layout problems.
- Test the current html2canvas release in each browser you support.
Common failures and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
SecurityError from toDataURL() |
Tainted canvas from a cross-origin asset | Serve the asset with CORS headers, use a suitable proxy, or remove the asset; do not rely on allowTaint. |
| Remote SVG is blank | Request blocked, failed, or not CORS-enabled | Check the network panel, final redirect URL, response headers, and asset availability. |
| SVG line, filter, or text differs | Renderer does not implement that property exactly | Minimize the example, adjust the SVG/CSS, and test the target browser. |
| Output is clipped or empty | Capture/window dimensions or canvas-size limit | Set dimensions from scroll sizes, capture in sections, or lower scale. |
| Download has the wrong format | PNG data was renamed as SVG | Use a PNG filename for html2canvas output; serialize/download the original SVG for vector output. |
| Images or fonts are missing | Capture started before resources finished loading | Await image decode/font readiness and then capture. |
Or skip the browser setup
For a server-side website screenshot, ScreenshotNeo returns PNG, JPEG, WebP, or PDF from one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status.
Its API also supports full-page lazy-image loading, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, custom CSS/JavaScript, clicks, waits, blocked requests, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data, and an OpenAPI specification. An MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for options and authentication. Python and Node.js equivalents are available when your application already uses those runtimes:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing provides two months free, and every feature is included on every plan. Create a free ScreenshotNeo account to try it.
FAQ
Can html2canvas create an SVG file?
Its documented save workflow creates a PNG from a canvas. Download or serialize the original SVG when you need an SVG file.
Will useCORS bypass browser security?
No. It works only when the remote server grants access with appropriate CORS headers, or when a suitable proxy is used.
Why does the downloaded PNG look different from the page?
html2canvas reconstructs the DOM using properties it understands rather than copying browser pixels, so unsupported SVG/CSS features can render differently.
Frequently Asked Questions
Can html2canvas create an SVG file?
Its documented save workflow creates a PNG from a canvas. Download or serialize the original SVG when you need an SVG file.
Will useCORS bypass browser security?
No. It works only when the remote server grants access with appropriate CORS headers, or when a suitable proxy is used.
Why does the downloaded PNG look different from the page?
html2canvas reconstructs the DOM using properties it understands rather than copying browser pixels, so unsupported SVG/CSS features can render differently.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
