技術/HTML/SVG参考メモ

• [ Prev ]
• [ Next ]
• [ 技術 ]

参考資料

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"

<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

• [ Prev ]
• [ Next ]
• [ 技術 ]