SVGの文書構造 プレゼンテーション スタイルをつける

SVG Dev

概要：SVGの文書構造 プレゼンテーション スタイルをつける

いまさらのSVG。まずは便利なライブラリは使わず、できる限り生SVGで試していくつもり。スタイルの設定方法について書いた。

SVGがマイブーム？

なぜか今、SVGが自分の旬だったりしてるので備忘録？としてまとめています。

SVGのスタイル

SVGはXML言語のひとつなので、構造とプレゼンテーションは分けるのが正解。
プレゼンテーションとは視覚的な提示方法、修飾のこと。

SVGにスタイルをつける方法にはいくつかあります。

サンプル
https://codepen.io/nakamka/pen/ZEwdyLO

インラインスタイル（style属性を使用）
他の設定をすべて上書き。

内部スタイルシート（SVGの内側で<defs>を使用）
外部スタイルシートから上書きされない。

外部スタイルシート（hrefで読み込む。<head>内側で<style>要素の使用もSVGの外部という意味で同じ扱い）
HTML内で、IMG要素の代わりに使用するようなSVGファイルの使いどころを考えれば、他のスタイルといっしょに。
<head>内でlink要素のhref属性を使い読み込みます。おそらく、いちばん一般的な方法。
構造と分ける観点からもファーストチョイス。

プレゼンテーション属性
HTMLの要素としてではなく、SVGファイルが完成型のような場合、SVGを生成した後、別の場所で利用するような場合、SVG内で完結しているほうが便利。
その場合は、プレゼンテーション属性を使う。
別の場所で使用する場合はスタイルシートの設定から上書きできる。

どれを使うか

簡潔に申せば、ケースバイケースで。

その他にもXSLを使用してスタイルを設定する方法もありますが、どこでだれが使っているのでしょうか。
知らなすぎて説明できないです。