私は HTML で SVG を使用して実験していますが、これはあまりよく知りません。html にオブジェクトとして埋め込まれます。
SVG は CSS を介してスケーラブルです。ウィンドウがフル サイズの場合 (つまり、SVG が CSS によって許容される最大幅になるのに十分な大きさ)、Firefox、Chrome、および Safari では正常に表示されます。ブラウザー ウィンドウが小さい場合、実際の SVG 画像とそのコンテナーと思われるものは、Firefox と Chrome の両方で適切に縮小されます。ただし、Safari (デスクトップおよび iOS) では、SVG 画像自体は縮小されますが、その「コンテナー」は元の最大の高さのままです。つまり、Safari の狭い幅では、実際の画像の上下にスペースがありすぎます。
現在、CSS を介して幅、最大幅、および最大高さの値を割り当てています。「auto」以外の高さの値を適用すると、すべてのブラウザーで問題が発生します。ブラウザーのサイズに合わせて SVG 自体から幅と高さの値を削除しました。
Safari で Firefox や Chrome と同じ方法で SVG 画像をスケーリングする方法を知りたいです。ご意見をお寄せいただきありがとうございます。
この例をチェックしてください: http://jay-bee-why.com/demos/svg-scaling.html
そして、実際のサイトを見るには: http://twowordsfor.com ( edit: now deprecated )
SVG を HTML に埋め込む方法は次のとおりです。
<div class="container">
<object data="image.svg" type="image/svg+xml" id="logo">
<img src="image.png">
</object>
</div>
これはCSSです：
.container {width:99.8%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:30px;}
#logo {width:100%; max-width:974px; max-height:300px; display:block; margin:0px auto 0px auto;}
そして、これは SVG ファイルの先頭です。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 967 135" enable-background="new 0 0 967 135" xml:space="preserve">