railsでsvgをviewに表示する

Tweet

Pocket

概要

みなさんこんにちはcandleです。
今回はrailsでsvgを出力します。

レスポンシブウェブデザインから始まり、最近ではwebでもsvgの使用が増えてきたような気がします。
手こずらずにsvgを表示できるようになっておきましょう。

前提

適当なrailsプロジェクトがある

ファイルを設置する

この画像をダウンロードするか、自前のsvgファイルを用意します。

ファイルを置く場所はapp/assets/images/になります。

svgファイルをimgタグで読み込む

この方法はあまりお勧めしません。本当に簡単にsvgを表示する時だけ使用してください。

svgファイルはimgタグでも読み込めます。

問題はsvgの特徴を生かしきれないことにあります。
適当なviewに以下のように書きます。

<%= image_tag "ringsquare.svg", :width => "150", :height => "150"  %>

もしも、エラーが出た場合は幾つかしたの方法を試してください。

表示結果は下のようになります。

imgタグで読み込むとsvgは画像として扱われるので、
svg特有のfillとかstrokeとか色の変更はできません。

本当にお手軽にやる場合のみですね。

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

上記のimgとして読み込む方法はDOMがimgでしたが、svg本来のDOMはSVGです。

素晴らしい開発者の方が作成したhelperが便利です。
下記のサイトを参考にしました。

https://coderwall.com/p/d1vplg/embedding-and-styling-inline-svg-documents-with-css-in-rails

以下のファイルを開き、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

実際に使ってみます。
適当なviewに以下のように記述します。

<%= embedded_svg("ringsquare.svg", class: "good-svg") %>

表示させると以下のようになります。

注目すべきところはDOMがsvgになっていることと、classが追加されていることです。

svgにスタイルをあてる

svgにスタイルを当てる前に、svgファイルのfillとかstrokeのデフォルトの値を空にしておきます。
これをやらないと、svgファイルの方のスタイルが優先されて適応されます。

app/assets/images/ringsquare.svgを開いて、fillとstrokeの値を空にします。

fill=”” stroke=””

後は下のようにcssのスタイルを作成すれば、svg独特のスタイルを適応できます。

.good-svg{
  width: 150px;
  height: 150px;
  fill: #D000FA;
  stroke: #0500FA;
}

表示すると以下のようになります。

まとめ

実はこの素晴らしいhelperは記事を書いている時に知って、試してみたらうまくいたのでまとめました。いいものがあるんですね。