CODEWITHSUNDEEP
htmlimagebrowsercoldfusionsvg
Simon Guo
Simon Guo

Reputation: 2936

Display .svg image in cfm problem

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.

Upvotes: 1

Views: 1561

Answers (4)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 61026

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".

Upvotes: 0

Ben Doom
Ben Doom

Reputation: 7885

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.

Upvotes: 0

Raymond Camden
Raymond Camden

Reputation: 10857

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?

Upvotes: 0

Adam Tuttle
Adam Tuttle

Reputation: 19834

<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

Upvotes: 4

Related Questions