LoginSignup
4
3

More than 5 years have passed since last update.

Elm用にSVGを変換する

Posted at

できたもの

ブラウザ http://giisyu.github.io/svgToElm/
ソース https://github.com/giisyu/svgToElm

この記事、書いてから忘れてて半年立ってから思い出したので投稿しておきます。
リンク先のコード古いので書きなおすかも。

elm-svgとParser

ElmではSVGもelm-svg というライブラリで扱えます。
Elmのロゴを表示したもの
https://github.com/evancz/elm-svg/blob/master/examples/Logo.elm

SVGは、なめらかなアニメーション、パス画像が有効なロゴなどで利用されているようです。参考(http://d.hatena.ne.jp/rikuo/20150524)

例えばイラレとかでsvgデータを作った場合、elm-svg調に書き直さなければなりません。今だと良いツールがあるかもしれません。

ちょうどその時パーサーコンビネータの記事を見まして、探してみるとElmにもシンプルなパーサーコンビネータライブラリparserというのがあります。
勉強がてらElmで変換するものを書いてみました。

参考

Elm Parserライブラリ
http://package.elm-lang.org/packages/Dandandan/parser/6.0.1

パーサーコンビネーターの記事
http://gihyo.jp/dev/feature/01/functional-prog/0005

JavaScriptでパーサコンビネータのコンセプトを理解する
http://blog.anatoo.jp/entry/2015/04/26/220026

haskellによるxmlパーサー
http://charlieharvey.org.uk/page/naive_xml_parser_with_haskell_parsec_and_perl_regexen_part_one_haskell

作った感想

エラーはどうすればいいのか、出力をフォーマットするにはどうすればいいのか、とかまだわからないこと多いですね。。。でもとりあえず作れたし入門できたのでうれしいです。パーサー出来ると夢広がります。

あとElmは勉強したこと作ったものをブラウザで公開できるので勉強言語にいいなぁ、とやはり思うわけです。

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3