ブログタイトルをSVG形式で書き出してみました。

これまでブログタイトルはテキストにしていましたが、今回タイトルロゴを作成しましたので試しにSVG書き出しで表示してみました。

下記の記事を参考にさせていただきました!ありがとうございました!

参考にさせて頂いた記事SVGの書き出しおよび表示方法

この記事には、「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を追加で設定できます。

見本で以下に掲載しますね。

SVGで書き出したロゴデータ

PNGで書き出したロゴデータ

二つで見比べてどうですか?SVGは拡大しても荒くなりませんよね。

まとめ

pngデータをSVG形式で書き出して表示してみました。思っていたより簡単でした。

下記記事を参考にさせていただきました。ありがとうございました!

もっと詳しく掲載されています。SVGの書き出し方法は他にもあるようです。

参考にさせて頂いた記事SVGの書き出しおよび表示方法

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする