I am attempting to save an SVG file from a sample testpage using PhantomJS. I have successfully navigated to the testpage, but I am unsure of how to locate and save the SVG element. Below is my current approach and where I am encountering difficulties.
- Visit the webpage
- Attempt to identify the SVG tag with document.getElementsByTagName('svg')
- What steps should I take next? I can see that PhantomJS returns a large object, but I cannot find any clear guidance on how to convert this object into an SVG file.
The structure of the testpage is as follows:
<HTML>
This is a Testpage. You like it, don't you?
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myLinearGradient1"
x1="0%" y1="0%"
x2="0%" y2="100%"
spreadMethod="pad">
<stop offset="0%" stop-color="#00cc00" stop-opacity="1"/>
<stop offset="100%" stop-color="#006600" stop-opacity="1"/>
</linearGradient>
</defs>
<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
style="fill:url(#myLinearGradient1);
stroke: #005000;
stroke-width: 3;" />
</svg>
</HTML>
and here is the PhantomJS script being used:
var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
function getSVG(link, callback) {
page.open(link, function(status) {
if (status !== 'success') {
console.log('Unable to access network');
} else {
var ua = page.evaluate(function() {
return document.getElementsByTagName('svg');
});
// Unsure of what action to take at this point
}
phantom.exit();
callback();
});
}
getSVG('testpage', function () {
console.log('done');
});