Edited at

elm/svgを使ってみよう(SVGの基礎知識)

この記事では、


  • SVGの基本的な書き方

  • Elmでの記述方法

  • 利用できるパッケージ

について見ていきます。


SVGってなんだろう?

Scalable Vector Graphicsの頭文字をとって、SVGと呼ばれています。

解像度に制限されないベクター画像のためのXML文法として利用されています。


仕様について

SVGの仕様はW3Cによって開発・勧告されています。

ドキュメントが充実しているので、積極的に活用しましょう。

triple_underscoreさんによる日本語訳を参考にするのも良いと思います。


SVGで何ができるのか?

画像の形式は .jpg, .png, .gif など数多くありますが、


  • 解像度に制限されない

  • ベクターである

  • XMLで記述できる

といった他にはない特徴を持つことが、SVGの強みです。

HTML同様のスタイル指定や、アニメーションができるのも魅力ですね。

アイコンやロゴイメージへの活用はもちろん、インタラクティブなコンテンツの作成、データの可視化(ビジュアライゼーション)やジェネラティブ・アートなどがブラウザ上で簡単に実現できてしまいます。

すでに必須技術の1つと化したSVGですが、これからも新しい使い方が発見されることでしょう。


基本的な書き方

SVGを構成しているのは要素と属性です。

そのため、HTMLと同じ感覚で記述することができます。

SVGとして記述されたコードは…


SVG

<svg width="120" height="120" viewBox="0 0 120 120">

<rect x="10" y="10" width="100" height="100" rx="15" ry="15" fill="red" />
<circle cx="50" cy="50" r="50" fill="blue" />
</svg>

ブラウザによって画像としてレンダリングされます。

y軸が下向きなので少しだけ違和感があるかもしれませんが、HTMLの読み書きができればSVGも問題なく扱えるはずです。

※注意

QiitaではSVGタグの利用が制限されているため、表示できません。

同じ記事を blog.y047aka.me にアップしているので、そちらを参考にしてください。


ElmでSVGを記述しよう

同じことをElmでもやってみましょう。

Ellieに同じサンプルコードを用意しました。


Elm サンプルコード

import Svg exposing (Svg, svg, rect, circle)

import Svg.Attributes exposing (width, height, viewBox, x, y, rx, ry, cx, cy, r, fill)

main : Svg msg
main =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[ rect
[ x "10"
, y "10"
, width "100"
, height "100"
, rx "15"
, ry "15"
, fill "red"
]
[]
, circle
[ cx "50"
, cy "50"
, r "50"
, fill "blue"
]
[]
]


記法の都合でコードが縦長になりましたが、元のSVGと対応しているのがよく分かります。

もう少し丁寧に解説をしてみます。


モジュールのインポート


Elm モジュールのインポート

import Svg exposing (Svg, svg, rect, circle)

import Svg.Attributes exposing (width, height, viewBox, x, y, rx, ry, cx, cy, r, fill)

コードの先頭で、2つのモジュール Svg と Svg.Attributes をインポートしました。

これらはElmが公式に提供しているパッケージ elm/svg に含まれています。

この記事のサンプルコードは、リンク先のサンプルコードをより分かりやすくなるように書き直したものです。


main関数の初期化

Svgの関数はHtmlと同様に扱うことができます。


Elm main関数の初期化

main : Svg msg

main =
svg
[ width "120"
, height "120"
, viewBox "0 0 120 120"
]
[]

svgの第一引数には width, height, viewBox を指定しました。

属性
説明

width
画像の "幅 (px)"

height
画像の "高さ (px)"

viewBox
描画領域の "x座標 y座標 幅 高さ"

viewBox は見慣れない属性かもしれません。

この領域内に作成された図形が画面にレンダリングされます。

慣れるまでは、サンプルのように "0 0 (widthに指定した値) (heightに指定した値)" という指定が無難でしょう。

必要に応じてSVGの仕様や解説記事を検索してください。


四角形(矩形)を描く:rect

矩形は「くけい」と読みます。

これを知っていると、次は「矩計(かなばかり)図」が読めなくなります。


Elm

rect

[ x "10"
, y "10"
, width "100"
, height "100"
, rx "15"
, ry "15"
, fill "red"
]
[]

属性
説明

x
"x座標 (px)"

y
"y座標 (px)"

width
"幅 (px)"

height
"高さ (px)"

rx
"角丸のX軸半径 (px)"

ry
"角丸のy軸半径 (px)"

fill
塗りつぶし色の指定(色)


円を描く:circle


Elm

circle

[ cx "50"
, cy "50"
, r "50"
, fill "blue"
]
[]

属性
説明

cx
"中心のx座標 (px)"

cy
"中心のy座標 (px)"

r
"円の半径 (px)"

fill
塗りつぶし色の指定(色)

楕円にしたいときは ellipse を使います。


そのほかの図形

パス・基本図形・テキストなどの要素と、様々なアトリビュートを組み合わせて、表現豊かなSVGを作成することができます。


利用できるElmのパッケージ

Elm Packagesで使えそうなパッケージを探してみましょう。


SVGの基本となるパッケージ

Elmでは、SVGを扱うために2種類のパッケージが用意されています。

パッケージ
説明

elm/svg
Elm公式のSVGパッケージ

elm-community/typed-svg
属性の型情報を付加したパッケージ

どちらもSVG用の基本的なモジュールを含み、互換性のあるパッケージです。

好みに応じて使い分けると良いでしょう。

データの可視化など、より複雑なSVGを扱う際には elm-community/typed-svg の使用をお薦めします。


SVGの表現力を高めるパッケージ

より複雑なSVGを作成するためのパッケージも用意されています。

データの可視化(ビジュアライゼーション)や、ジェネラティブ・アートに挑戦してみるのも良いですね!

パッケージ
説明

gampleman/elm-visualization
D3.js に由来するデータ可視化用のライブラリ

terezka/line-charts
グラフ / チャート用のパッケージ

gicentre/elm-vega
Portを介してJavaScriptのVegaを利用するためのパッケージ

また、pathを記述するためのパッケージは複数存在するようです。

パッケージ
説明

Spaxe/svg-pathd
d属性を、M, L, Z などオリジナルのSVGと同様の記法で記述できる

folkertdev/svg-path-lowlevel
d属性を、SVGの記法よりも読みやすく宣言的に記述できる

folkertdev/one-true-path-experiment
配列からpathを生成するためのパッケージ


注意:廃止されたパッケージ

以下のパッケージは elm/svg よりも前に使用されていたもので、現在は廃止されています。

ブラウザの検索結果に出ることがあるので注意してください。

パッケージ
説明

evancz/elm-svg
廃止

elm-lang/svg
廃止


SVGは難しくない!

でしょ?