Embedding JPEG in SVG using JavaScript

Question

I am wondering how to include jpg-images in SVG!

var ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(ns, 'svg');
svg.setAttribute('width', 800);
svg.setAttribute('height', 450);

var image = document.createElementNS(ns, 'image');
image.setAttribute('href', 'http://placehold.it/300x300');
image.setAttribute('x', 0);
image.setAttribute('y', 0);
image.setAttribute('width', 800);
image.setAttribute('height', 450);

svg.appendChild(image);
document.body.appendChild(svg);

Where is my mistake?

so it turns out safari is having trouble rendering svg images ... In chrome there is no problem. ;-( stupid safari. — Timo
– Timo, Commented Jan 18, 2017 at 19:47

Robert Longson · Accepted Answer · 2017-01-18 19:52:07Z

2

For Safari you'd need to change

image.setAttribute('href', 'http://placehold.it/300x300');

to

image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http://placehold.it/300x300');

This second way of doing things is Chrome/Firefox compatible too.

Safari may support your way in the future as it's part of the upcoming SVG 2 specification, the second way is the SVG 1.1 way to do things.

answered Jan 18, 2017 at 19:52

Robert Longson

125k27 gold badges272 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ruud Helderman Over a year ago

I also needed this fix to make it work on Firefox 50.1.0 running on Ubuntu 14.04.

Robert Longson Over a year ago

Firefox 51 will be the first release to support bare href attributes. Only a few days to wait now.

Collectives™ on Stack Overflow

Embedding JPEG in SVG using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related