SVGElement: load — Ereignis · JavaScript-Referenz

Signatur

svgElement.addEventListener("load", handler)

Beschreibung

Das load-Ereignis wird auf einem SVGElement ausgelöst, sobald das Element im Browser vollständig geladen ist. Bei Elementen mit externen Ressourcen, also <image>, <script> oder <use> mit externem Verweis, bedeutet das: Die referenzierte Datei wurde erfolgreich geladen. Bei einem <svg>-Wurzelelement heißt es, dass das SVG-Dokument fertig aufgebaut ist. Das Ereignis entspricht dem normalen DOM-Ereignis load und hieß in älteren SVG-Spezifikationen SVGLoad.

Du kannst das Ereignis auf zwei Arten abfangen: mit element.addEventListener("load", handler) oder über die Eigenschaft element.onload = handler. Das Inline-Attribut onload="…" im Markup funktioniert auch. Der Handler bekommt ein einfaches Event-Objekt. Das Ereignis steigt nicht im DOM auf (kein Bubbling) und lässt sich nicht abbrechen.

Typische Einsatzfälle sind:

ein SVG-<image> erst nach dem Laden einblenden oder vermessen, zum Beispiel mit getBBox(),
eine Animation starten, sobald die Grafik bereitsteht,
Code ausführen, nachdem ein dynamisch eingefügtes SVG-<script> geladen wurde.

Registriere den Listener bevor die Ressource geladen wird. Bei dynamisch erzeugten Elementen heißt das: vor dem Setzen von href bzw. vor dem Einfügen ins DOM.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignistyp, hier immer `"load"`.
$handler Pflicht	(event: Event) => void		Callback, der nach dem Laden aufgerufen wird. `event.target` ist das geladene `SVGElement`.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `{ once: true }`, damit der Handler nach dem ersten Aufruf automatisch entfernt wird.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein Event-Objekt mit bubbles === false und cancelable === false.

Beispiele

SVG-Bild dynamisch laden und nach dem Laden einblenden

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg#galerie');

const img = document.createElementNS(SVG_NS, 'image');
img.setAttribute('width', '200');
img.setAttribute('height', '150');
img.style.opacity = '0';

// Listener VOR dem Setzen von href registrieren
img.addEventListener('load', (event) => {
  event.target.style.transition = 'opacity .3s';
  event.target.style.opacity = '1';
  console.log('Bild geladen:', event.target.getAttribute('href'));
}, { once: true });

img.addEventListener('error', () => console.error('Bild konnte nicht geladen werden'));

img.setAttribute('href', '/bilder/foto.jpg');
svg.append(img);

Bild geladen: /bilder/foto.jpg

onload-Eigenschaft statt addEventListener

const SVG_NS = 'http://www.w3.org/2000/svg';
const logo = document.createElementNS(SVG_NS, 'image');

logo.onload = () => {
  const box = logo.getBBox();
  console.log(`Logo bereit: ${box.width}×${box.height}`);
  logo.onload = null; // Handler wieder entfernen
};

logo.setAttribute('width', '120');
logo.setAttribute('height', '40');
logo.setAttribute('href', '/logo.png');
document.querySelector('svg').append(logo);

Logo bereit: 120×40

Listener mit removeEventListener wieder abmelden

const img = document.querySelector('svg image#vorschau');

const onLoad = (event) => {
  console.log('Vorschau geladen');
  img.removeEventListener('load', onLoad);
};

img.addEventListener('load', onLoad);
// Neues Bild setzen – löst erneut ein load-Ereignis aus
img.setAttribute('href', '/bilder/vorschau-2.png');

Vorschau geladen

Ladezustand als Promise abwarten

const loadSvgImage = (svg, url) => new Promise((resolve, reject) => {
  const img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
  img.addEventListener('load', () => resolve(img), { once: true });
  img.addEventListener('error', () => reject(new Error(`Fehler: ${url}`)), { once: true });
  img.setAttribute('href', url);
  svg.append(img);
});

const main = async () => {
  const svg = document.querySelector('svg');
  const img = await loadSvgImage(svg, '/karte.png');
  console.log('Karte eingefügt:', img.tagName);
};
main();

Karte eingefügt: image

// Wichtig · Fallstricke

Zeitpunkt der Registrierung: Ist das Ereignis schon ausgelöst worden, bevor der Listener angemeldet wurde, wird er nie aufgerufen. Das passiert etwa bei Bildern aus dem Cache. Registriere den Listener deshalb vor dem Setzen von href, oder nutze das Inline-Attribut onload im Markup.
Inline-SVG in HTML: Ob und wann load auf einem <svg>-Element feuert, das direkt im HTML steht, ist zwischen den Browsern nicht einheitlich. Für „DOM ist bereit“ nimmst du besser DOMContentLoaded oder window-load.
Kein Bubbling: load steigt nicht auf. Eine Ereignisdelegation über ein Elternelement funktioniert nur in der Capture-Phase: addEventListener('load', fn, true).
Fehlerfall: Schlägt das Laden fehl, kommt statt load das Ereignis error. Registriere beide.
Veraltet: Der Ereignisname SVGLoad aus SVG 1.1 wird nicht mehr unterstützt. Verwende load.
Sicherheit: Inline-Handler wie onload="…" in SVG-Dateien werden bei strikter CSP (ohne 'unsafe-inline') blockiert. Nicht vertrauenswürdige SVG-Dateien mit onload-Attributen sind ein bekannter XSS-Weg. Bereinige sie deshalb, bevor du sie per innerHTML einfügst.

Siehe auch

SVGElement SVGImageElement EventTarget.addEventListener() Element: keydown SVGElement: error