Updated Question

The svgs generated by dvisvgm seem to influence one another when placed in a html document.

For example, this is how it should look: https://jsfiddle.net/y8nq7xnz/1/

On the other hand, when I take the upper svg and move it below the other svg, the result gets messed up: https://jsfiddle.net/ubq3n30c/3/

Question: Which parts are problematic, and what could I do so this can't happen again? I though about storing the svg to a file and not using inline svg, but this would be my least preferred option.

Thanks for any ideas.

Old Question

I noticed a very weird bug the other day. For my website, I wanted to include Latex-SVGs rendered by dvisvgm. The resulting svg looks just fine, except when it's a certain positions in the html. For example:

Right below the body tag, the svg looks fine Right below the body tag, the svg looks fine.

In contrast:

enter image description here The image looks very bad at another position in the page.

My first suspect was css, but this can't be the case, since the "correct/wrong-toggle" also happens when I move the svg within areas that have the same styling applied.

You can find the svg at https://jsfiddle.net/ubq3n30c/. In the jsfiddle it also looks fine, also in every other page I inserted it. Just my page seems to give the latex-svg a hard time, on some positions...

Any ideas what this could be?

  • Why would you want to make an SVG of nothing but normal text? It seems that every glyph got made into a path! If you want text in SVG, just use <text> tags. If you need something more complicated, use <foreignObject> with XHTML paragraphs. Also you could change how the rendering works.
    – morbusg
    Jul 12, 2015 at 6:17

2 Answers 2


I ended up embeding the svg not directly, but via an image tag, like so (in the javascript):

mySvg = '<img src="data:image/svg+xml;utf8,' + mySvg + '">';

This only anwsers the question as in "what can I do so this won't happen again", but not the part "which parts are conflicting". This I still don't know.


I guess the problem is conflicting path IDs. Since both SVG files use identical IDs they are no longer unique when combined in a single HTML file. Therefore, you probably have to postprocess the SVG files and add some kind of file marker to the IDs, e.g. g0-111-0 and g0-111-1 rather than using just g0-111 in both SVGs.

  • Thank you for the suggestion, I ended up using this solution too.
    – bersling
    Sep 2, 2015 at 11:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .