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 '15 at 6:17

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 '15 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.