【Illustrator】テキストロゴをSVG保存する方法｜SVGOMGで軽量化

Webサイトのロゴやアイコンを表示する際は、画像ではなくSVG形式を使用することで、拡大・縮小しても劣化せず、ファイルサイズも抑えられます。
特にテキストロゴはSVG化することで、高解像度ディスプレイでも鮮明に表示できるため、Web制作でよく利用されています。

この記事では、Illustratorで作成したテキストロゴをSVGとして書き出す手順と、SVGOMGを使った軽量化方法を紹介します。

テキストロゴをSVGで書き出すメリット

SVG（Scalable Vector Graphics）はベクター形式の画像ファイルです。

JPEGやPNGとは異なり、拡大・縮小しても画質が劣化しないため、ロゴやアイコンの表示に適しています。

また、シンプルなロゴやアイコンであれば、PNGよりファイルサイズを小さくできるケースも多く、Webサイトの表示速度改善にもつながります。

テキストロゴをSVG化することで、さまざまな画面サイズや高解像度ディスプレイでも鮮明に表示できます。

書き出し前の準備

文字のアウトライン化

SVGとして書き出す前に、文字をアウトライン化しておきます。
アウトライン化を行うことで、フォント情報ではなくパスデータとして保存されるため、閲覧環境に同じフォントがインストールされていなくてもデザインが崩れません。
Illustratorでテキストを選択し、「書式 ＞ アウトラインを作成」を実行します。

※アウトライン化すると文字編集はできなくなるため、編集用データは別途保存しておきましょう。

アートボードサイズの調整

SVGにはアートボードサイズがそのまま反映されます。
ロゴの周囲に余白が残っていると、Webサイトに配置した際に不要な余白が発生することがあります。
アートボードツールを使用し、ロゴのサイズに合わせてアートボードを調整しておきましょう。

SVGに書き出す

準備ができたらSVG形式で書き出します。

Illustratorのメニューから「ファイル ＞ 別名で保存」を選択し、ファイル形式で「SVG」を選択します。

その後、「別名で保存」をクリックします。

SVGオプションの設定

保存時に表示される「SVGオプション」では、以下のように設定します。

■ SVGプロファイル
SVG 1.1 を選択します。
一般的なブラウザとの互換性が高く、現在でも広く利用されています。

■ フォント
事前にアウトライン化している場合は、特別な設定は不要です。
アウトライン化していないテキストを含む場合は、「アウトラインに変換」を選択すると、閲覧環境によるフォント崩れを防げます。

■ 画像
「埋め込み」を選択します。
画像をリンク参照ではなくSVG内に含める設定です。

■ CSSプロパティ
「プレゼンテーション属性」を選択します。
style属性へまとめて出力する方法よりコードが読みやすく、Web制作でも扱いやすい設定です。

■ 小数点以下の桁数
プレビューを確認しながら1〜3程度で調整します。
数値を小さくするとファイルサイズは軽量になりますが、複雑なパスでは形状が崩れる場合があります。
ロゴ程度であれば、1〜3程度が目安です。

設定が完了したら「OK」をクリックして保存します。

SVGOMG で軽量化する

Illustratorから書き出したSVGには、編集用の情報や不要なコードが含まれている場合があります。
そのままでも利用できますが、Webサイトで使用する場合は軽量化しておくのがおすすめです。

SVGOMG はデフォルト設定のままでも十分軽量化できますが、Webサイトで利用する場合は「Remove viewBox」がOFFになっていることを確認しておくと安心です。
viewBox が削除されると、CSSで拡大・縮小した際にレイアウト崩れが発生する場合があります。

また、小数点精度を下げ過ぎるとロゴ形状が崩れることがあるため、2〜3程度を目安に調整するとよいでしょう。

SVGOMG

まとめ

Illustratorで作成したテキストロゴは、アウトライン化してSVGとして書き出すことで、拡大・縮小しても劣化しにくい状態でWebサイトに利用できます。

また、SVGOMGで不要なコードを削除することで、さらに軽量化が可能です。

ロゴやアイコンをWebサイトで使用する際は、PNGやJPEGだけでなくSVGも活用してみてください。