Why rendering an svg tag to an ejs file is not recognized

Question

I try to use d3-node to make a chart in server side and try to render the new chart to ejs with following code: <%= svgChart %> when I use browser to view it, it only shows the svg tag contents like below:

    <svg xmlns="http://www.w3.org/2000/svg" width="960" height="400"><defs>                      <style type="text/css"><![CDATA[  .axis{font: 10px sans-serif;} .axis path,.axis line{fill: none;stroke: #000;shape-rendering: crispEdges;} .x.axis path{display: none;} ]]></style></defs><g transform="translate(40,20)"><path d="M20,32.4L20.430000000000003,32.4L20.86,32.4L21.290000000000003,32.4L21.720000000000002,32.4L22.150000000000002,32.4L22.580000000000002,32.4L23.01,32.4L23.44,32.4L23.87,32.4L24.299999999999997,32.4L24.73,32.4L25.16,32.4L25.590000000000003,32.4L26.02,32.4L26.450000000000003,32.4L26.88,32.4L27.310000000000002,32.4L27.740000000000002,32.4L28.17,32.4L28.6,32.4L29.03,32.4L29.46,32.4L29.89,32.4L30.32,32.4L30.75,32.4L31.18,32.4L31.61,32.4L32.04,32.4L32.47,32.4L32.9,32.4L33.33,32.4L33.76,32.4L34.190000000000005,32.4L34.620000000000005,32.4L35.050000000000004,32.4L35.480000000000004,32.4L35.910000000000004,32.4L36.34,32.4L36.77,32.4L37.2,32.4L37.63,32.4L38.06,32.4L38.489999999999995,32.4L38.92,32.4L39.35,32.4L39.78,32.4L40.21,32.4L40.64,32.4L41...............................

not showing the chart itself. The svgChart contains the string of the svg tag. If I copy the svgChart content (the string) directly to the ejs, it will show the chart perfectly.

it seems ejs not able to render the tag contents when loading the page.It think the svgChart as a plain string.

My question: How to make the ejs recognize the svgChart as svg tag so it can show the svg chart insead of the text of the tag?

Answer 1

You can also include external SVG files directly in an EJS file like below.

<%- include ("path/to/file.svg") %>

Incidentally, this method also allows any text in the SVG to be rendered as real text in the page.

<svg height="30" width="200">
  <text x="0" y="15" fill="red">Hello from SVG</text>
</svg>

Answer 2

Try to use <%- svgChart %> instead <%= svgChart %>. By EJS documentation:

• <%= Outputs the value into the template (HTML escaped)
• <%- Outputs the unescaped value into the template