display SVG challenge

rubyonrails-talk
1

Here's a challenge to all you good rails programmers: how does one display SVG images in Rails ? Now I realize many of you ignore SVG since it "isn't supported everywhere" but that is rapidly changing (it is supported in Firefox since 1.5, it's now in the Safari overnight builds, and in IE under the SVG plugin - which is usually shipped but not activated with the Adobe plugins.

Since SVG can be displayed in ordinary HTML (using <embed type=image/ svg+xml in Firefox), I can only think of 2 reasons that it is not recognized under Rails: 1) maybe Webrick or Mongrel doesn't recognize it ? 2) somewhere Rails doesn't recognize the mime type - I've tried changing mime in 2 locations: a) in the environment.rb file under myproject/config adding Mime::Type.register "image/svg+xml" (also tried "application/ xhtml+xml")

b) in httputils.rb under /usr/lib/ruby/1.8/webrick/ adding "svg" => "image/svg+xml"

But no matter what I try the browser recognizes it is a svg file but wants to just save it (indicative of a mime problem).

Can anyone solve this problem ?

2

Are you embedding the SVG image in HTML or serving it directly?

3

well for icons - they are static svg files located in the /public/ images folder, but graphs will be generated dynamically based on data.

4

Mongrel seems to work with embedded SVG, IF you serve the page as .xhtml which maps in Mongrel’s mimetypes.yml to application/xhtml+xml.

try this little chunk stolen from Sam Ruby’s ( http://www.intertwingly.net/blog/2007/01/15/application-atom-json) site:

<html>
<body>
<svg
 xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" xmlns:l=
"[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)" viewBox="0 0 100 102">
  <
radialGradient id="jsongrad" cx="65"
cy="90" r="100" gradientUnits=
"userSpaceOnUse"><stop stop-color="#EEF"/><
stop offset="1"/></radialGradient>

  <path d="M61,2 A49,49 0 0,0 39,99 C9,79 10,24 45,25 C72,24 65,75 50,75 C93,79 91,21 62,2"
id="jsonswirl" fill="url(#jsongrad)"/>


<use l:href="#jsonswirl" transform=
"translate(50, 50) rotate(180) translate(-50, -50)"/>
  <g transform=
"scale(2, 2) translate(25, 25)" fill="none">
    <ellipse
 stroke="#66899a" rx="3" ry=
"22"/>
    <ellipse stroke="#e1d85d"
rx="3" ry="22" transform=
"rotate(-66)"/>
    <ellipse stroke="#80a3cf"
rx="3" ry="22" transform
="rotate(66)"/>

    <circle fill=
"#80a3cf" r="6.5" stroke="#FFF"
/>
 </g>
</svg>
  </body>


</html>
5

thanks for info - and perhaps if .svg is added to the yml mapping to application/xhtml+xml it may work, I'll also try this in webrick (I thought I did but will double check).

6

Getting closer I think - I applied the ".svg" => application/xhtml +xml mapping to webrick httputils.rb and now I get empty scrollbars when trying to display a SVG icon from the /public/images folder. I played around with some sizes - but no luck. Any ideas ?