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

Displaying SVGs (scalable vector graphics) in a Rails app

Specifically include the SVG filetype in asset compilation

production.rb 

  config.assets.precompile += %w( '.svg' )  

  # Must include to get inline SVGs to work in deploy
  config.assets.css_compressor = :sass

Create a helper to display the SVG

myhelper.rb

def show_svg(path)
  File.open("app/assets/images/#{path}", "rb") do |file|
    raw file.read
  end
end

Invoke the SVG processing helper in your view

<%= show_svg('symbols.svg') %>

---

From your question I'm not 100% clear about your implementation, but these steps should get you to the point where your SVG image is visible. Once you have the SVG visible, you can apply CSS.

Answer 2

Its straightforward:

First, add the svg to the asset precompile list in assets.rb

application.config.assets.precompile +=
    %w(<your other files> symbol-defs.svg)

Then reference it in your erb/haml files as shown below:

<svg class="icon gr-menu">
  <use xlink:href="<%= asset_path('symbol-defs') %>#gr-menu"></use>
</svg>

Answer 3

Try the inline_svg gem, it adds a helper method for in-lining SVG from a file directly into your template

Answer 4

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

Answer 5

Create a helper: (content is different in each case, custom your own one)

def icon(icon, css_class: "")
  content_tag(:svg, class: "icon icon_#{icon} #{css_class}") do
      content_tag(:use, nil, 'xlink:href' => "#icon_#{icon}")
  end
end

Use it like this:

<%= icon 'arrow-menu' , css_class: 'arrow-breadcrumb' %>

Answer 6

You can display SVGs in the same way as images.

For example in haml:

%img{:src => "/images/image1.svg"}

hope it helps!