#navi_header|技術|

** 参考資料

MDNのSVG資料:
- SVG: Scalable Vector Graphics | MDN
-- https://developer.mozilla.org/ja/docs/Web/SVG
- チュートリアル - SVG: Scalable Vector Graphics | MDN
-- https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial

入門記事:
- tohoho-web : SVG入門
-- http://www.tohoho-web.com/ex/svg.html
- スタートアップ SVG：特集｜gihyo.jp … 技術評論社
-- http://gihyo.jp/dev/feature/01/svg
- ASCII.jp：HTML5で注目！インラインSVGの使い方 (1/5)｜古籏一浩のJavaScriptラボ
-- http://ascii.jp/elem/000/000/585/585608/
- ASCII.jp：HTML5のInline SVGをJavaScriptで操作 (1/5)｜古籏一浩のJavaScriptラボ
-- http://ascii.jp/elem/000/000/588/588081/
- JavaScriptによるSVG図形の追加サンプル
-- http://yamatyuu.net/computer/html/svg/add.html

SVG viewBox属性について：
- SVGのViewBoxがよく分からないアナタとワタシへ - Qiita
-- https://qiita.com/nekoneko-wanwan/items/75e13cd02caeb3dc9ad6
- SVGのviewBoxをわかりやすく紐解く | Tech Blog | 株式会社INDETAIL - インディテール
-- https://www.indetail.co.jp/blog/13002/

** 実際に触ってみた時に遭遇したTIPS

塗りつぶしを透明なしにしたい:
- fill="transparent"
#pre||>
<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
--- https://sakura.monte-verita.biz/3311

SVG image 要素の注意点:
- https://developer.mozilla.org/ja/docs/Web/SVG/Element/image
-- → x, y, width, height 全て必要。Chromeではwidth/heightが無くても表示されたが、Firefox/Edgeだと表示されなかった。
- <image>を埋め込んだsvgファイルをHTMLから <img>タグのsrc属性で読み込んでみたが、<image>だけ表示されなかった。
-- → <img>タグではなく <embed> タグのsrc属性で読み込むと表示された。
-- 参考 : https://stackoverflow.com/questions/41195669/images-in-svg-image-tags-not-showing-up-in-chrome-but-displays-locally

ブラウザ上でSVGを画像化したい:
- SVGを画像化する - アシアルブログ
-- https://blog.asial.co.jp/2018/09/14/SVG%E3%82%92%E7%94%BB%E5%83%8F%E5%8C%96%E3%81%99%E3%82%8B

** JavaScriptライブラリ

- SVGを扱えるJavaScriptライブラリまとめ | hifive開発者ブログ
-- https://blog.htmlhifive.com/2017/07/03/svg-library-matome/

Raphaelというのが老舗で、開発者が同じで Snap.svg というのが新たに作られたみたい。

- Raphaël—JavaScript Library
-- http://dmitrybaranovskiy.github.io/raphael/
-- https://github.com/DmitryBaranovskiy/raphael
- Raphael.jsを勉強したいのでいろんなサイトまとめ | バシャログ。
-- http://bashalog.c-brains.jp/12/05/21-205200.php
- 【SVG】raphael.jsを使ったらすんごい色々捗った | ユガラボ
-- https://yugalab.net/archives/1374

- Snap.svg - Home
-- http://snapsvg.io/
-- https://github.com/adobe-webplatform/Snap.svg
- Snap.svgの使い方まとめ
-- http://defghi1977.html.xdomain.jp/tech/snapsvg/snapsvg.xhtml

比較記事:
- 【SVG】Raphael.jsとSnap.svgの比較と実装してみた感想（サンプルコードあり） | Black Everyday Company
-- https://kuroeveryday.blogspot.com/2016/12/raphaeljs-vs-snapsvg.html

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 のほうが良いかもしれない。
- https://svgjs.com/
- https://github.com/svgdotjs/svg.js
- シンプルだが、プラグイン形式で面白そうな機能提供してる。
-- https://github.com/svgdotjs

#navi_footer|技術|