boogdesign posts - Latest Comments on Rounded Corners for Image Elements in Firefox with SVG

robertc [Member] in response to: Rounded Corners for Image Elements in Firefox with SVG

Thu, 16 Sep 2010 11:41:35 +0000

Hi Bert. You would have to mess around with co-ordinate systems to get pixel equivalent values, a quick hack might be to use unequal values for rx and ry. Note that in Firefox 4.0 the issue preventing the use of CSS border-radius is now resolved fixed.

Rob

Bert Casier [Visitor] in response to: Rounded Corners for Image Elements in Firefox with SVG

Thu, 16 Sep 2010 10:02:16 +0000

This is nice!

Is there a way to specify pixel values for the radius, on landscape images the ellipse width is distorted…

JK [Visitor] in response to: Rounded Corners for Image Elements in Firefox with SVG

Wed, 10 Mar 2010 22:47:42 +0000

You just saved my life—this was driving me CRAZY.

Thank you thank you thank you

robertc [Member] in response to: Rounded Corners for Image Elements in Firefox with SVG

Fri, 18 Sep 2009 18:46:43 +0000

Hi Bill

The problem I’m referring to is that, in order to have the SVG included in the HTML recognised you have to serve the whole page as application/xhtml+xml. This leads to problems in IE, because it will then prompt you to download rather than display the web page.

If you put the SVG in a separate file then that can be served with it’s own content type but the HTML can be served as standard text/html to be backwards compatible with Internet Explorer.

If you look at the page linked to from the text ‘final example’ at the end of my post you will see there is an external CSS file, rounded-corners.css, which then links to resources.svg to pick up the clipping rectangle. I found my apache was already correctly configured for SVG and using the correct content type.

All the files are in the same folder, so you should be able to download them easily.

Rob

Bill [Visitor] in response to: Rounded Corners for Image Elements in Firefox with SVG

Thu, 17 Sep 2009 23:24:15 +0000

This is *really* great stuff, but I am a little bit confused about the very last part:

“It’s more useful to break the content into separate files, then the SVG can be served as image/svg+xml while your HTML is text/html.”

I followed the link, and I understand that server configuration is important, but still I don’t quite understand how to create the SVG resource file, where that goes on the server, etc.

any hints?

thanks!