SVGの知識はWEBでも大型アップデートとゆうかかなり大規模に要素が追加されています。複雑なSVGを作るには、0からテキストベースよりもIllustratorを利用しパスを作成した方がわかりやすですが、簡単なものや数値によってデザインの変わるグラフなどであればSVGを理解したほうが早いと思います。
現実的な使い方を考えてます。

【目次】

  1. まとめて設定したSVGオブジェクトを任意の場所に呼び出し

  2. WPでSVGファイルを呼び出す時

  3. SVGコードサンプル

  4. 参考

まとめて設定したSVGオブジェクトを任意の場所に呼び出し

効率的にSVGを管理するには、defタグを利用します。
defタグは実際に描画は無く図形の定義をまとめておくためのタグです。
def内で利用する複数のSVGをまとめて定義し、表示箇所にはUSEを利用してクローンコピーで呼び出すのがい良いと思います。
JSを後読みするように、defも/body付近に追加することでSEO対策になります。

RAW HTML
CODELEN

svg要素でuseでxlinkの内部リンクで、defsで定義したsvg[id=circle]を呼び出します。このとき後方のSVGはwidth,heightは0にします。

<svg class="icon" width="40" height="40"><use xlink:href="#circle"></use></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<circle id="circle" cx="20" cy="20" r="20"/>
</defs>
</svg>
ソースコード装飾ならGoogle code prettify

WPでSVGファイルを呼び出す時

複雑なSVGはコード量が多く、直接ソースに記載するとヒューマンエラーの元です。そこでaiなどで書き出した.svgファイルを外部参照でｈｔｍｌに記載したいと思います。
phpだとfile_get_contentsやcurlでファイルを展開することができますが、wpならば専用関数が用意されています。
wp_remote_getとwp_remote_retrieve_bodyを利用して、SVGをHTMLに展開してみます。

$svg = wp_remote_retrieve_body(wp_remote_get('/path/sample.svg'));
ソースコード装飾ならGoogle code prettify

これでSVGを外部ファイル化してソースを簡素に保てます。

SVGコードサンプル

コピペし易いようにまとめて見ました。タレコミ募集！掲載したいコードがあったらコメントください。

[HTMLコピペOK]SVGサンプルライブラリー - WP飽きるまで。 ピュアHTMLのSVGのVectorサンプルをコピペ用に用意しました。【コードを展開】をおしてコピペしてください。 参考 「10分でわかるSVG 応用編」サンプル http://sample.atmarkit.jp/fu … http://wp.akirumade.com/demos/svg-sample/
OGPを取得してブログカードを自力で表示する

参考

「10分でわかるSVG 応用編」サンプル
http://sample.atmarkit.jp/fux/1207/02/sample.xhtml

SVGで図形やアニメを描画してみよう
http://www.atmarkit.co.jp/ait/articles/1207/02/news142_2.html