joppotjoppotコピペで絶対動く。TweetPocket概要みなさんこんにちはcandleです。今回はrailsでsvgを出力します。レスポンシブウェブデザインから始まり、最近ではwebでもsvgの使用が増えてきたような気がします。手こずらずにsvgを表示できるようになっておきましょう。LINKファイルを設置するこの画像をダウンロードするか、自前のsvgファイルを用意します。ファイルを置く場所はapp/assets/images/になります。svgファイルをimgタグで読み込むこの方法はあまりお勧めしません。本当に簡単にsvgを表示する時だけ使用してください。svgファイルはimgタグでも読み込めます。問題はsvgの特徴を生かしきれないことにあります。適当なviewに以下のように書きます。%&gt;もしも、エラーが出た場合は幾つかしたの方法を試してください。)表示結果は下のようになります。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下の内容を貼り付けます。doc.to_html.html_safeend実際に使ってみます。適当なviewに以下のように記述します。%&gt;表示させると以下のようになります。注目すべきところはDOMがsvgになっていることと、classが追加されていることです。svgにスタイルをあてるsvgにスタイルを当てる前に、svgファイルのfillとかstrokeのデフォルトの値を空にしておきます。これをやらないと、svgファイルの方のスタイルが優先されて適応されます。app/assets/images/ringsquare.svgを開いて、fillとstrokeの値を空にします。stroke=””後は下のようにcssのスタイルを作成すれば、svg独特のスタイルを適応できます。#0500FA;}表示すると以下のようになります。まとめ実はこの素晴らしいhelperは記事を書いている時に知って、試してみたらうまくいたのでまとめました。いいものがあるんですね。コメントをキャンセルメールアドレスが公開されることはありません。みなさんこんにちはcandleです。みなさんこんにちはcandleです。みなさんこんにちはcandleです。みなさんこんにちはcnadleです。みなさんこんにちはcandleです。みなさんこんにちはcandleです。みなさんこんにちはcandleです。みなさんこんにちはcandleです。みなさんこんにちはcandleです。みなさんこんにちはcandleです。プロフィールベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。railsでsvgをviewに表示するコピペで絶対動く。