如何在Rails中显示SVG图像？

Question

我在/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>

现在我在网上找到一个html模板,图像显示为:

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

如何在轨道上完成这项工作.

我试过了 :

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

和svg-inline gem

但两者都没有在我的网页上看到任何图片.

任何人都可以帮我弄清楚如何使这项工作？

Answer 1

在Rails应用程序中显示SVG(可缩放矢量图形)

具体包括资产编译中的SVG文件类型

production.rb 

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

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

创建一个帮助程序来显示SVG

myhelper.rb

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

在视图中调用SVG处理助手

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

从你的问题我不是100%清楚你的实现,但这些步骤应该让你到你的SVG图像可见.一旦SVG可见,您就可以应用CSS.

Answer 2

您可以在 Rails 中插入 svg 内联，而不需要任何额外的 gem，使用如下所示：

<%= render inline: Rails.root.join('public/icon.svg').read %>

如果您需要单击 svg 执行某些操作（例如发出 POST 请求），请将整个内容用link_toa 包裹起来do，如下所示：

<%= link_to some_path(@something), method: :post do %>
    <%= render inline: Rails.root.join('public/icon.svg').read %>
<% end %>

Answer 3

试试inline_svggem，它添加了一个辅助方法，用于将文件中的 SVG 直接内联到您的模板中

Answer 4

您可以以与图像相同的方式显示 SVG。

例如在haml中：

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

希望能帮助到你！

Answer 5

我真的不知道如何解析 SVG 文件；但同样的事情也可以用于 SVG 文件。然后，您可以在 SVG 文件中使用 asset_path 助手；但问题是 Rails 默认解析 CSS、JS 和 ERB。这样，SVG 内部的链接就可以与资源管道配合使用。也许如果您尝试将名称从“symbols.svg”更改为“symbols.svg.erb”，它会解析文件以获取正确的网址。

你的问题是资产管道没有按照轨道使用。

这就是解析（预处理）svg 文件的方法：

编译文件的默认匹配器包括 application.js、application.css 和 app/assets 文件夹中的所有非 JS/CSS 文件（这将自动包括所有图像资源），包括您的 gem： [ Proc.new { |filename, path| 路径 =~ /app/assets/ && !%w(.js .css).include?(File.extname(文件名)) }, /application.(css|js)$/ ]

有关辅助方法的更多信息

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') % >”

您可以检查： http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets