サイトに適用しているWebフォントを画像編集ソフトGIMPでSVG化する

サイトのロゴやサイドバーのタイトルなどに、Google FontsでWebフォントを読み込み文字を装飾することがあるかと思います。

しかし、そのフォントを一箇所でしか使わないという場合は、SVG画像として表示するとページサイズの削減に繋がります。

今回は、無料で使える高機能な画像編集ソフト「GIMP」を使って、フォントが適用された文字をSVG画像に変換する方法をまとめておきます。

フォントを準備する

まずSVG化したいフォントを準備します。

Google Fontsはローカルにフォントをダウンロードして使うことが出来ます。もし使いたいフォントがある場合は、フォントを選択した画面から「Download Family」を選び、ttfファイルをダウンロードします。

ttfファイルをダウンロードできたら、ファイルを右クリックして「インストール」を選び、フォントをインストールしておきます。(これでGIMPでフォントが扱えるようになります)

フォントを使用する際には各フォントのライセンスに従うようにしてください。

GIMPでの作業

GIMPを起動し、ファイル → 新しい画像 から適当な大きさの画像を作成し、文字入力ツールから文字を入力します。文字の大きさはタグやCSSから調整できるので適当でOKです。

文字が入力できたら、レイヤー一覧からテキストを右クリックし、「テキストをパスに(P)」を選びます。

次に右上のパス一覧から、作成されたパスを右クリックし「パスのエクスポート(X)」を選びます。

パスは任意の名前の後に拡張子.svgを追加し、SVG形式で保存してください。

SVGOMGで圧縮

SVG画像はそのままでも使えますが、文字数節約にもなるのでツールで圧縮をかけておくのがおすすめです。

まず「SVGOMG」へアクセスし、左上の「Open SVG」からGIMPで作成したSVGファイルをアップロードします。

文字は白抜きで表示されますが、ここでは気にする必要はありません。圧縮されているのが確認できたら、「MARKUP」タブからタグをコピーします。

タグの編集

画像の大きさはsvgタグの属性widthheightで調整できます。ベクター画像なので拡大縮小しても劣化することはありません。

初期状態では、pathタグの属性fillnoneになっているため、文字は白抜きで表示されます。

<path fill="none" stroke="#000" d="(長い文字列)">

縁の中も塗り潰す場合は、fillに任意のカラーコードを指定しておきましょう。

<path fill="#000" stroke="#000" d="(長い文字列)">