SVG画像のサイズをHTML,CSSで自在にコントロールしてWEBで表示する方法

SVG画像のサイズをHTML,CSSで自在にコントロールしてWEBで表示する方法
このエントリーをはてなブックマークに追加
PR

SVG画像ってご存知でしょうか?
ベクトル画と言って、線や色の情報をデータとして持っていてそれを再現して画像のように幼児するものです。なのでSVGだと画像のサイズが変わろうが画質が劣化しません、大きく表示したからといって荒く表示されることが無いのです

ただSVGは古いブラウザーでは表示できないこと。IE9から対応で 他のブラウザでは最新版で対応します。

 

実際にSVGを表示させたDEMO、日本の旗のマークはすべて同じ画像元です。

DEMO 表示

 

SVG画像ファイルをWEBサイトで表示する方法

imgで制御する

基本的には他の画像と同様に扱います imgタグを使います

<img src="japan-156278.svg" alt="" width="100">
<img src="japan-156278.svg" alt="" width="200">
<img src="japan-156278.svg" alt="" width="300">
<img src="japan-156278.svg" alt="" width="400">
<img src="japan-156278.svg" alt="" width="500">
<img src="japan-156278.svg" alt="" width="800">

通常のimgタグを同様に指定するだけです、至って簡単です。
画像のサイズはwidthで指定すれば横幅を基準にアスペクト比が保たれたまま表示されます、heightで指定をすれば高さを基準にアスペクト比が保たれたまま表示されます。

 

CSSで制御する

CSSでも制御する事が可能です

 img {
 width: 300px;
 height: 300px;
 }

CSSでもwidhtとheightで制御できます、imgとCSS両方で指定されている場合はimgのwidthとheightよりもCSSの値のほうが優先されます

 

CSSの背景として呼び出すことも可能

 body {
 background: url(inspector-160143.svg);
 background-size: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 }

背景として呼び出すことも可能です、background-sizeで画面のサイズに合わせて自動的に大きさが変わるようにも出来ます

 

大きい画像になってもファイル容量が小さいままなのもSVG画像の大きな特徴でもあります。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)