Sketch - テキストをSVGでExportする
なぜSVGなのか
最近、Webページを作成するときのロゴはなるべくSVGを使用するようにしています。 たとえば、自分が所属しているチームのWebサイトを新しくする際にロゴも一緒に新調したのですが、SVGで出力したロゴを表示しています。
拡大してもきれい
SVGは、Scalable Vector Graphicsの略称であり、XML形式の２次元ベクターイメージ用の画像フォーマット記述言語です。 また、ファイルサイズが小さいのも特徴であり、画像のクオリティを維持したまま拡大や縮小に対応できます。
上記の例のように、拡大してもビットマップ形式の画像に見られるジャギー（階段状のギザギザ）が発生しません。 様々なデバイスの表示に柔軟に対応できるので、レスポンシブデザインがトレンドになり始めたころからよく使われるようになったようです。
SketchでデザインしたテキストロゴをSVGで出力する
今回は、Takizawa Hackathon - Facebookページのシンプルなテキストロゴを出力してみます。後ほど、Webサイトを作成した際にヘッダーロゴとして使用します。
「Convert to Outlines」する
このまま、テキストをSVGで出力する前に、テキストレイヤーをベクターシェイプに変換しましょう。この作業をすることで、テキストを編集することができなくなりますが、あらゆるブラウザーで同一の表示とするために変換する方が良いと思います。
方法は簡単で、上部の [Layout] メニューから [Convert to Outlines] を選択するだけです。
変換が完了すると、各文字がベクターシェイプに変換されたことが分かります。
青くなっているのがアウトラインです。
SVGで出力する
あとは、右のサイドバーの一番下のExportメニューからFormat形式をSVGに選択して、出力すれば完了です。
