Have you ever wondered how to display the SVG string that you have generated from your program, inline with HTML. I did try this and searched for a lot, but could not find a proper solution. Instead of that, I was redirected to some JavaScript libraries which are used to generate SVG.
If I clearly mention the problem again; There is a SVG as a string, if it is included in a div element it will not be displayed. But if it is saved in a file with the extension ".svg" and open it with FireFox browser, it is displayed correctly.
If the above paragraph mentions the problem you got, then this is the exact place where you get the exact solution :D
Say, there is a div element with the id "svg", then the following JavaScript function can be used to obtain your objective.
If I clearly mention the problem again; There is a SVG as a string, if it is included in a div element it will not be displayed. But if it is saved in a file with the extension ".svg" and open it with FireFox browser, it is displayed correctly.
If the above paragraph mentions the problem you got, then this is the exact place where you get the exact solution :D
Say, there is a div element with the id "svg", then the following JavaScript function can be used to obtain your objective.
drawSVG = function(svgStr) {
var parser = new DOMParser();
var dom = parser.parseFromString(svgStr, "text/xml");
document.getElementById('svg').appendChild(dom.documentElement);
}
It is very simple solution, but it took sometime to reach for the solution.
Apache Batik can be used to generate SVG
