SVG画像の挿入（メディアの登録から）
つぎが、メディアからSVG画像を挿入したマークアップです。
<figure class=”wp-block-image size-full”><img src=”https://hustlemouse.com/wp160211/wp-content/uploads/2016/04/chara_pink.svg” alt=”” class=”wp-image-315″/><figcaption>ピンクキャラ</figcaption></figure>
SVG画像の挿入（CSS記述による）
CSSで背景として表示しているのでこのように書き込んだ文字が上書きされて表示します。
つぎが、CSS記述にてSVG画像を挿入したマークアップです。
<p id=”svg141008″> <span>CSSで背景として表示しているのでこのように書き込んだ文字が上書きされて表示します。</span> </p> <style> #svg141008 { width:100%; height:184px; background-image:url(https://hustlemouse.com/wp160211/wp-content/uploads/2016/04/chara_pink.svg); background-repeat:no-repeat; background-position:center; background-color:rgba(246,213,221,0.90); } #svg141008 p { padding:10px; color:blue; font-size:12px; } </style>
Adobe Illustratorで作成したベクター画像データをSVGフォーマットで書き出して利用してます。大きくしても精細な画像を結ぶことができるので、将来的にはビットマップ画像データより利用が広がるものと思われます。