svgがブートストラップメディアオブジェクトで動作しないのはなぜですか？

Question

私はブートストラップメディアオブジェクトにsvgを使用しようとしていますが、幅が明示的に設定されていない場合、最小幅を取らないことがわかりました。例えば。 PNG形式の画像との単純なケースを考えてみましょう。それは64px広いイメージとして示して

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src="https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    sample text. This is some sample text. This is some sample text. This is some sample text. This is some s 
 
    </div> 
 
</div>

使用PNG画像は64pxのデフォルトの幅を持っています。今、SVGのIMGと同じ例を考えてみます。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src="http://www.iconninja.com/files/93/412/839/social-online-media-pay-paypay-pal-icon.svg" alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    The random text that shows that the text that was suypposed to be the text. 
 
    </div> 
 
</div>

我々は第二の例でSVGはそれがないPNGまたはJPGなどの最低限のデフォルトの幅です取らないことがわかります。一方、bodyタグに2つの画像タグがあり、最初の画像がpngで2番目がsvgで、両方の画像の幅が明示的に設定されていない場合、両方の画像はデフォルトの幅になります。

私の質問は、なぜブートストラップメディアオブジェクトでsvgがデフォルトの幅になるのですか？

Answer 1

イメージ（）はピクセルベースで、デフォルトではwidth/heightの値を持ちますが、SVGはベクターオブジェクトであり、width/heightはそれらを表示する人によって異なります。

例では、SVGには32 x 32のviewBox（キャンバスの表示部分を定義）があります。

あなたが参照してビューボックスの詳細を読むことができます：
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions

あなたがしたい場合はsvg内部widthとheightを定義することができます。ここでは

<svg width="64" height="64"...> ... </svg> 

は、実施例（ノートです私はここでインラインSVGを使用しました）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src='data:image/svg+xml;charset=UTF-8, 
 
<?xml version="1.0" ?><svg width="64" height="64" enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Flat_copy_7"><g><path d="M15.995,0c-8.837,0-16,7.163-16,16c0,8.836,7.163,16,16,16s16-7.164,16-16C31.995,7.163,24.831,0,15.995,0 z" fill="#E8E8E8"/></g><path d="M13.099,23.163l0.784-3.334c0,0,0.243-0.952,1.292-0.952c1.047,0,8.298,0.277,9.904-4.842 c0.589-1.871,0.997-6.31-6.324-6.31h-5.287c0,0-1.1-0.05-1.371,1.09L8.64,23.362c0,0-0.148,0.912,0.797,0.912 c0.946,0,2.36,0,2.36,0S12.886,24.333,13.099,23.163z M15.093,14.702l0.702-2.957c0,0,0.224-0.804,0.946-0.922 c0.722-0.12,1.951,0.02,2.268,0.079c2.054,0.376,1.617,2.272,1.617,2.272c-0.407,2.926-5.075,2.519-5.075,2.519 C14.818,15.435,15.093,14.702,15.093,14.702z" fill="#333333"/></g></svg>' alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    The random text that shows that the text that was suypposed to be the text. 
 
    </div> 
 
</div>

Answer 2

私は理由がブートストラップではないと考えます。この場合はhelpとなります。