目次
概要
参考：
SVG ファイル大解剖 Illustrator による作成から、Web 書き出しまで | PhotoshopVIP
SVG に関する基礎知識 | Design Report デザインレポート
Device Pixel Ratio
参考：
Retina 対応に SVG は本当に使えるのか？ | Rriver
SVG の使い方
参考：
HTML と CSS で SVG を使うためのメモ – Qiita
HTML5 での SVG ファイル操作のおさらい – Qiita
SVG 入門 | コンピュータサイエンス入門 by 新山祐介
SVG ファイルの読み込みと操作
imgタグで読み込み：CSS / JS の適用不可。❌background-imageプロパティ：CSS / JS の適用不可。❌- HTML 内にインラインで
svgタグを記述：CSS / JS の適用が可能！！⭕️ objectタグで読み込み：別ドキュメントとして扱われる。△ ( jQuery での操作時にcontentDocumentを jQuery オブジェクトに変換する必要がある。)
参考：
SVG を css / js で操作するときに知っておきたいこと – Qiita
SVG を jQuery で操作する際にハマったので、書き留めておく。| 5 LOG
外部ファイル SVG を jQuery で操作する方法 | Gimmick log
SVG を jQuery・JavaScript で操作する – Qiita
img タグで開くか object タグで開くかの違い | なおしむ論
How to use jquery in SVG (Scalable Vector Graphics)? – Stack Overflow
JavaScript accessing inner DOM of SVG – Stack Overflow
Using Javascript with SVG | Peter Collingridge
Can I use
参考：
SVG (basic support) | Can I use… Support table
Inline SVG in HTML5 | Can I use… Support tables
SVG SMIL animation | Can I use… Support tables
SVG DOM
参考：
SVG DOM 文書オブジェクトモデル | SVG 1.1 第２版 (triple-underscore.github.io)
SVG Tiny 1.2
参考：
Document Structure | SVG Tiny 1.2 (w3.org)
名前空間 (xmlns)
参考：
サイズ指定
参考：
SVG をレスポンシブに対応する | cly7796.net
SVG をインラインで使用する際の css での画像サイズ制御 | ri-que lab
レスポンシブ SVG をインラインで配置するとき、IE と android が高さを計算しないのに対応する | ウェブまなぶ
SVG 画像のサイズを HTML, CSS で自在にコントロールして WEB で表示する方法 | 9ineBB
色の変更
参考：
SVG のオブジェクトごとに CSS で色を切り替える | わすれたあかんえ
SVG アイコンの色を変更する方法 | Code School
SVG の基本的な使い方と動的に色を書き換える方法 | 株式会社クーネルワーク
SVG アイコンのカラーを CSS で変更したい！| よらノート
SVG 画像を CSS で色指定して color が効かないときの対処法 | おち研
Cascading SVG Fill Color | CSS-Tricks
SVG を背景に使う
参考：
Coloring SVGs in CSS Background Images | Noah Blon
Solved With CSS! Colorizing SVG Backgrounds | CSS-Tricks
Modify SVG fill color when being served as Background-Image – Stack Overflow
symbol
参考：
symbol タグと use タグを使って、好きなところに SVG を表示しよう！ | 株式会社 エヴォワークス EVOWORX
ID に使用できる文字
- 英数字
:_-.
参考：
Allowed Characters in id Attribute | HTML Tutorial (xahlee.info)
Name – Extensible Markup Language (XML) 1.0 Fifth Edition | W3C (w3.org)
Why does Illustrator mangle group/id names in generated SVG files? – Stack Overflow
ISO table(s) of valid characters for SVG ids – Stack Overflow
canvas に描画する
参考：
Canvas に SVG ファイルを読み込んで表示する | スターフィールド株式会社
Draw SVG in canvas – GitHub Gist
How to draw an SVG file on an HTML5 canvas | Tutorials Point
Drawing an SVG file on a HTML5 canvas – Stack Overflow
Drawing an svg containing html in a canvas with safari – Stack Overflow
Path2D API
参考：
SVG の path を canvas に描画できる Path2D API | q-Az
PNG に変換する
- ImageMagick
参考：
How to convert a SVG to a PNG with Image Magick? – Stack Overflow
ラスタライズ
参考：
How to capture HTML and SVG into an image | Toucan Toco
EPS から変換する
- オンラインコンバーター
- Inkscape
参考：
eps -> svg への変換 | オレと電波とときどきトノ
Converting from EPS to SVG format – Super User
Convert batch EPS to SVG using ImageMagick? – Graphic Design Stack Exchange
How to convert svg to eps using Imagemagick? – Stack Overflow
Need to convert SVG to eps without filter rasterisation – Stack Overflow
エディタ
参考：
ツール
参考：
SVG を使いこなすための便利ツールいろいろ | Web クリエイターボックス
Tips
参考：
SVG アイコンを実用するために知っておきたい、リンク周りの記述方法 | Web クリエイターボックス
SVG を css / js で操作するときに知っておきたいこと – Qiita
SVG を使うときに知っておくといいことをまとめました – Qiita
SVG ファイルを初めて設定する時につまずきやすいポイント！リンクの設定とカラーの変更方法 | WeberNote ウェバーノート
rasterizeHTML.js
参考：
rasterizeHTML.js (cburgmer.github.io)
cburgmer/rasterizeHTML.js: Renders HTML into the browser’s canvas – GitHub
Chrome でも DOM を Canvas にレンダリングして画像を取得するには – Qiita
saveSvgAsPng
参考：
exupero/saveSvgAsPng: Save SVGs as PNGs from the browser – GitHub
Save D3 chart as image – Stack Overflow
capture whole div with svg in javascript – Stack Overflow
DOM to Image
参考：
tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas – GitHub
librsvg
参考：