CODEWITHSUNDEEP
imagesvg
ACProctor
ACProctor

Reputation: 324

Fallback if image not found

If the file specified on an SVG <image> element is not found then the results are unpredictable. In Firefox, I get no indication and no error. In Chrome, I get some default box-shaped scenery image.

Is there a way to provide an alternative image, such as a nice error marker? I have seen solutions for a similar issue in HTML that involve the attribute:

onerror="this.onerror=null; this.src='Default.jpg'"

But this does not work in my SVG (even after changing src to href). I have also seen a cheat where using an additional src attribute provides a fallback for normal the href (see SVG Fallbacks) but it seemed to rely on a quirk of the implementation within the browser and no longer works (at least not in Firefox).

I'm looking for a method that works at least in Firefox, Chrome, and Edge.

Upvotes: 1

Views: 1219

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

You want

this.href.baseVal='Default.jpg'

Due to SVG's support for SMIL

Upvotes: 4

Related Questions