如何在Rails中内联渲染SVG？指定路径文件用render partial报错求助

你遇到的问题很常见——render partial找不到SVG文件，是因为Rails的partial默认只会在app/views目录下查找模板文件，而你的SVG放在vendor/theme/assets/icons这个assets目录里，所以直接用partial渲染肯定不行。下面给你几种靠谱的解决方案：

方法1：直接读取Asset文件内容（适用于Sprockets环境） #

如果你的项目还是用Sprockets处理assets（比如Rails 5及之前，或者Rails 6+但没完全切换到Webpacker），可以用Rails的asset查找API直接读取SVG内容，然后输出原始HTML：

在视图文件里写：

<%= raw Rails.application.assets.find_asset('icons/icon-1.svg').to_s %>

这里的icons/icon-1.svg是相对于vendor/theme/assets的路径，因为Sprockets会扫描vendor/assets目录下的文件。raw方法是为了防止Rails把SVG标签转义成HTML实体。

方法2：把SVG移到Views目录作为Partial #

如果你想继续用render partial的方式，可以把SVG文件移到app/views下的某个子目录，比如app/views/icons/_icon-1.svg.erb（注意文件名要加.erb后缀，让Rails识别为模板）。

之后在视图里就能直接渲染了：

<%= render partial: 'icons/icon-1' %>

这种方法的好处是如果需要给SVG动态添加属性（比如class、data-*），可以直接在SVG文件里写ERB逻辑，比如：

<svg class="<%= icon_class %>" viewBox="0 0 24 24">
  <!-- 路径内容 -->
</svg>

方法3：封装成Helper方法（推荐复用场景） #

如果需要在多个地方渲染不同的SVG，写一个Helper方法会更方便。在app/helpers/application_helper.rb里添加：

def inline_svg(icon_name)
  # 构建SVG文件的asset路径
  asset_path = "icons/#{icon_name}.svg"
  # 查找asset文件
  svg_asset = Rails.application.assets.find_asset(asset_path)
  
  # 如果找不到文件，返回空字符串或者默认图标
  return raw('<span class="icon-missing"></span>') unless svg_asset

  # 输出原始SVG内容
  raw svg_asset.to_s
end

然后在视图里直接调用：

<%= inline_svg('icon-1') %>

针对Rails 7+（Importmaps/Webpacker）的注意事项 #

如果你的项目用Importmaps或者Webpacker处理前端资产，上面的Sprockets方法可能不适用。这时候可以直接读取文件系统里的SVG文件：

<%= raw File.read(Rails.root.join('vendor/theme/assets/icons/icon-1.svg')) %>

不过要确保这个文件路径是正确的，而且Rails有读取权限。另外，如果你用Webpacker，建议把SVG放到app/javascript/assets目录下，然后通过webpack编译后引用，但内联渲染的话还是直接读取文件更直接。

内容的提问来源于stack exchange，提问作者Amin Shah Gilani