Auto width and height for SVG image

Question

I am new to SVG, so sorry if this is a bit of a noob question. I am trying to figure out how to get an image to display with the full width and height of the referenced image. I am using D3.js to build a graph and I want a logo to appear in the corner. The problem is that the image href will be set using javascript, so the image being referenced is never a fixed width or height. What I am wanting is the image to display in it's full width and height, not scaled up or down. What I was hoping for is the ability to automatically set the width and height of the image based on it's content, such as setting the width and height attributes to auto. This however just results in the image not being shown.

d3.select("body")   .append("svg")   .attr('id','mySVG')   .attr({       "width": "100%",       "height": "100%"   })   .attr("viewBox", "0 0 " + width + " " + height )   .attr("preserveAspectRatio", "none");  d3.select('#mySVG')   .append('image')   .attr('image-rendering','optimizeQuality')   .attr('height','auto')     <--- This does not work   .attr('width','auto')      <--- This does not work   .attr('xlink:href', logoUrl)   .attr('x','0')   .attr('y','0'); 

How would I go about specifying that the SVG image width and height must be dynamically determined based on the referenced image size?

Answer 1

I don't think 'auto' is a valid value for the 'length' attr of a svg image element. Take a look at the spec here. You might want to use '100%'

You could load the image then inspect the width and height onload.

JSFiddle: http://jsfiddle.net/WQBPC/4/

var logoUrl = 'http://placehold.it/100x50&text=Logo';  //SVG Setup stuff var svg =  d3.select("body").append("svg")   .attr('id','mySVG')   .attr({       "width": '100%',       "height": '100%'   })  var svg_img=  svg.append('image')   .attr('image-rendering','optimizeQuality')   .attr('x','0')   .attr('y','0');  //Load image and get size. var img = new Image(); img.src = logoUrl; img.onload = function() {  var width = this.width;  var height = this.height;   svg_img .attr('height', height)   .attr('width',width)   .attr('xlink:href', logoUrl)  }