SVG in Rails

How can I show an SVG image in a view - I only see how to use jpgs or
pngs

try:

this is the 
alternative
for browsers without svg support

Chris H. wrote:

try:

this is the 
alternative
for browsers without svg support

This does not work. It seems there are several problems with this code

  • first Rails uses =>, not “=”, then of course ruby <% %> brackets, then
    maybe the difference of object vs embed with Firefox

I actually understand SVG very well and I realized it was straight html
(and I’ve tried html code that works under php (where it does use
“embed”) - do you have a code example of what is working, maybe I am
missing syntax. Somehow the SVG code seems to be subsituting the SVG
object into the params. Here’s the error I get using Firefox 1.5 Rails
1.0 on Ubuntu with Webbrick:

PGError: ERROR: invalid input syntax for integer: “icon.svg”
: SELECT * FROM projects WHERE (id = ‘icon.svg’) LIMIT 1

RAILS_ROOT: script/…/config/…
Application Trace | Framework Trace | Full Trace

/usr/lib/ruby/gems/1.8/gems/activerecord-1.13.2/lib/active_record/base.rb:393:in
find' ./script/../config/../app/controllers/program_controller.rb:14:inmainpage’

Request

Parameters: {“id”=>“icon.svg”}

Ben M. wrote:

jack wrote:

maybe the difference of object vs embed with Firefox

That works for me… in Firefox 1.5.

You do realize that svg is a text (xml) format that is rendered on the
fly by an svg
processor, right? It’s not an binary image format. IE won’t render it
without the adobe
plugin and firefox finally got native support in 1.5.

Also, that code that Chris posted wasn’t ruby… it’s html! Just put it
in your rhtml
template and it’ll pass right through. If you have dynamic information
(like the file
name) to put into the object tag, just break into ruby where you need
to.

For that matter, the other way to do this is to put the svg code right
in your template.
That was the whole intent of xhtml, is that we would be able to start
mixing markup
languages. Now, if you take that route, you’re probably in for some
browser difficulties.
On the other hand, using svg at all is still sketchy unless you know
your audience will
all have a browser capable of rendering it.

Apologies if you already knew all about svg, but there are all levels of
understanding on
this list.

b

jack wrote:

maybe the difference of object vs embed with Firefox

That works for me… in Firefox 1.5.

You do realize that svg is a text (xml) format that is rendered on the
fly by an svg
processor, right? It’s not an binary image format. IE won’t render it
without the adobe
plugin and firefox finally got native support in 1.5.

Also, that code that Chris posted wasn’t ruby… it’s html! Just put it
in your rhtml
template and it’ll pass right through. If you have dynamic information
(like the file
name) to put into the object tag, just break into ruby where you need
to.

For that matter, the other way to do this is to put the svg code right
in your template.
That was the whole intent of xhtml, is that we would be able to start
mixing markup
languages. Now, if you take that route, you’re probably in for some
browser difficulties.
On the other hand, using svg at all is still sketchy unless you know
your audience will
all have a browser capable of rendering it.

Apologies if you already knew all about svg, but there are all levels of
understanding on
this list.

b

I just copied Chris’ example into an html page, changed the name of
svg file I had
kicking around to match and opened it in Firefox… no ruby or rails
involved. So, that
snippet is valid html syntax.

I’m not clear on what you’re tyring to do… what produced that error?
You should be able
to just put the object tag in your rhtml. If you need to set the name of
the svg at
request time, you can just set an instance variable in the action and
use that in the view.

So, like this:

in action:

@svg_file = “/svg/test.svg” # or some logic to get file name …

in view:

Hm, well crap… I tried throwing a little test together with the above
and for some
reason, firefox is opening the svg in another tab with a file:// url to
my temp dir! Weird.

Well, that’s not the problem you’re having… Try to get your rhtml
working and maybe
someone else here (Chris?) knows why Firefox treats the svg differently
when it comes from
a server…

b

Ben M. wrote:

Hm, well crap… I tried throwing a little test together with the above
and for some
reason, firefox is opening the svg in another tab with a file:// url to
my temp dir! Weird.

Well, that’s not the problem you’re having… Try to get your rhtml
working and maybe
someone else here (Chris?) knows why Firefox treats the svg differently
when it comes from
a server…

SVG does require different tags (embed vs object) between Linux and
Windows or maybe it’s between Firefox and IE. My rhtml file runs fine
without the svg image and my SVG code runs fine in html and php -
something is goofy here so that is why I would like to see a working
Rails snippet. Use of SVG is critical in this app so would appreciate
any help.

Glad to hear you got it working Jack!!

Um, though shouldn’t you remove the closing / from the opening tag if
you have a closing tag?

b

okay - got SVG working (at least on Firefox so far) - combination of
putting the closing embed tag (apparently wasn’t needed in html or php)
and putting images into the …/public/images folder. Also note
webbrick doesn’t seem to recognize the mime type but runs fine on
apache2.

jack wrote:

Ben M. wrote:

Hm, well crap… I tried throwing a little test together with the above
and for some
reason, firefox is opening the svg in another tab with a file:// url to
my temp dir! Weird.

Well, that’s not the problem you’re having… Try to get your rhtml
working and maybe
someone else here (Chris?) knows why Firefox treats the svg differently
when it comes from
a server…

SVG does require different tags (embed vs object) between Linux and
Windows or maybe it’s between Firefox and IE. My rhtml file runs fine
without the svg image and my SVG code runs fine in html and php -
something is goofy here so that is why I would like to see a working
Rails snippet. Use of SVG is critical in this app so would appreciate
any help.