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

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

関連記事

phpmyadminでmysqlデータベースの照合順序を変更する

概要 みなさんこんにちはcandleです。 ちょっとした事なのですが、意外に分からなかったのでまとめました。 phpmyadminを使ってデータベースを作ると、うっかり、utf8_general_ci …

gemspecのsummary項目とdescription項目の違いに付いて

概要 みなさんこんにちはcandleです。 gemを自作していたら、gemspecのところでsummaryとdescriptionの違いが分からなかったので、 調べたら、公式ページに書いてあったので、 …

macにmiddlemanの環境構築をする

概要 みなさんこんにちはcandleです。今回はmacにmiddlemanの環境構築をしてみたいと思います。 middlemanといえばwebサイト作成支援ツールみたいなものです。 githubやhe …

ElastiCacheのmemcachedとEC2上のrailsとdalli-elasticacheを使ってキャッシュ管理する

概要 皆さんこんにちはcandleです。今回はaws上にあるElastiCacheというサービスを使って railsのキャッシュを管理したいと思います。 キャッシュというのはwebサービス上でよく使う …

MAMP2.2上でのPHP5.3.27のpearの使い方と動作確認

概要 みなさんこんにちはcandleです。今回はMAMPのpearの使い方と動作確認です。 pearというのはphpのライブラリ群の様なもので、便利なライブラリがそろっています。 中にはなぜ、これがp …

  • English
  • 日本語

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