CODEWITHSUNDEEP
javascriptnode.jssvgrestify
Adam Bickford
Adam Bickford

Reputation: 187

Returning a generated SVG using Node/Restify that can render in browser?

I'm currently adding a new GET endpoint to an existing Node (v8.11.2 ) + Restify (^7.6.0) service with the goal of generating a custom SVG based on the query parameters.

So far I've gotten my endpoint to return the svg text in browser by just sending it back as the response:

res.send('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke: black;stroke-width:5;opacity:0.5" /> </svg> ');

So I figured it was a content-type issue and tried both

res.header('Content-Type', 'image/svg');

and

res.header('Content-Type', 'image/svg+xml');

before calling res.send with the svg content, but the browser tries to download the image instead of rendering it.

I've also tried to no success a barebones html page with the url as an image src like so:

<html>
  <head></head>
  <body>
    <img src="http://localhost:8080/marker/svg" alt="">
  </body>
</html>

This is a stripped down bare bones server that still replicates the same issues:

var restify = require('restify');

function respond(req, res, next) {
  res.header('Content-Type', 'image/svg+xml');
  res.send('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke: black;stroke-width:5;opacity:0.5" /> </svg> ');
}

var server = restify.createServer();
server.get('/', respond);

server.listen(8080, function() {
  console.log('%s listening at %s', server.name, server.url);
});

I'd like to be able to just hit localhost:8080/api/svg in browser and see the svg like if I'd just opened/served an svg file directly. Thank you in advance!

Upvotes: 2

Views: 3432

Answers (1)

sancelot
sancelot

Reputation: 2063

Use sendRaw() instead of send(). send() filters your data content.

Upvotes: 3

Related Questions