SVG画像のサイズをHTML,CSSで自在にコントロールしてWEBで表示する方法
PR
SVG画像ってご存知でしょうか？
ベクトル画と言って、線や色の情報をデータとして持っていてそれを再現して画像のように幼児するものです。なのでSVGだと画像のサイズが変わろうが画質が劣化しません、大きく表示したからといって荒く表示されることが無いのです
ただSVGは古いブラウザーでは表示できないこと。IE9から対応で 他のブラウザでは最新版で対応します。
実際にSVGを表示させた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
短縮URL:
COMMENT