SVG

SVGとCSSで文字を書くような動きを作る

最近流行ってきたSVGで文字を書いてみました。
そんな難しくないので、ちょっとしたポイントにオシャレに使ってみてはいかがでしょうか
ちなみにこのサイトの上部にあるディレクター.com のロゴもSVGで作成されてます。

そもそもSVGとは

作った画像をソース(HTML)にして表示する技術です。
「スケーラブル・ベクター・グラフィックス」の頭文字を取って「SVG」と呼びます。ソースにすることで色も付けられるし大きさも指定できます。このようにCSSが効かせる状態になるので、汎用的に使うことができます。ただし、拘りすぎると一定の習得コスト(時間)がかかるので、細かい動作に関しては後日別途更新します。

ベクターデータであることから、高解像度でも利用することができます。分かりやすくいうと、大きくしても荒れにくいってことです。

デメリットとしては・・ブラウザの対応制限があることくらいです。
IEに関しては未対応…。我が道を行ってますね!

基本的に chrome や firefox 古くないスマホブラウザでは問題なく動いてます。
未対応のブラウザに関しては宿題ということで実装方法に進みます。

イラレからSVGを作る

イラストレーターを開き、SVGと書いたらアウトライン化をしてください。
メニュー 選択(S) > 全てを選択(A)
選択した状態で
メニュー 書式(T) > アウトラインを作成(O) が以下の図です。

アウトライン化された状態

それでは保存をしてみましょう

保存したSVGのファイルをブラウザで開いてソースを見てみる

このように画像ファイルではなくソースでできていることがわかります。

それでは冒頭にある動きのあるSVGのソースを公開

以下をコピーしてHTMLファイルに書きましょう

上記pathのclassに指定したanimesvgに動きをつけましょう。上記ファイルに以下CSSを適用させてください。