svg形式の拡大・縮小って、すごい！

SVGを試してみました

ウェブに載せる画像形式と言えば、これまでは、JPG GIF PNG でしたが、Retinaディスプレイに最適なベクター形式のSVG というものが、最近、使われるようになっているそうです。

Adobeのコンプリートプランに入り、Illustratorが使えるようになったので、試してみました。

サーバーに上げた画像は1つです。
svgではwidht属性を変えても、画像が荒れることはありません。

よく分かりませんが、なんかすごいです（笑）。

width=”100″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”100″ />

width=”200″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”200″ />

width=”300″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”300″ />

width=”400″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”400″ />

width=”500″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”500″ />

見出しのスタイルにsvgを使ってみました

見出し「Studio9 コンテスト　これまでに応募した作品」のスタイルに、上と同じsvg形式のカメラの画像を使ってみました。
http://74photo.com/studio9contest_kako/studio9contest_kako.html

h1 {background-image: url(http://74photo.com/*****/*****/a.svg);}

とても小さなカメラの画像になっていますが、サイズ変更はしていません。上に載せたsvg画像と同じものです。

Illustraor CCでは、SVGに書き出す際に「レスポンシブ」という項目にチェックを入れると、width属性とheight属性が設定されません。要素に合わせ、可変で表示されるということのようです。

そこで、今回の場合は、h1に合わせたサイズになったのでしょう♪

すごすぎます（笑）。

【参考】
Illustratorのsvgオプション

画像もお肌も、荒れにご注意。