概要
みなさんこんにちは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" %>
もしも、エラーが出た場合は幾つかしたの方法を試してください。
<%= image_tag "/assets/ringsquare.svg", :width => “150”, :height => “150” %>
config/initializers/assets.rbに以下を加える
Rails.application.config.assets.precompile += %w( *.svg )
表示結果は下のようになります。
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は記事を書いている時に知って、試してみたらうまくいたのでまとめました。いいものがあるんですね。