2019/12/01

SVG ってなあに?


最近、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化してみることにしました。
ここで、おいらのお宝を自慢します。






weepjp(@weepjp)がシェアした投稿 -

2009年に当選した「中島愛さんの直筆サイン付きメグッポイド」です。
ちょうど10年経ちましたので、自慢します。うへへ。

まめぐサイン SVG 化!!

スキャナでスキャンしてみました。
Web に公開できる程度の高画質です。

モノクロ化してみます。
経年劣化で薄くなったり、かすれたり。。。

丁寧にかすれを直す(ほぼ手動で直した)
おいおい、 Blogger では、SVG アップロードできねえのかよw
いいもん!! Cloudinary 使うもん!!!
こうして、SVG 化がしたものが以下の通り。
まめぐのサイン、超絶かわいいデザインだなぁ。。。
キラッ☆としている。
Wikipedia に貼るのはめんどくさいので、また今度です。。。
誰か頼む(他力本願)。