从上传的文件中获取svg元素的宽度

Question

I selected a svg file and read it via readDataUrl(<file>) , I can set it to an html image element by setting the src to be the value read from the file. However the width and height attributes will be 0. How can I set the value read from a file to an svg element in order to be able to do a getBBox() .width to obtain its width?

Answer 1

You can use XMLHttpRequest (or your favourite AJAX library) to read and parse the SVG file. I imagine you can even just pass the dataurl to it if you want.

Answer 2

Edit , because I misread the question :

• If you can append the svg to your document, and need to use a FileReader, use its readAsText() method, then insert it in an html element.

 function previewFile() { var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.onloadend = function () { var parent = document.getElementById('container'); parent.innerHTML= reader.result; } if (file && file.type=="image/svg+xml") { reader.readAsText(file); } else { alert("wrong file type or no file provided"); } } 

 <div id="container"></div> <input type="file" onchange="previewFile()"> 

• If you don't need to use a FileReader (eg if the file is saved on the server), Paul's answer is better.

• If you don't want to actually append the svg file but only know its width/height, you can refer to my

original answer :

I don't think you can get the height from the data url.
As a workaround, you can use the readAsText() method of the fileReader API, combined with the DOMParser() method, in order to read the viewBox property of the svg.

 function xlog(msg){ document.getElementById('log').textContent = msg; } function previewFile() { var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.onloadend = function () { var doc = new DOMParser().parseFromString(reader.result, 'application/xml'); var viewBox = doc.documentElement.viewBox.baseVal; xlog('height:'+viewBox.height+' width:'+viewBox.width); } if (file && file.type=="image/svg+xml") { reader.readAsText(file); } else { xlog("wrong file type or no file provided"); } } 

 <p id="log"></p><br> <input type="file" onchange="previewFile()"> 

Note that you can append the doc.documentElement into your document and then get the element's BBox.