SVG画像を作ってみる

透過PNGやGIF画像をSVG画像に変換するオンラインサービスを試してみました。
ZorroSVG – Put a Mask on it

SVG画像の作成

今回は下記画像をSVG画像に変換します。

ZorroSVG – Put a Mask on itへアクセスします。
Try itから変換したいファイルをアップロードします。

下にアップロードした画像と、変換後の画像が表示されます。
今回の場合、元画像が6KBで、変換後が9KBになります。

今回は単色のシンプルな画像なのでファイルサイズが増えてしまっていますが、
もっと色数の多い画像だといい感じにファイルサイズを圧縮してくれます。

圧縮率は下のゲージで変更できます。
調整が完了したら、下のDownload converted SVG image をクリックしてダウンロードします。

SVG画像の使用

imgタグのsrcでSVGファイルを指定、非対応のブラウザに対してはonerrorで元のPNG画像を指定します。

HTML

<img src="sample.svg" onerror="this.src='sample.png'" />

作成したSVGのデモページ