SVG ファイル
概要
参考：
SVG ファイル大解剖 Illustrator による作成から、Web 書き出しまで | PhotoshopVIP
SVG に関する基礎知識 | Design Report デザインレポート
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
defs / use
ID は HTML 内、及び SVG 内で一意でなければならない。
参考：
A guide to SVG <use> elements | Taye Adeyemi
Styling SVG <use> Content with CSS | Codrops
SVG defs Elements | Jenkov.com
Scale inline SVG symbol referenced with <use> – Stack Overflow
symbol
参考：
symbol タグと use タグを使って、好きなところに SVG を表示しよう！ | 株式会社 エヴォワークス EVOWORX
PNG に変換する
- ImageMagick
参考：
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 ファイルを初めて設定する時につまずきやすいポイント！リンクの設定とカラーの変更方法 | WeberNote ウェバーノート