joppot

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

プログラミング

railsでsvgをviewに表示する

投稿日:

Pocket

railssvgtopthumb

概要

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

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

前提

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

SPONSORED LINK

ファイルを設置する

この画像をダウンロードするか、自前の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のrakeで作成したカラムの型とdefault値を変更する方法

概要 みなさんこんにちはcandleです。今回はrakeコマンドのややこしいところを扱います。 rakeコマンドはわりと便利で、データベースのカラムの追加や型の変更をマイグレーションファイルから読み込 …

Mysqlで今日以降の最も近い日付を取得する

概要 みなさんこんにちはcandleです。今回はmysqlで今日以降の最も近い日にちを取得する方法を紹介します。 ライブや、イベントなどで、今日から見て、最も近い日のデータを取得したみたいなことってあ …

C++のopencvでhelloworld

概要 みなさんこんにちはcandleです。インストールできたopencvを使ってhelloworldを行いましょう。 opencvでhelloworldとはなんぞや、と感じるかもしれませんが、open …

wordpressで任意のサブカテゴリー全てをget_categoriesで取得する

概要 みなさんこんにちはcandleです。今回はwordpress開発でよくあるサブカテゴリーを全て取得する方法を紹介します。 カテゴリー一覧をサイドバーに表示したい時があります。この時、get_ca …

正規表現を極めるその1

概要 みなさんこんにちはcandleです。今回から正規表現を1から100まで極めようと思います。 正規表現って、使えると便利ですが、それを勉強して使いこなせている人って少ないと思います。この機会にぜひ …

  • English
  • 日本語

プロフィール


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

twitter

スポンサードリンク

アーカイブ