Ruby-on-rails 如何在 Rails 中显示 SVG 图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36986925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I display SVG image in Rails?
提问by Roelof Wobben
I have a svg image on /app/asssets/images/symbols.svg with this as contents.
我在 /app/asssets/images/symbols.svg 上有一个 svg 图像，以此作为内容。
<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 a html template which I found on the net the images are shown with :
现在在我在网上找到的 html 模板上，图像显示为：
<svg>
<use xlink:href="assets/img/symbols.svg#bar"></use>
</svg>
How can I make this work on rails.
我怎样才能在导轨上进行这项工作。
I tried :
我试过 ：
<use xlink:href="images/symbols.svg#bar"></use>
and the svg-inline gem
和 svg-inline gem
but on both I see no images on my webpage.
但在我的网页上都看不到图像。
Can anyone help me figure out how to make this work ?
谁能帮我弄清楚如何使这项工作？
回答by Elvn
Displaying SVGs (scalable vector graphics) in a Rails app
在 Rails 应用程序中显示 SVG（可缩放矢量图形）
Specifically include the SVG filetype in asset compilation
具体包括资产编译中的SVG文件类型
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
创建一个助手来显示 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
在您的视图中调用 SVG 处理助手
<%= 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.
从你的问题来看，我不是 100% 清楚你的实现，但这些步骤应该让你看到你的 SVG 图像。使 SVG 可见后，您就可以应用 CSS。
回答by yuval
Try the inline_svggem, it adds a helper method for in-lining SVG from a file directly into your template
试试inline_svggem，它添加了一个辅助方法，用于将文件中的 SVG 直接内联到您的模板中
回答by Stef Hej
You can display SVGs in the same way as images.
您可以以与图像相同的方式显示 SVG。
For example in haml:
例如在haml中：
%img{:src => "/images/image1.svg"}
hope it helps!
希望能帮助到你！
回答by maguri
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' %>
回答by tmikeschu
I've been trying different solutions for this, and ultimately landed on just putting the svg doc in an html.erbpartial. Since svg is valid html, it works fine to just move it from assets to views.
我一直在为此尝试不同的解决方案，最终只是将 svg 文档放在了html.erb部分中。由于 svg 是有效的 html，因此只需将其从资产移动到视图即可。
<%# app/views/home/index.html.erb %>
<%= render partial: "svgs/some_svg.html.erb"
Given
给定的
app
| views
| | home
| | | index.html.erb
| | svgs
| | | some_svg.html.erb
回答by nvn
Its straightforward:
它的直截了当：
First, add the svg to the asset precompile list in assets.rb
首先，将svg添加到assets.rb中的资产预编译列表中
application.config.assets.precompile +=
%w(<your other files> symbol-defs.svg)
Then reference it in your erb/haml files as shown below:
然后在您的 erb/haml 文件中引用它，如下所示：
<svg class="icon gr-menu">
<use xlink:href="<%= asset_path('symbol-defs') %>#gr-menu"></use>
</svg>
回答by victor sosa
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.
我真的不知道如何解析 SVG 文件；但是同样的事情可以用于 SVG 文件。然后您可以在 SVG 文件中使用 asset_path 助手；但问题是默认情况下 rails 解析 CSS、JS 和 ERB。通过这种方式，SVG 内部的链接可以与资产管道一起使用。也许如果您尝试将名称从“symbols.svg”更改为“symbols.svg.erb”，它会解析文件以获取正确的 url。
You problem is that the asset pipeline is not be used in accord to rails.
你的问题是资产管道没有按照 rails 使用。
and this is how you could parse (preprocess) svg files:
这就是解析（预处理）svg 文件的方法：
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)$/ ]
编译文件的默认匹配器包括 application.js、application.css 和来自 app/assets 文件夹的所有非 JS/CSS 文件（这将自动包括所有图像资产），包括您的 gem：[ Proc.new { |filename, path| path =~ /app/assets/ && !%w(.js .css).include?(File.extname(filename)) }, /application.(css|js)$/ ]
More info about the helpers methods
有关 helpers 方法的更多信息
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') %>"
2.3.2 CSS 和 Sass
使用资产管道时，必须重新编写资产的路径，并且 sass-rails 为以下资产类提供 -url 和 -path 帮助器（在 Sass 中用连字符连接，在 Ruby 中用下划线表示）：图像、字体、视频、音频、JavaScript 和样式表。
image-url("rails.png") becomes url(/assets/rails.png) image-path("rails.png") becomes "/assets/rails.png".也可以使用更通用的形式：
asset-url("rails.png") becomes url(/assets/rails.png) asset-path("rails.png") becomes "/assets/rails.png"2.3.3 JavaScript/CoffeeScript 和 ERB
如果您向 JavaScript 资产添加 erb 扩展，使其成为诸如 application.js.erb 之类的内容，那么您可以在 JavaScript 代码中使用 asset_path 助手： $('#logo').attr({ src: "<% = asset_path('logo.png') %>" });
这将写入所引用的特定资产的路径。
类似地，您可以在带有 erb 扩展名的 CoffeeScript 文件中使用 asset_path 助手（例如 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
您可以查看：http: //guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
