CODEWITHSUNDEEP
htmlsvg
J.W Kang
J.W Kang

Reputation: 155

Multiple inline SVG in HTML not displayed correctly

I have several SVG converted from PDF (converted using pdftocairo), and can be viewed in a browser without any problems.

One of the SVG is here.

When I embed this SVG into HTML, it displays correctly, but when I embed several different SVG into the same HTML, the display will not be correct.

Details as follows: enter image description here

So why multiple inline SVG in HTML not displayed correctly? I observed that only the first inline SVG can be displayed correctly.

Moreover, the HTML with embedded SVG at here.

Upvotes: 0

Views: 596

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The problem is almost certainly a clash of id attributes. The id attributes need to be unique on the page. But I expect your two SVGs reuse id values for two different things. For example each might have a id="glyph0-1" where each one refers to a different font glyph.

You'll need to either embed the SVGs a different way - such as via an <img>, <embed>, <iframe> etc. Or rename any duplicate ids in the second, or any subsequent, SVGs. If you're lucky, perhaps pdftocairo has an option for this.

Upvotes: 2

Related Questions