How to display SVG image in Rails?

Question

I have an svg image on /app/asssets/images/symbols.svg with this as content.

<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-search" viewBox="0 0 18 18"><path fill="currentColor" d="M12.8 11.4c.9-1.2 1.4-2.7 1.4-4.3C14.2 3.2 11 0 7.1 0S0 3.2 0 7.1c0 3.9 3.2 7.1 7.1 7.1 1.6 0 3.1-.5 4.3-1.4l5.2 5.2 1.4-1.4-5.2-5.2zM2 7.1C2 4.3 4.3 2 7.1 2s5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1S2 9.9 2 7.1z"/></symbol><symbol id="icon-view-default" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8 11H0V0h8v11zM18 5h-8V0h8v5zM8 18H0v-5h8v5zM18 18h-8V7h8v11z"/></g></symbol><symbol id="icon-view-alt" viewBox="0 0 18 18"><g fill="currentColor"><path d="M8 8H0V0h8v8zM18 8h-8V0h8v8zM8 18H0v-8h8v8zM18 18h-8v-8h8v8z"/></g></symbol><symbol id="icon-view-full" viewBox="0 0 18 18"><g fill="currentColor"><path d="M18 8H0V0h18v8zM18 18H0v-8h18v8z"/></g></symbol><symbol id="icon-facebook" viewBox="0 0 9 19"><path fill="currentColor" d="M6.7 3.6H9V0H6.3c-3.3.1-4 2.1-4 4.1V6H0v3.5h2.2V19h3.4V9.5h2.8L8.9 6H5.6V4.9c0-.7.4-1.3 1.1-1.3z"/></symbol><symbol id="icon-twitter" viewBox="0 0 17.9 15"><path fill="currentColor" d="M17.9 1.8c-.3.2-1.2.5-2 .6.5-.3 1.3-1.3 1.5-2.1-.5.3-1.7.8-2.3.8C14.4.5 13.5 0 12.4 0c-2 0-3.7 1.7-3.7 3.8 0 .3 0 .6.1.8-2.8-.1-6-1.5-7.8-4-1.1 2-.2 4.2 1.1 5-.4 0-1.2-.1-1.6-.4 0 1.3.6 3.1 2.9 3.7-.5.4-1.3.3-1.6.3.1 1.1 1.6 2.6 3.3 2.6-.6.7-2.6 2-5.1 1.6 1.7 1 3.7 1.6 5.8 1.6 6 0 10.6-5 10.3-11.1v-.1c.6-.4 1.3-1.1 1.8-2z"/></symbol><symbol id="icon-pinterest" viewBox="0 0 18 18"><path fill="currentColor" d="M2.3 0h13.4C17 0 18 .9 18 2.3v13.4c0 1.4-1 2.3-2.3 2.3H2.3C1 18 0 17.1 0 15.7V2.3C0 .9 1 0 2.3 0zm10.8 2c-.4 0-.8.4-.8.8v1.9c0 .4.4.8.8.8h2c.4 0 .8-.4.8-.8V2.8c.1-.4-.3-.8-.8-.8h-2zM16 7.6h-1.6c.2.5.2 1 .2 1.5 0 3-2.5 5.4-5.6 5.4-3.1 0-5.6-2.4-5.6-5.4 0-.5.1-1.1.2-1.5H2v7.6c0 .4.3.7.7.7h12.5c.4 0 .7-.3.7-.7l.1-7.6zM9 5.5C7 5.5 5.4 7 5.4 9c0 1.9 1.6 3.5 3.6 3.5s3.6-1.6 3.6-3.5c0-2-1.6-3.5-3.6-3.5z"/></symbol><symbol id="icon-tumblr" viewBox="0 0 11 19"><path fill="currentColor" d="M8.6 15.9c-1.6 0-2.3-1.3-2.3-2.2V7.8h4.1v-3h-4V.1S4.7 0 3.5 0C3.5 4.1 0 4.9 0 4.9v2.8h2.3v7C2.3 17.1 4.4 19 7 19s4-1.1 4-1.1v-3.1c0 .1-.8 1.1-2.4 1.1z"/></symbol><symbol id="icon-menu" viewBox="0 0 274.5 224.5"><g fill="currentColor"><path d="M274 53.8H.5V.5H274v53.3zM274 138.9H.5V85.6H274v53.3zM274 224H.5v-53.3H274V224z"/></g></symbol><symbol id="bar" viewBox="0 0 274.5 54.3"><path fill="currentColor" d="M274 53.8H.5V.5H274v53.3z"/></symbol><symbol id="arrow" viewBox="0 0 38 14"><path fill="currentColor" d="M31 0l-1.4 1.4L34.2 6H0v2h34.2l-4.6 4.6L31 14l7-7-7-7z"/></symbol><symbol id="refresh" viewBox="0 0 19 16"><path fill="currentColor" d="M9.4 6.2l5.9 4.4L19 4.4l-1.7-1L15.7 6c-.9-3.5-4-6-7.7-6-4.4 0-8 3.6-8 8s3.6 8 8 8c2.1 0 4.1-.8 5.6-2.3l-1.4-1.4C11.1 13.3 9.6 14 8 14c-3.3 0-6-2.7-6-6s2.7-6 6-6c3 0 5.4 2.2 5.9 5l-3.3-2.4-1.2 1.6z"/></symbol></svg> 

Now on the html template that I found on the network, images are displayed with:

  <svg> <use xlink:href="assets/img/symbols.svg#bar"></use> </svg> 

How can I do this job on rails.

I tried:

  <use xlink:href="images/symbols.svg#bar"></use> 

and svg-inline symbol

but on both I do not see images on my web page.

Can someone help me figure out how to make this work?

Answer 1

Display SVG (scalable vector graphics) in a Rails application

In particular, specify the type of SVG file 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 an assistant to display SVG

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

Call the SVG Processing Assistant in your view

 <%= show_svg(symbols.svg) %> 

---

From your question, I do not 100% understand your implementation, but these steps should make you see your SVG image visible. When you see SVG, you can apply CSS.

Answer 2

You can display SVG just like images.

For example, in haml:

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

hope this helps!

Answer 3

Its simplicity:

First add svg to the asset precompilation list in assets.rb

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

Then specify it in the erb / haml files as shown below:

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

Answer 4

I really don't know how to parse SVG files; but the same thing can be used for SVG files. Then you can use the resource_path helper in the SVG file; but the default catch rails handle CSS, JS and ERB. Thus, communication within the SVG can work with the asset pipeline. Perhaps if you try to change the name from 'symbols.svg' to 'symbols.svg.erb', it will parse the file to get the correct URL.

The problem is that the asset conveyor is not used in accordance with the rails.

and here is how you can parse (preprocess) svg files:

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

Additional Information on Helper Methods

2.3.2 CSS and Sass

When using the asset pipeline, asset paths need to be rewritten and sass-rails provides -url and -path helpers (portable to Sass, underlined in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheets.

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

You can also use a more general form:

 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 the erb extension to a JavaScript resource, making it something like application.js.erb, you can use the resource_path helper in your JavaScript code: $ ('# logo'). attr ({src: "<% = asset_path ('logo.png')%>"});

The path to the specific active resource is written here.

Similarly, you can use the resource_path helper in CoffeeScript files with the erb extension (for example, 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

Try inline_svg gem , it adds helper method to embed SVG from file directly into your template

Answer 6

Create a helper: (the contents are different in each case, user-defined)

 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 as follows:

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