Pourquoi les svg ne fonctionnent-ils pas dans l'objet média de bootstrap ?

Question

J'ai essayé d'utiliser le svg dans l'objet média de bootstrap et j'ai constaté qu'il ne prend pas sa largeur minimale si la largeur n'est pas définie explicitement. Par exemple, considérons le cas simple d'une image png :

<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>

L'image png utilisée a une largeur par défaut de 64px et s'affiche donc comme une image de 64px de large. Prenons maintenant le même exemple avec une image 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="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>

Nous pouvons voir que dans le deuxième exemple, le svg ne prend pas sa largeur minimale par défaut comme le font les png ou les jpg. D'un autre côté, si j'ai simplement deux balises d'image dans la balise body et que la première image est un png et la seconde un svg et que les deux images n'ont pas de largeur définie explicitement, alors les deux images prennent leur largeur par défaut.

Ma question est la suivante : pourquoi, dans l'objet média de bootstrap, le svg prend-il sa largeur par défaut ?

Answer 1

Images ( gif/jpg/png ) sont basés sur des pixels et par défaut, ils ont width/height tandis que les SVG sont des objets vectoriels, et les width/height dépend de qui/qui les affiche.

Dans votre exemple - le SVG a une viewBox de 32 x 32 (qui définit la partie du canevas à afficher).

Vous pouvez en savoir plus sur viewBox dans la référence :
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions

Si vous voulez, vous pouvez définir le width y height à l'intérieur de la svg :

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

Voici un exemple fonctionnel (notez que j'ai utilisé un svg en ligne ici) :

<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>