I have the following SVG: http://bensouthgate.com/i/malthus2.svg
Which shows b(y) = d(y)
However, when I embed it in a page: http://bensouthgate.com/p/malthus.php
it shows b(y) = f(y)
among other mistakes.
The way I am including it in the page is
<?php include '../i/malthus2.svg'; ?>
What is going on?
Edit: SVG was rendered here -> http://www.tlhiv.org/ltxpreview/
You're embedding more than one SVG directly within your HTML document and therefor the IDs of the various glyphs aren't unique anymore. The ID of the letter d
in your second math-SVG is glyph0-2
but glyph0-2
is already defined in your first math-SVG for the letter f
.
You have to ensure that all your IDs are absolutely unique if you want to include your SVGs directly in your HTML document.
An alternative would be to include the SVGs via the <img>
tag.
DOM IDs must be unique within a document. Your two SVG images both use the same #glyphX-Y
naming pattern. You'll note that the incorrect d
you're getting shares the same ID with the f
definition.
Since you're using PHP include
to load those external .svg files, their same-name IDs are conflicting. The svg files have no knowledge of each other's existence, since they're in completely separate files. So as far as each individual file is concerned, their IDs are perfectly acceptable. It's only when you slap them into the SAME containing document that the conflicts start.