こんにちはとんかつです。

いま流行のSVGを試してみました。

1,Illustratorでパスデータのロゴをsvgで出力する。

既存のロゴデータをイラレで開き[別名で保存]>[svg]で保存します

2,テキストエディタで開きxmlデータになっているのを確認

テキストエディタで開き中身がxml形式になっているのを確認します。

3,<svg></svg>をコピペしてhtmlに貼る

上記svgファイルのsvgタグを任意のhtmlにコピペします。

4,CSSで動きつける

CSSでアニメーションをつけるとそれっぽくなります。

サンプル

 

参考サイト

SVG線画が美しいリッチアニメーションの作り方

my_wordpress_plugins_title

ワードプレスのロゴ(キャプション)