最近、SVG を勉強している weep です。
SVG ってなあに？？？
「SVG とはなんぞや？」って言われたら、おいらもよくわからない。。。
脳みそがないおいらが説明するとしたら、コーディングで画像描画ができるやつです。
「SVG」はベクターに出力しますが、一昔前に、HTML5 の「canvas」ってのでラスター（PNG 画像扱いになる）に出力するのが流行で、これを「SVG」だと誤解する人も居たりしてね。それおいらやん！
おいらは両者の違いがわからない男のネスカフェゴールドブレンドでした。だばだー。
HTML5 canvas vs SVG
 |
| swf2js を使った作品「あるきスマホ！」のイメージ画像、 本編はクソゲーのため、詐欺絵でごまかした。 |
 |
| 「あるきスマホ！」本編のタイトル画像。 |
 |
| swf2js を使って公開した過去作「ジャパリクイズ」（公開停止）。 |
おいらは過去に「swf2js」をつかった Flash 作品がありまして、それは Flash を JavaScript に読み込んで 「canvas」 描画させて表示させてるやつです。
当時の「SVG」だとブラウザによって結果が違うとかの問題が「canvas」より多かった等の事情でもあったんでしょうか？ まぁ、猫も杓子も HTML5 だって言われてた時期だった影響でも大きかったのでしょうか？ おいらにはわからない。
ハーボット時計に使ってる「Google swiffy」も 確か「canvas」に描画するという「swf2js」と同じ方式ですが、これが公開停止となり幻になったために「swf2js」が持ち出された。
「Google swiffy」と「swf2js」の大きな違いは、前者はサイトに swf アップロードして HTML に Flash データを丸ごとどっさりとコンバートして格納して ランタイムとする JavaScript で制御するやつで、後者は swf を同梱して JavaScript に読み込ませて制御するという違いです。
SVG とは何かを勉強する
現在は Adobe Animate には、JavaScript と SVG で描画させる方式「Animated SVG Exporter」っていうので出力させるやり方が、王道っていうか主流っちゃ主流なんでしょうか？ 使ったことがないのでわからない。。。
そんなわけで、おいらも SVG を勉強せなって言う感じになりました。
ことの発端は、 #InstanceTicker （Mastodon に、この CSS を読み込ませると、所属サーバーが表示することができるやつ。） に 「SVG を取り入れてみては？ きれいに表示されるよ。」という提案から、使ったこともない Adobe Illustrator を使って試行錯誤しています。
課題「SVG 化してみた」
さて、SVG といえば、Wikipedia 記事にある画像はやたら SVG 化されてる風潮みたいなところがあります。特に著名人のサイン画像が SVG 化されるイメージが強いです。
おいらもそれにあやかって、ある方のサインをSVG化してみることにしました。
ここで、おいらのお宝を自慢します。
2009年に当選した「中島愛さんの直筆サイン付きメグッポイド」です。
ちょうど10年経ちましたので、自慢します。うへへ。
まめぐサイン SVG 化！！
 |
| スキャナでスキャンしてみました。 Web に公開できる程度の高画質です。 |
 |
| モノクロ化してみます。 経年劣化で薄くなったり、かすれたり。。。 |
 |
| 丁寧にかすれを直す（ほぼ手動で直した） |
おいおい、 Blogger では、SVG アップロードできねえのかよｗ
いいもん！！ Cloudinary 使うもん！！！
こうして、SVG 化がしたものが以下の通り。
まめぐのサイン、超絶かわいいデザインだなぁ。。。
キラッ☆としている。
Wikipedia に貼るのはめんどくさいので、また今度です。。。
誰か頼む（他力本願）。
0 件のコメント:
コメントを投稿