私としてはSVGファイルはベクター構造で、引き伸ばしてもJPEGやPNGと異なって、いくら引き伸ばしても、画像が劣化しないと認識していました。 しかしいざ フリーのアイコンを探してきて、ワードプレスに登録しようとしても、コードをここに入れろと書いてあるが、手元にあるのはSVGファイルのみ、いったいなにもどうすればアイコンとうろくできるのか？？ ちょっとだけ悪戦苦闘したので、備忘録的にまとめてみました。
SVGて何？ そもそもがわかってなかった
ふつうの画像（JPEG / PNG）は「ドットの集まり」でできていますが、
SVGは “画像をコードで描いているファイル” です。
つまり
📷 PNG → 絵そのもの
🧠 SVG → 「こうやって絵を描いてね」という設計図（コード）
という違いがあります。
✅ イメージ図
| 種類 | 中身 | 例 |
|---|---|---|
| PNG / JPG | ドット（画像そのもの） | 写真・スクショ |
| SVG | 図形を描くためのコード | <svg>...</svg> |
✅ だから “SVGファイルの中身”＝コード
SVGファイルを右クリック → 「メモ帳で開く」 としてみてください。
たとえば下のような英数字のコードが書かれているはずです：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M2 16 L16 2 L30 16 L16 30 Z"/>
</svg>
これが「SVGに書かれている内容（＝コード）」です。
見た目はちょっとややこしいですが、これは “この形を描いてください” という指定をしているだけです。
さてSVGの説明はここまで、実際にアイコンをワードプレスに登録してみましょうか。
アイコンをワードプレスに登録する手順
✅ SVGアイコンの登録表示方法（SWELL）
- 記事を作成してテキスト等を入れ込み、アイコンをそこに外部から入れたい
- テキストクリックすると、メニュが出てくるので顔のマーク（SWELLのアイコン！）をクリック
アイコン一覧が出ますが、最後のフォームのところに、SVGファイルを右クリックして中身のXMLを
メモ帳等に掃き出し、それをコピーしておく。
- 「SVGコードを直接貼り付け」 のフォームに、
<svg>〜</svg>タグを丸ごと貼り付けて保存 - これにて必要な個所に外部のアイコンを登録できるようになります。
※ファイルとしてアップロードするのではなく、コードそのものを貼り付ける方式です。
✅ ベースサイズ（最適なSVGサイズ）
SWELL公式の推奨値は 32 × 32 px です。
SVG自体はベクターなので拡大しても劣化しませんが、
基準として viewBox="0 0 32 32" で作っておけば、他のSWELL標準アイコンと並べたときにサイズ感が合います。
コメント