RailsとHamlでSVG - エンジニアのソフトウェア的愛情

ふつうに

ブラウザがインラインのSVG表示に対応していれば、HamlでSVGを書くとそのまま表示してくれます。

app/controllers/circles_controller.rb

class CirclesController < ApplicationController
  def index
    @circles = 30.times.map { {x: rand(500), y: rand(500), r: rand(100)} }
  end
end

app/views/circles/index.html.haml

%svg{'xmlns' => 'http://www.w3.org/2000/svg', 'xmlns:xlink' => 'http://www.w3.org/1999/xlink', 'viewBox' => '0 0 500 500', 'width' => '100%', 'height' => '100%'}
  - @circles.each do |circle|
    %circle{cx: circle[:x], cy: circle[:y], r: circle[:r], stroke: 'red', fill: 'none'}

Rails を起動して http://localhost:3000/circles を開くとこんな感じ。

フォーマットにSVGを指定して

フォーマットを指定して、http://localhost:3000/circles.svg とアクセスしたい場合には、いくつか設定が必要になります。

MIME タイプを設定する

config/initializers/mime_types.rb に SVG を設定します。
次の1行を追加します。

Mime::Type.register 'image/svg+xml', :svg

Haml のフォーマットを設定する

Haml のフォーマットを XHTML にします。これをしておかないとXMLのDOCTYPE宣言が出力されません。
具体的には config/initializers/haml.rb を作成して次の内容を記述します。

Haml::Template.options[:format] = :xhtml

ビューを書く

拡張子をSVGにしたHamlを書きます。
内容はインラインで書いたものにDOCTYPE宣言を追加したものになります。

app/views/circles/index.svg.haml

!!! XML
%svg{'xmlns' => 'http://www.w3.org/2000/svg', 'xmlns:xlink' => 'http://www.w3.org/1999/xlink', 'viewBox' => '0 0 500 500', 'width' => '100%', 'height' => '100%'}
  - @circles.each do |circle|
    %circle{cx: circle[:x], cy: circle[:y], r: circle[:r], stroke: 'red', fill: 'none'}