参考資料
MDNのSVG資料:
- SVG: Scalable Vector Graphics | MDN
- チュートリアル - SVG: Scalable Vector Graphics | MDN
入門記事:
- tohoho-web : SVG入門
- スタートアップ SVG:特集|gihyo.jp … 技術評論社
- ASCII.jp:HTML5で注目!インラインSVGの使い方 (1/5)|古籏一浩のJavaScriptラボ
- ASCII.jp:HTML5のInline SVGをJavaScriptで操作 (1/5)|古籏一浩のJavaScriptラボ
- JavaScriptによるSVG図形の追加サンプル
SVG viewBox属性について:
- SVGのViewBoxがよく分からないアナタとワタシへ - Qiita
- SVGのviewBoxをわかりやすく紐解く | Tech Blog | 株式会社INDETAIL - インディテール
実際に触ってみた時に遭遇したTIPS
塗りつぶしを透明なしにしたい:
<rect x="130" y="80" rx="10" ry="10" width="60" height="30" stroke="red" stroke-width="2" fill="transparent" />
塗りつぶしを半透明にしたい:
- fillは塗りつぶしたい色を指定。
- fill-opacity="0.5" など、小数点で透明度を指定。同様にstroke-opacityも設定できる。
- 参考 :
- 【SVG】SVGでfillの色を透過にする | sakura*sakura
SVG image 要素の注意点:
ブラウザ上でSVGを画像化したい:
JavaScriptライブラリ
- SVGを扱えるJavaScriptライブラリまとめ | hifive開発者ブログ
Raphaelというのが老舗で、開発者が同じで Snap.svg というのが新たに作られたみたい。
- Raphaël—JavaScript Library
- Raphael.jsを勉強したいのでいろんなサイトまとめ | バシャログ。
- 【SVG】raphael.jsを使ったらすんごい色々捗った | ユガラボ
- Snap.svg - Home
- Snap.svgの使い方まとめ
比較記事:
- 【SVG】Raphael.jsとSnap.svgの比較と実装してみた感想(サンプルコードあり) | Black Everyday Company
2019年2月現在、確かに Snap.svg のプロジェクトは活発であるとは言えない。githubのTOPページで build failing が出たままで放置 + 最後のcommitが2017年というのが若干不安。
完成しているといえば完成しているのかもしれないが・・・。
仕事ではレガシーIEはもう使っていないこともあり、raphaelを使う必要性は今のところ感じられない。今後の仕事でも、レガシーIE(IE8-9)を相手にすることは無いだろう。
他のメジャーどころとしては、D3.jsなどはグラフやデータのビジュアライズに特化してる感じ。Two.js はWebGLやCanvasにも対応したシンプルな感じ。
raphael と Snap.svg の比較に疲れたら、SVG.js のほうが良いかもしれない。
プレーンテキスト形式でダウンロード
コメント