どうも、です。
これまでブログタイトルはテキストにしていましたが、今回タイトルロゴを作成しましたので試しにSVG書き出しで表示してみました。
SVGは、ベクター画像をそのままHTMLで表示できるものだと思っていただければ良いかと思います。
SVGで表示したデータは、後々のコード上でのサイズ変更やスマホの拡大縮小で荒くなりません。
タイトルロゴをSVG形式で書き出し
イラストレーターで作成したロゴデータをSVG形式で書き出して表示させます。
1.イラストラーターでロゴデータ作成
まず、イラストレーターでロゴデータを作成します。
（※IllustratorCCで作業しています）
こんな感じ。
怪獣的なアイコンとOKIRAKUの文字をシンプルに配置しました。
テキストを使用してロゴを作成している場合は「アウトライン」を必ず行ってください。
「アウトラインを作成」は、書式タブの中にあります。一括でアウトラインをかけると安全でしょう。
アートボードとロゴデータの余白を無くします。
「オブジェクト」タブから「オブジェクト全体に合わせる」でキュッとなります。
ここまで来るとデータの準備は完了です。
2.SVG形式で書き出し
次は、SVG形式で書き出しを行います。
ファイルから「別名で保存」を行います。
ファイル形式を「SVG（svg）」にします。
保存を押すと、「SVGオプション」が出てきます。
「Illustratorの編集を保持」にチェックが入っていたら、チェックを外しましょう。
チェックが入っているとデータを重たくなってしまいます。
また、注意点としてIllustratorでの編集ができなくなりますので、aiデータはアウトラインをかける前の物を別で保存をしましょう。
以上、確認が終了したら、SVGデータをパソコン内部に保存しましょう。
3.SVGデータをアップロード
作成した「SVGデータ（○○.svg）」をアップロードします。
SVGデータは、アップロードするだけで構いません。
4.掲載したいところにSVGデータを貼り付ける
準備は整いました。あとは表示したいところにデータをいつもの画像の要領で貼り付けるだけです。
ワードプレスなら、「メディアを追加」やカスタマイズの「タイトルロゴ設定」項目があると思いますのでそちらでアップしたデータをお選びください。
サイズや位置がズレる可能性がありますが、個別に対応してください。大きさは、コードにwidth、heightを追加で設定できます。
見本で以下に掲載しますね。
PNGで書き出したロゴデータ
二つで見比べてどうですか？SVGは拡大しても荒くなりませんよね。
まとめ
pngデータをSVG形式で書き出して表示してみました。思っていたより簡単でした。
