SVG ファイルの使い方 [HTML/CSS]

使い方

参考：

HTML と CSS で SVG を使うためのメモ – Qiita

SVG と svg 要素 | プログラミング入門レシピ

HTML5 での SVG ファイル操作のおさらい – Qiita

svg 要素と SVG 文書 | defghi1977

SVG 入門 | コンピュータサイエンス入門 (新山祐介)

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? – Stack Overflow

JavaScript accessing inner DOM of SVG – Stack Overflow

Using Javascript with SVG | Peter Collingridge

サイズ指定

参考：

SVG のサイズを変更する方法 | Code School

SVG をレスポンシブに対応する | cly7796.net

SVG の画像サイズ指定でわかったこと – Qiita

SVG をインラインで使用する際の css での画像サイズ制御 | ri-que lab

レスポンシブ SVG をインラインで配置するとき、IE と Android が高さを計算しないのに対応する | ウェブまなぶ

SVG 画像のサイズを HTML, CSS で自在にコントロールして WEB で表示する方法 | 9ineBB

色の変更

参考：

SVG のオブジェクトごとに CSS で色を切り替える | わすれたあかんえ

SVG アイコンの色を変更する方法 | Code School

SVG の基本的な使い方と動的に色を書き換える方法 | 株式会社クーネルワーク

SVG アイコンのカラーを CSS で変更したい！ | よらノート

SVG 画像を CSS で色指定して color が効かないときの対処法 | おち研

fill | CSS-Tricks

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

canvas に描画する

参考：

SVG を canvas で使う – Qiita

SVG を Cavnas で利用する方法 | nmi.jp

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

Path2D() | MDN

データ URL に変換して使う

参考：

SVG を Base64 で CSS に埋め込み | エーオーシステム

CSS 用になるべくサイズを小さくした SVG を Base64 化するツールを作ってみた | とっちらか～る

SVG データを CSS の background-image 向けの Base64 コードにかんたん変換ツール | 大石制作ブログ

データ URL | MDN

url() | MDN

ツール：

Base64 エンコーダ／デコーダ／SVG 埋め込みタグ変換ツール | WEBツール

SVG を Base64 エンコードに変換 | Aspose

SVG to Base64 | Base64.Guru

互換性

参考：

SVG Basic Support | Can I Use Support Table

Inline SVG in HTML5 | Can I Use Support Table

SVG SMIL animation | Can I Use Support Table

Tips

参考：

SVG アイコンを実用するために知っておきたい、リンク周りの記述方法 | Web クリエイターボックス

SVG を CSS / JS で操作するときに知っておきたいこと – Qiita

SVG を使うときに知っておくといいことをまとめました – Qiita

SVG ファイルを初めて設定する時につまずきやすいポイント！リンクの設定とカラーの変更方法 | WeberNote