render svg file and serve it using express

Question

I would like to know how to render and serve an svg file using Express.

Right now, I can serve an svg as a raw XML file. Here is what I am doing:

route

router.get('/status', function (req, res, next) {
  res.setHeader('Content-Type', 'image/svg+xml');
  res.sendFile(path.join(__dirname, '../views/status.svg'));
});

svg

<svg 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>

When I hit that route, the raw XML of the svg file is served to the browser. How can I render it first as an SVG image, and then serve it?

Answer 1

Modify your SVG file into this

<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>