demo · v142

SVG Download Builder

Design a shape, then download it directly from an <a download> element placed inside the SVG — the Chrome 142 behaviour. Compare with the old workaround: an HTML <a> outside the SVG.

Shape
Fill colour
Stroke colour
Label text
Filename

The "Download SVG" button lives inside the <svg> element as <a download> — the Chrome 142 feature.

Before vs. after Chrome 142

Before Chrome 142

workaround required

The download attribute on SVG <a> elements was silently ignored. You had to use an HTML <a> outside the SVG and wire it up with JavaScript.

<!-- HTML wrapper (outside SVG) --> <a id="dl" download="shape.svg"> Download </a> <script> const blob = new Blob([svgSrc], { type: 'image/svg+xml' }); document.getElementById('dl').href = URL.createObjectURL(blob); </script>

Chrome 142+

native SVG download

The download attribute now works on <a> inside SVG, matching HTML behaviour. Embed the download link directly in your SVG markup.

<svg> <!-- shapes ... --> <a href="blob:..." download="shape.svg" target="_self"> <text>Download SVG</text> </a> </svg>
HTML fallback This page also provides an HTML <a id="htmlFallback"> outside the SVG — used only by the PNG download. The SVG download uses the in-SVG <a download> directly.

how the download is wired

// 1. Serialise the live SVG element
const svgEl = document.querySelector("svg");
const src = new XMLSerializer().serializeToString(svgEl);

// 2. Build a Blob URL
const blob = new Blob([src], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);

// 3. Set href on the <a download> INSIDE the SVG
//    This is new in Chrome 142 — previously had no effect
const svgLink = svgEl.querySelector("a[download]");
svgLink.setAttributeNS("http://www.w3.org/1999/xlink", "href", url);
svgLink.setAttribute("href", url);

see also