サイト制作に関するメモ書き

HOME > HTML・CSS > SVG画像を作ってみる

SVG画像を作ってみる

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

SVG画像の作成

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

convert-to-svg01

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

convert-to-svg02

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

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

convert-to-svg03

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

convert-to-svg04

 

SVG画像の使用

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

HTML

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

作成したSVGのデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP