My goal is to manipulate SVGs before sending them through Express.js. The code snippet I am using is as follows:
app.get("/iconic/styles/:style/:base/:icon", function (req, res) {
var style = req.params.style;
var base = req.params.base;
var icon = req.params.icon;
var iconPath = path.join(iconFolderRoot, style, icon);
svgProcessor(iconPath, base).then(function (svg) {
//console.log(svg); // SO: See the example output posted below
res.header("Content-Type","image/svg+xml");
//res.send(new Buffer(svg, 'binary')); // No difference
res.send(svg);
}).catch(function (err) {
res.status(404).send("Error" + JSON.stringify(err, null, " "));
});
});
By not setting the res.header(), accessing the route in the browser works as expected (fits within the layout). However, I encounter issues when trying to embed them in an <img> tag unless the header is set.
When res.header() is set, embedding the image in an <img> tag does work, but the behavior is not as desired (fixed size).
Sending the file directly with res.sendFile(iconPath) functions correctly. I considered this might be due to the file needing to be sent as binary, which can be observed in
res.send(new Buffer(svg, 'binary'))res.send(svg).
The statement console.log(svg) displays the following code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:#49C5B1;}
</style>
<title>Icons_TEST</title>
<g id="Example">
<path {{{REMOVED FOR STACKOVERFLOW POST}}}/>
</g>
</svg>
An alternative solution could involve saving the file to a temporary directory and then utilizing res.sendFile(tempPath). However, I believe there must be a more efficient approach...
Below is a sample of the response header:
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: image/svg+xml
Date: Thu, 20 Oct 2016 00:51:18 GMT
Connection: keep-alive
Content-Length: 3577