タイポグラフィとSVG

こんにちは、カチップ鈴木です。
近々、プロトタイピングツール「InVision」から新しいデザインツールがリリースされることもあり、ワクワクしながら過ごしています。

さて、2018年最初のブログテーマは前回に引き続き「タイポグラフィ」です。
前回は「Webにおけるタイポグラフィ」と広い定義でブログを書きましたが、今回は、「タイポグラフィとSVG」について、考えてみたいと思います。

とつぜんですが、皆さんは「SVG」を使ったことはありますでしょうか。
私は最近、制作で使用するアイコンはSVGを使ってデザインをしています。パスデータとして扱えるのでオリジナルのアイコンも簡単に作れます。

そもそも、SVGってどういう画像フォーマットなのでしょうか。

SVGとは・・・
Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、JPGやPNGのようなビットマップデータではくベクターデータです。
最初に開発されたのは、1998年と意外にもかなり前から存在していましたが、ブラウザーが対応されておらず、今まで使用することができませんでした。
最近では、高解像ディスプレイやマルチデバイスの対応が必要なレスポンシブデザインの普及に伴って、各ブラウザーでも対応するになりました。
実際の使用例を挙げますと、カチップのTOPページの「チームWeb改善」と「カチップロゴ」はSVGでできています。

最近では、ロゴやカスタムフォントで使用されているのを多く見るようになりました。どのデバイスでも劣化なく表示することが可能です。
また、アニメーションをつけることで動きを加えることもできます。
カスタムフォントをWebフォント化して使用することもできますが、Web上では細かい調整ができないため、SVGで制作して書き出しが行う方がいいかもしれません。
ただ、SVGはパスデータなので、複雑なものになるとパスデータが膨大になりデータが重くなってしまうので気をつけた方が良いでしょう。

このようなSVGやWebフォントをサイトデザインに使用することで、簡単にアニメーションやエフェクトを加えることができ、いろいろな表現ができると思います。
タイポグラフィのアニメーションは2018年に挑戦してみたいことの一つなので、これからデザインにSVGを使っていきたいものです。