joppot

コピペで絶対動く。説明を妥協しない

プログラミング

railsでsvgをviewに表示する

投稿日:


railssvgtopthumb

概要

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

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

前提

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

ファイルを設置する

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

reactandroidtuildtopthumb

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

setsvgfile


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

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

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

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

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

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

assetsをパスに加える
<%= image_tag "/assets/ringsquare.svg", :width => “150”, :height => “150” %>

config/initializers/assets.rbに以下を加える
Rails.application.config.assets.precompile += %w( *.svg )

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

mysvgimage

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

awesomehelper

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

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

writemysvghelperfunc

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

svgclass

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

svgにスタイルをあてる

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

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

fill=”” stroke=””

emptyfillstroke

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

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

good-svgstyle

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

bettersvgstyle-1


まとめ

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

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

railsのroutesでhttpのGETやPOSTを指定してルーティングを表示する

概要 みんさんこんにちはcandleです。今回は少し頭をひねれば分かる事ですが、少し迷ったので、記事にまとめました。 railsですごいwebアプリケーションを作っていると、ルーティングが複雑きわまり …

processingで重複しないランダムな数を配列で取得する

概要 みなさんこんにちはcandleです。今回はprocessingで重複しないランダムな数を配列で取得する関数を作成したいとおもいます。 前提 なし

railsのrakeで作成したmigrationファイルとstatus履歴を削除する

概要 みなさんこんにちはcandleです。今回はrakeコマンドで作成したマイグレーションファイルの管理を紹介します。rakeコマンドを使っていると、よくよく考えれば必要の無いファイルがある。とか重複 …

ruby on rails のckeditor gemの機能ボタンをカスタマイズする

概要 みなさんこんにちはcandleです。今回はruby on rails のckeditor gemのショートカットボタンをカスタマイズして自分が必要な機能のみを表示してみましょう。 前提 cked …

wordpressのコメントフォームを編集し、名前とメールのデフォルト値を設定する

概要 みなさんこんにちはcandleです。今回はwordpressのコメントフォームをオーバーライドしてフォームの「名前」「メールアドレス」「url」のデフォルトバリューを設定したいと思います。 コメ …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー