CODEWITHSUNDEEP
node.jssvgrenderserver-sideejs
Robin
Robin

Reputation: 201

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

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?

Upvotes: 3

Views: 4819

Answers (2)

ow3n
ow3n

Reputation: 6597

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>

Upvotes: 6

lukkasz
lukkasz

Reputation: 133

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

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

Upvotes: 5

Related Questions