Display .svg image in cfm problem

Question

There is an svg file I want put into my cfm page. Safari can render it correctly, however, other browsers: In Chrome and Opera it will only show up as xml source; In IE it just left as blank; In FF it display as a plugin icon, if I click it, it will search for plugin, eventually will tell me there is no plugin available. I had Adobe SVG view installed on my machine (client machine). I embedded the svg file in cfm as:

<embed src="#myimagelocation#" type="image/svg+xml" width="32" height="32"></embed>

Where #myimagelocation# would contain value like: http://example.com/a.svg.

Anyone know how to solve the problem? Thank you very much.

Answer 1

<object data="image-svg.svg" type="image/svg+xml" height="48" width="48">
    <img src="image-png.png" height="48" width="48" alt="this is a PNG" />
</object>

Where the inner-contents of the object tag (image-png.png) is an alternate representation of the SVG image. Think of it similar to alt-text on an image -- it's only used where SVG isn't supported.

From How to Include Scalable Vector Graphics (SVG) In-line

Answer 2

This sounds more like a server issue than ColdFusion. If you replace the CFM with hard coded text, do you see the exact same issue in non-Safari browsers?

Answer 3

If it renders in Safari, you know that the HTML is being rendered as intended. However, "as-intended" and "correct" may not be the same thing. Regardless, the Jedi himself is right that (assuming you're not generating the SVG with CF) then ColdFusion is not part of your problem.

Opera is supposed to have support for SVG out-of-the-box since V.8, so that's where I'd focus for testing. I'd try the object tag in addition to the embed tag, as is (was?) required for Flash embeds.

IE has no native support, and FF's support is partial. I'd test these and see what happens after getting Opera working.

Answer 4

Verify that the correct svg mimetype is sent, a 'type' attribute is not enough. Also make sure that the svg root element declares the svg namespace, e.g xmlns="http://www.w3.org/2000/svg".