概要：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を使用してスタイルを設定する方法もありますが、どこでだれが使っているのでしょうか。
知らなすぎて説明できないです。
