How do I display SVG image in Rails?

Question

I have a svg image on /app/asssets/images/symbols.svg with this as contents.

Answer 1

I really don't know how parse the SVG files; but this same thing can be use to the SVG files. You can then use the asset_path helper in the SVG file; but the catch is by default rails parse CSS, JS and ERB. In that way the link inside the SVG can work with the asset pipeline. Maybe if you try to change the name from 'symbols.svg' to 'symbols.svg.erb' it will parse the file to get the correct url.

You problem is that the asset pipeline is not be used in accord to rails.

and this is how you could parse (preprocess) svg files:

The default matcher for compiling files includes application.js, application.css and all non-JS/CSS files (this will include all image assets automatically) from app/assets folders including your gems: [ Proc.new { |filename, path| path =~ /app/assets/ && !%w(.js .css).include?(File.extname(filename)) }, /application.(css|js)$/ ]

More info about the helpers methods

2.3.2 CSS and Sass

When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

image-url("rails.png") becomes url(/assets/rails.png)
image-path("rails.png") becomes "/assets/rails.png".

The more generic form can also be used:

asset-url("rails.png") becomes url(/assets/rails.png)
asset-path("rails.png") becomes "/assets/rails.png"

2.3.3 JavaScript/CoffeeScript and ERB

If you add an erb extension to a JavaScript asset, making it something such as application.js.erb, you can then use the asset_path helper in your JavaScript code: $('#logo').attr({ src: "<%= asset_path('logo.png') %>" });

This writes the path to the particular asset being referenced.

Similarly, you can use the asset_path helper in CoffeeScript files with erb extension (e.g., application.js.coffee.erb): $('#logo').attr src: "<%= asset_path('logo.png') %>"

You can check: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets