CODEWITHSUNDEEP
htmlnode.jssvgpug
MickMRCX
MickMRCX

Reputation: 153

pug use generated svg string

I'm trying to insert an SVG in my pug template but doesn't work properly. I'm using r6operators from marcopixel which offer a function operator.toSVG() which returns the XML string of an SVG.

When I do this :

p some text #{operator.name}
      #{operator.toSVG()}

I get the image correctly but &lt and &gt staying around:

<p>some text Gridlock&lt;<svg  --- all the SVG content &gt;
</p>

if I try to put it in an SVG line like :

p some text #{operator.name}
    svg  #{operator.toSVG()}

I get something like :

<p> some text</p>
<svg>"<svg ---all the content</svg>"</svg>

I checked for some mixin templates or the SVG use but they take a href and not a string

Upvotes: 0

Views: 598

Answers (1)

Matias Kinnunen
Matias Kinnunen

Reputation: 8540

If operator.toSVG() returns <svg>...</svg>, you have a couple of options:

  1. Use piped text and unescaped string interpolation:

    - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p some text #{operator.name}
  | !{operator.toSVG()}

  2. Use unescaped buffered code:

    - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p some text #{operator.name}
  != operator.toSVG()

  3. Use a mix of options 1 and 2:

    - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p
  | some text #{operator.name}
  != operator.toSVG()

Result in all three cases:

<p>some text Gridlock<svg>...</svg></p>

Two variations:

  1. - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p
  | some text #{operator.name}
  | !{operator.toSVG()}

  2. - const operator = { name: 'Gridlock', toSVG: () => '<svg>...</svg>' }

p.
  some text #{operator.name}
  !{operator.toSVG()}

Result in both cases (notice the difference in whitespace):

<p>some text Gridlock
  <svg>...</svg></p>

Upvotes: 2

Related Questions