Signatur
Beschreibung
Die Eigenschaft download der Schnittstelle SVGAElement spiegelt das Inhaltsattribut download eines <a>-Elements innerhalb von SVG wider. Ist das Attribut vorhanden, soll der Browser die verlinkte Ressource als Datei speichern, statt zu ihr zu navigieren. Ein nicht leerer Wert gilt als Vorschlag für den Dateinamen.
Die Eigenschaft funktioniert wie HTMLAnchorElement.download, gilt aber für Links in Inline-SVG oder in eigenständigen SVG-Dokumenten. Typische Einsätze sind interaktive Diagramme, Karten oder Infografiken: Ein Klick auf eine Form lädt zum Beispiel eine CSV-Datei, ein PDF oder ein Bild herunter, das das Skript selbst erzeugt hat (blob:- oder data:-URL).
Beim Lesen erhältst du den aktuellen Attributwert als String. Fehlt das Attribut, ist das ein leerer String. Beim Schreiben wird das Attribut gesetzt. Einen leeren String kannst du nicht vom fehlenden Attribut unterscheiden. Ob das Attribut da ist, prüfst du deshalb mit hasAttribute("download"). Entfernen kannst du es mit removeAttribute("download").
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Nur beim Setzen: vorgeschlagener Dateiname. Ein leerer String aktiviert den Download ohne Namensvorschlag. Der Browser leitet den Namen dann aus der URL oder aus den Antwort-Headern ab. |
Rückgabewert
download-Attributs. Fehlt das Attribut, ist das ein leerer String.Beispiele
SVG-Link mit Download-Dateinamen erzeugen
const SVG_NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
const link = document.createElementNS(SVG_NS, "a");
link.setAttribute("href", "/reports/umsatz-2024.csv");
link.download = "umsatz-2024.csv";
const rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("width", "120");
rect.setAttribute("height", "40");
rect.setAttribute("fill", "steelblue");
link.append(rect);
svg.append(link);
console.log(link.download);
console.log(link.getAttribute("download"));Diagrammdaten per Blob-URL als Datei anbieten
const SVG_NS = "http://www.w3.org/2000/svg";
const daten = [["Monat", "Wert"], ["Jan", 42], ["Feb", 57]];
const csv = daten.map((zeile) => zeile.join(";")).join("\n");
const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);
const link = document.querySelector("#chart a.export");
link.setAttribute("href", url);
link.download = "diagramm-daten.csv";
// Blob-URL nach dem Klick wieder freigeben
link.addEventListener("click", () => {
setTimeout(() => URL.revokeObjectURL(url), 1000);
}, { once: true });Feature-Erkennung und Attribut entfernen
const link = document.querySelector("svg a");
if ("download" in SVGAElement.prototype) {
link.download = "grafik.svg";
} else {
console.warn("SVGAElement.download wird nicht unterstützt");
}
console.log(link.hasAttribute("download"));
// Download-Verhalten wieder abschalten
link.removeAttribute("download");
console.log(JSON.stringify(link.download));// Wichtig · Fallstricke
- Nur gleicher Ursprung: Das Attribut wirkt nur bei URLs vom selben Ursprung sowie bei
blob:- unddata:-URLs. Bei Links zu fremden Ursprüngen ignorieren Browser es, und es wird normal navigiert. - Header haben Vorrang: Ein
Content-Disposition-Header der Serverantwort kann den vorgeschlagenen Dateinamen überschreiben. - Kompatibilität: Browser unterstützen die DOM-Eigenschaft auf
SVGAElementweniger breit alsHTMLAnchorElement.download. Prüfe das vorher mit"download" in SVGAElement.prototype. Als Rückfall kannst dusetAttribute("download", …)verwenden oder einen HTML-Link, den du per Skript erzeugst. - Das Linkziel setzt du bei SVG über
setAttribute("href", …).SVGAElement.hrefist einSVGAnimatedStringund kein einfacher String. - In SVGs, die du über
<img>oder als CSS-Hintergrund einbindest, sind Links überhaupt nicht klickbar. Nutze Inline-SVG oder<object>. - Gib Blob-URLs nach Gebrauch mit
URL.revokeObjectURL()wieder frei, damit kein Speicher verloren geht.