railsでsvgにスタイルを当てる方法

svgファイルを読み込むhelperを作成する

# app/helpers/application_helper.rb
def embedded_svg(filename, options={})
    file = File.read(Rails.root.join('app', 'assets', 'images', filename))
    doc = Nokogiri::HTML::DocumentFragment.parse file
    svg = doc.at_css 'svg'
    if options[:class].present?
      svg['class'] = options[:class]
    end
    doc.to_html.html_safe
end

helperをviewに記述する

/ hoge.html.slim
.svg_wrapper
  = embedded_svg('twitter_comment.svg', class: 'comment_svg')

すると以下のようなhtmlになる

<div class="svg_wrapper"><!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg class="comment_svg" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<style type="text/css">
</style>
<g>
    <path class="st0" d="M339.602,46.658H172.398C77.173,46.658,0,123.849,0,219.048c0,95.225,77.173,172.416,172.398,172.416h122.568
      c24.641,0,32.324,11.437,32.324,20.799c0,13.849-7.189,26.831-24.606,39.248c-10.793,7.684-2.314,13.831,6.147,13.831
      C418.878,465.342,512,345.282,512,219.048C512,123.849,434.81,46.658,339.602,46.658z"></path>
</g>
</svg>
</div>

cssを当てる

.svg_wrapper {
  height: 50rem;
  padding: 30rem;

  .comment_svg {
    width: 1rem !important;
    height: 1rem !important;

    &:hover {
      fill: red;
    }
  }
}

ここで注意なのが、svgのhtmlを確認すると

style="width: 256px; height: 256px; opacity: 1;"

のようにスタイルが当たっている場合があるので、svgファイルのスタイルが優先されてしまう。

このような場合は、これらの記述を消すか、以下のように

width: 1rem !important;
height: 1rem !important;

で優先する必要がある。

すると以下のようにsvgにスタイルを当てることができる。