SVG Tips vol.1 – IllustratorからSVGを書き出す方法
https://note.com/matsu_eri/n/nb56c1014219e
おそらくロゴとか文字データだと思うのでほとんど心配ないと思いますが、
「書き出す前の準備と注意点」のところを読んで、アウトライン化してあるか・複雑なパスになってないか・レイヤー名は英語になってるかなどを確認してから書き出しへ進んでください。
illustratorでの書き出し方法：
[ファイル]→[別名で保存]→ファイル形式を「SVG（svg）」にして保存
保存を押すとSVGオプションダイアログが出るので、
・[SVGコード…]をクリックするとテキストエディタが開きコードが生成され、htmlのタグとしてそのまま実装可能です。
・[OK]を押すとsvg形式で保存されます。
保存したsvgファイルはダブルクリックで開くとブラウザで画像を確認できます。
（学校のPCがデフォルトで何でひらく設定になってるかはわからないですが、たぶんクロムかエッジのどちらかがひらくはずです。）
右クリックでプログラムから開く→サクラエディタやVSコードで開くと画像ではなくコードが表示されます。
ひいらぎ不動産のように直でHTMLを書く場合はそのままhtml内の任意の場所にコードを張り付けるだけなのですが、（←ちょっと感動するので、これもぜひ試してみてください！）
wpで実装する場合は2種類やり方があります。
・1つは、↑のひいらぎ不動産と同じように直接コードを張り付ける方法
最も簡単で、プラグインが不要な方法です。
1.投稿/固定ページ編集画面で、ブロック追加ボタン（+）をクリック。
2.「カスタムHTML」ブロックを選択。
3.↑で生成したSVGコードを貼り付け。
↓これは実際にカスタムHTMLブロックにコードを張り付けて実装しています
もしくは、
・ほかの画像ファイルと同じようにメディアライブラリにSVGをアップロードして使う方法
SafeSVGもしくはSVGsupportというプラグインを入れる必要があります。
wpがデフォルトでsvgのファイル形式をサポートしておらず、危険なファイルとして認識されてしまうためです。
WordPressにSVG画像をアップロード可能にするプラグイン「SVG Support」
https://tcd-theme.com/2024/01/svg-support.html
Safe SVGで簡単にSVGファイルをメディアにアップロードして使う
https://wordpress-note.com/svg%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%83%A1%E3%83%87%E3%82%A3%E3%82%A2%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89/
どちらのプラグインも入れて有効化するだけでOKで、プラグイン上で何か設定をする必要はありません。
本当にどっちでもいいんですが、今見たらSafeSVGは最終更新1週間前でSVGsupportは最終更新1年前だから、SafeSVGのほうがセキュリティ的には安全かも？
↓これはメディアライブラリから持ってきたsvgファイルを張っています。
いずれも検証ツールを開いてどんなコードになっているか見てみてください。
（レイヤー名もファイル名も適当なのがバレバレですみません 画像下にめっちゃデカい空白があるのも、書き出しが適当すぎたせいです・・ご容赦・・・）
わたしは最初のコードを直接書くほうをおすすめします。SVGのメリットを生かそうと思ったとき、わかりやすいのは圧倒的にコードの直接編集だと思うからです。
実際に、直接コードを書いているほうは「の」の部分にリンクを張ってみました。
「の」のhtmlタグの部分にaタグをつけただけなのでとっても簡単でした。
メディアライブラリで画像貼ったものだと、結局普通に画像として認識されているので、wpだと画像のhtmlを直接いじれないので・・・CSSで色を変えたりとかはいいのかもですが、リンク張ったり細かい挙動には向いてないんじゃないのかなあと思います。
（やり方はあると思うのですが、たぶん）
コードのほうは単純にリンク張るだけなら深く考えず、対象の箇所にaタグつけるだけでリンクは貼れます。
リンク貼り方tipsはこの辺ですかね・・
自由自在！画像（SVG）にリンクをつける方法
https://planning-a.jp/column/12861/#%E3%83%AA%E3%83%B3%E3%82%AF03
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
https://www.webcreatorbox.com/blog/svg-icon-link
ちなみに・・・・さらに複雑にした似たようなものでは、よく見るこういう地図リンクもSVG＋jsで実装できます！
https://xtra-blog.net/svg-clickable-map/
ここからさらにアニメーションつけたり、とかはまたさらにtips探してもらって・・にはなってしまいますが・・・
https://ics.media/entry/15970/
https://coosy.co.jp/blog/svg-animation-smil/
わかりやすいけどムズいです！！！わたしも正直あまり自信がなく・・