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

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

関連記事

wordpressのget_categoriesでサブカテゴリーを含まないカテゴリー一覧を取得する

概要 みなさんこんにちはcandleです。今回はカテゴリー一覧にサブカテゴリーを含まない取得の仕方を紹介します。 サブカテゴリーを使用しているサイトの場合、場合によってはサブカテゴリーとトップの階層の …

fabricでmysqlコマンドを実行する関数を自作する

概要 皆さんこんにちはcandleです。今回はfabricからリモート先のサーバのmysqlを実行するための環境変数と関数を作成したいと思います。 mysqlは一般にmysqlコマンドをログインしてか …

gitpythonでfirst commitする

概要 みなさんこんにちはcandleです。今回はgitpythonで、初めてのコミットをする方法を紹介します。 gitpythonでコミットは難しくないのですが、初めてのコミットは要領が違ったので、ま …

ruby on railsのckeditor gemをapacheのproductionの本番環境で動かす

概要 みなさんこんにちはcandleです。今回はckeditorを本番環境で動かしてみたいと思います。 とは言っても基本的な記述はdevelopment環境と同じなので、そこまでは前回の記事を参照お願 …

railsのsimple-captcha gemを使用してform_forを使ったフォームを画像認証する

概要 みなさんこんにちはcandleです。公に開かれたフォームはスパムや総当り攻撃を受けやすいです。 そこで、画像認証を導入して、悪意のあるフォームを拒否してみましょう。 simple-captcha …

  • English
  • 日本語

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