< < Articles

SVG : Comprendre le système de coordonnées

-/-/-

Selon le site [can I use][1], SVG est maintenant reconnu par plus de 97,25% des navigateurs présents sur le marché. Il n'y a donc plus de raison de ne pas adopter ce format. Si par malheur vous travaillez sur un projet qui ne prendrait pas en compte cette statistique, et êtes forcé de supporter IE8 pour ne pas le citer, un fallback en png peut facilement être mis en place.

Cela étant dit, cet article va se concentrer sur le système de coordonnées et les paramètres permettant de le modifier.

Plus précisément, on va s'intéresser au "S" de SVG, pour scalable, soit adaptable en français.

Introduction

La balise svg crée une zone de dessin aux dimensions illimitées, c'est ce que l'on appelle le canvas, dont l'utilisateur ne verra qu'une partie, un rectangle délimité par les attributs width et height de la balise. C'est ce rectangle que l'on appelle le viewport.
Il faut voir ça comme un écran de télévision, celui-ci délimitant une zone d'affichage convenue, alors qu'un plateau de télévision est bien sur plus vaste.
Sans plus d'informations fournies par divers attributs, un système de coordonnées est mis en place, avec pour origine le coin supérieur gauche du viewport.

Maintenant, on va voir comment jouer avec ces coordonnées.

L'attribut viewbox en SVG

Pas de teasing, tout va se faire grâce à l'attribut viewbox. Si aucune valeur n'est précisée, le viewport ne sera pas modifié, et donc le système de coordonnées ne changera pas. Viewbox prend en valeur 4 paramètres :


viewBox = " <min-x> <min-y> <width> <height> "

Ces 4 paramètres n'ont pas d'unités et vont permettre de définir un rectangle qui va redéfinir le système de coordonnées du viewport. Et c'est là que les choses deviennent intéressantes. L'échelle (scale) pourra être modifiée et être supérieure ou inférieure à la valeur de base 1:1, mais toujours de façon à faire rentrer, ou plutôt à contraindre, le viewbox dans le viewport.

Petit aparté visuel sur les bordures des exemples qui vont suivre, pour mieux comprendre mes propos :

  • Le cadre gris foncé représente les limites du svg.
  • Le cadre jaune représente lui le viewbox, c'est le contour d'un rectangle qui fait toujours les dimensions du viewbox. Son contour est de 6px, 3 à l'extérieur, et 3 à l'intérieur de l'élément rect.
  • Par ailleurs, un lien vers codepen est présent sur chacune des images pour permettre de vraiment visualiser le résultat en svg.

Modification de l'échelle de façon homothétique



<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/WpQMEd">![svg1](//images.ctfassets.net/95wnqgvmhlea/40fAlGv1IsAmAyCA82iQAi/a106d65a39d7446df48bfb7ddc7a6cfe/svg1.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 150 150" /&gt;</code><br />
  </div>

  <br /> 

    Pas de surprise, c'est l'exemple de base, le <i>viewbox</i> est précisé et fait les mêmes dimensions que le <i>viewport</i>. Le rond bleu a bien un diamètre de 100, et le rond rose n'est pas visible.

  <br />
</td>

<br />


<td class="svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/LWpQOE">![svg2](//images.ctfassets.net/95wnqgvmhlea/pUNoSrwpxIaQucUkeYIg6/beeb0fcb5d04d0f34b053527a1f7e07d/svg2.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 300 300" /&gt;</code><br />
  </div>

  <br /> 

    Cette fois le <i>viewbox</i> représente deux fois le <i>viewport</i>. Il en résulte donc une surface d'affichage deux fois fois plus large, mais toujours dans le même <i>viewport</i>. L'échelle est donc inférieure, ici 1:2, les cercles apparaissent deux fois plus petits, et le rose est cette fois visible.

  <br />
</td>

<br />


<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/bqVLYY">![svg3](//images.ctfassets.net/95wnqgvmhlea/7vWAhtTHZSaOOMAq0UIOCq/9e00ecb9d1a5272892d397b1be935f25/svg3.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 100 100" /&gt;</code><br />
  </div>

  <br /> 

    Cette fois-ci, le <i>viewbox</i> est inférieur au <i>viewport</i>. L'échelle est aussi modifiée à 3:2, le rond bleu prend cette fois toute la place disponible, soit un diamètre de 100 * 3 / 2 = 150, ce qui correspond bien aux largeur et hauteur du <i>viewport</i>.

  <br />
</td>

<br />



Ces trois exemples ont été faits en précisant un viewbox homothétique au viewport, maintenant, essayons en changeant cela.

Modification de l'échelle de façon non homothétique



<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/Zebram">![svg4](//images.ctfassets.net/95wnqgvmhlea/39BSBkGCCIkUQAok06Was/974db5b641a2764bba69e9500763b6b7/svg4.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 150 100" /&gt;</code><br />
  </div>

  <br /> 

    L'échelle sur l'axe x n'est pas modifiée, puisque la largeur du <i>viewbox</i> est la même que celle du <i>viewport</i>.<br />Ce qui est intéressant ici, c'est que l'échelle sur l'axe y n'est pas modifiée non plus, puisque le rond n'est pas écrasé. Le ratio est préservé. Nous verrons plus tard que l'attribut **<i>preserveAspectRatio</i>** ermet de jouer avec cela.<br /> Une dernière chose bien visible est que le <i>viewport</i> se retrouve centré verticalement dans le <i>viewport</i>. <i>PreserveAspectRatio</i> aura à nouveau son mot à dire sur cette caractéristique.

  <br />
</td>

<br />


<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/MpaQQz">![svg5](//images.ctfassets.net/95wnqgvmhlea/38iAlVxYU0mUac0WKuyuqa/60eabb4acf6f67fbe4cb321c445dffc0/svg5.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 200 300" /&gt;</code><br />
  </div>

  <br /> 

    Sur cet exemple, l'échelle a été modifiée, puisque ni la largeur, ni la hauteur du <i>viewbox</i> ne correspondait au <i>viewport</i>. Par contre, le ratio entre l'axe x et y reste le même, le rond n'est toujours pas déformé, et on peut se rendre compte que cette fois, le <i>viewbox</i> est centré horizontalement dans le <i>viewport</i>.

  <br />
</td>

<br />

La translation

Jusqu'à maintenant, on n'avait pas modifié min-x et min-y. Et bien c'est parti!



<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/dvYdmG">![svg6](//images.ctfassets.net/95wnqgvmhlea/6dgfbIkpe8AEUw6EGEwEyi/d55566da7f6711cf6b4166a21c1a16ed/svg6.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="50 -50 150 150" /&gt;</code><br />
  </div>

  <br /> 

    Préciser une valeur autre que 0 à <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">min-x</code> et <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">min-y</code> entraine un décalage du <i>viewbox</i>. Plus précisément, une **translation** (**<i>translate</i>**) va faire concorder les coordonnées <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">x = 50</code> et <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">y = -50</code> du <i>viewbox</i> avec le point d'origine du <i>viewport</i>. Dans notre exemple, il en résulte donc un <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">translate(-50, 50)</code>.<br /> À noter que sur cet exemple, le <i>viewbox</i> est identique au <i>viewport</i>, et seule une translation est effectuée.

  <br />
</td>

<br />


<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/QpjQmr">![svg7](//images.ctfassets.net/95wnqgvmhlea/3Loau1ocV2wIQgKw4oQmMU/273cc7d26c23654fbc7a96fff6923623/svg7.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="50 50 300 300" /&gt;</code><br />
  </div>

  <br /> 

    Dans ce cas, et comme déjà vu un peu plus haut, la zone d'affichage est deux fois plus grande, vu que l'échelle est devenue plus petite. La translation est également là, mais paraît deux fois moins importante. Visuellement, c'est le cas.<br /> Ce qui se passe, c'est que l'échelle est modifiée en premier, et la translation s'effectue sur cette nouvelle échelle. Visuellement, on voit bien un décalage de 25 pixels correspondant aux informations renseignées dans l'attribut <i>viewbox</i>.

  <br />
</td>

<br />


<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/xqwYjK">![svg8](//images.ctfassets.net/95wnqgvmhlea/3yItWIZRWMesmGiugUYGwQ/85aad690b25dd781ce366d6ffe2e5324/svg8.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="75 0 150 300" /&gt;</code><br />
  </div>

  <br /> 

    Pour ce dernier exemple, je vais cumuler ce que l'on a vu jusqu'à maintenant. La hauteur du <i>viewbox</i> est deux fois celle du <i>viewport</i>, donc l'échelle est inférieure. En revanche, la largeur du <i>viewbox</i> est la même que celle du <i>viewport</i>, et comme l'attribut <i>preserveAspectRatio</i> n'est pas précisé, le ratio entre l'axe x et l'axe y est préservé. Le <i>viewbox</i> fait donc visuellement 75 pixels de large et est centré dans le <i>viewport</i>. Ensuite, il y a une translation de 75 sur l'échelle du <i>viewbox</i>, soit visuellement de 37,5. Le point d'origine de la <i>viewbox</i> se retrouve donc maintenant confondu avec celui du <i>viewport</i>

  <br />
</td>

<br />

Ce dernier exemple utilise une translation pour empêcher de centrer le viewbox dans le viewport. On va voir qu'il y a plus simple pour arriver au même résultat.

PreserveAspectRatio

Cet attribut prend deux valeurs en paramètre (le deuxième est facultatif) et n'est pas interprété si l'attribut viewbox est absent :


preserveAspectRatio = " <align> [<meetOrSlice>] "

Le paramètre align

<align> peut prendre comme valeur l'une des dix suivantes : none, xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax , xMaxYMin, xMaxYMid, xMaxYMax. À part none, ces valeurs vont permettre d'aligner le viewbox dans le viewport.



<td class="svgExemple_aspect" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 20px;font-weight: bold;vertical-align: top;text-align:left;font-size: inherit">
  none
</td>

<br /> 

<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/WpQMJz">![svg9](//images.ctfassets.net/95wnqgvmhlea/6dIbgtGoWAIMqWIaSCsc4K/e4b505cefdb344e626c4ac6855d3be85/svg9.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 300 150" preserveAspectRatio="none" /&gt;</code><br />
  </div>

  <br /> 

    <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">none</code> est la seule valeur un peu spéciale. Dans cet unique cas, le ratio n'est pas préservé et le <i>viewbox</i> vient s'inscrire parfaitement dans le <i>viewport</i>, au risque de déformer les dessins. <br />À noter que dans ce cas, la valeur de <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px"> &lt;meetOrSlice&gt;</code> n'est pas prise en compte.

  <br />
</td>

<br />


<td class="svgExemple_aspect" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 20px;font-weight: bold;vertical-align: top;text-align:left;font-size: inherit">
  xMinYMin
</td>

<br /> 

<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/EWVQLB">![svg10](//images.ctfassets.net/95wnqgvmhlea/1Q3rrdrD4o8so8YI2yYQkg/3c44398f62afb97bc22b504c4250e758/svg10.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 300 150" preserveAspectRatio="xMinYMin" /&gt;</code><br />
  </div>

  <br /> 

    Dans cet exemple, nous avons défini un <i>viewbox</i> deux fois plus large que haut. Sans <i>preserveAspectRatio</i>, le <i>viewbox</i> serait centré verticalement dans le <i>viewport</i>, comme on l'a vu précédemment. Mais ici, en précisant comme valeur d'alignement <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMinYMin</code>, on force l'alignement du viewbox en haut à gauche. <br /> À noter que les valeurs <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMidYMin</code> et <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMaxYMin</code> auraient le même résultat visuellement, puisque le <i>viewbox</i> prend toute la valeur du <i>viewport</i>.

  <br />
</td>

<br />


<td class="svgExemple_aspect" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 20px;font-weight: bold;vertical-align: top;text-align:left;font-size: inherit">
  xMaxYMin
</td>

<br /> 

<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/OpyQEj">![svg11](//images.ctfassets.net/95wnqgvmhlea/4kF7U3FKIEq4Sos2wOQyIs/3d8bcd40cfaf6323c15c21ac54bb9dc0/svg11.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 150 300" preserveAspectRatio="xMaxYMin" /&gt;</code><br />
  </div>

  <br /> 

    Cette fois, c'est la hauteur qui est supérieure à la largeur. On pourrait s'attendre à ce que le <i>viewbox</i> soit centré horizontalement, mais la valeur <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMaxYMin</code> va l'aligner à droite. <br /> De la même façon, <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMaxYMid</code> et <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMaxYMax</code> ont le même résultat visuel.

  <br />
</td>

<br />


<td class="svgExemple_aspect" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 20px;font-weight: bold;vertical-align: top;text-align:left;font-size: inherit">
  xMidYMax
</td>

<br /> 

<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/KWdQeB">![svg12](//images.ctfassets.net/95wnqgvmhlea/5XhXJmAiJOOWc8iuEESem8/a851262300a29ae6c46d9852ee63e7d5/svg12.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 150 300" preserveAspectRatio="xMidYMax" /&gt;</code><br />
  </div>

  <br /> 

    En reprenant l'exemple précédent, mais en précisant un <i>preserveAspectRatio</i> à <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMidYMax</code>, le <i>viewbox</i> est centré horizontalement. <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMidYMin</code> et <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMidYMid</code> produiront le même effet. <br />Sur ce cas, on pourrait bien sûr carrément enlever l'attribut, car comme vu sur les exemples de la partie <i>viewbox</i>, avoir ce dernier centré est le comportement par défaut.

  <br />
</td>

<br />

Pas la peine d'illustrer tous les cas de figure, les exemples sont suffisamment parlants concernant l'alignement en "Min" ou en "Max". Par contre, l'intérêt de "Mid" est plutôt limité pour le moment.

Mais c'est là que <meetOrSlice> va rentrer en jeu.

Le paramètre meetOrSlice

<meetOrSlice>, comme son nom l'indique peut avoir deux valeurs différentes : meet , qui est la valeur par défaut, ou slice, la valeur à laquelle nous allons nous intéresser.

Jusqu'à maintenant, on a vu que le viewbox était contraint dans le viewport par la plus grande valeur entre le <width> et le <height> de l'attribut viewbox. slice permet de changer cela et d'utiliser la plus petite valeur.
Si le viewbox n'est pas homothétique au viewport, une partie du viewbox ne sera donc pas visible.



<td class="svgExemple_aspect" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 20px;font-weight: bold;vertical-align: top;text-align:left;font-size: inherit">
  xMinYMin slice
</td>

<br /> 

<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/dvYdjM">![svg13](//images.ctfassets.net/95wnqgvmhlea/5xLdsc5k9aQYEcsuE6SI2m/061a911324f99feb4fe2a4aa8060a1d1/svg13.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 300 150" preserveAspectRatio="xMinYMin slice" /&gt;</code><br />
  </div>

  <br /> 

    Dans ce cas, le <i>viewbox</i> est plus long que le <i>viewport</i>, et le paramètre <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMinYMin</code> permet d'aligner à gauche le <i>viewbox</i>. <br />Cette fois, c'est <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMinYMid</code> et <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMinYMax</code> qui ont le même comportement.

  <br />
</td>

<br />


<td class="svgExemple_aspect" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 20px;font-weight: bold;vertical-align: top;text-align:left;font-size: inherit">
  xMaxYMin slice
</td>

<br /> 

<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/bqVLjL">![svg14](//images.ctfassets.net/95wnqgvmhlea/6COxgkpfTUOQiegG84gUis/a7ea34ec4c5ddfc1c478f989d895871c/svg14.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 300 150" preserveAspectRatio="xMaxYMin slice" /&gt;</code><br />
  </div>

  <br /> 

    <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMaxYMin</code> permet, à l'inverse de l'exemple précédent, d'aligner à droite le <i>viewbox</i> dans le <i>viewport</i>. <br /><code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMaxYMid</code> et <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMaxYMax</code> auront le même comportement.

  <br />
</td>

<br />


<td class="svgExemple_aspect" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 20px;font-weight: bold;vertical-align: top;text-align:left;font-size: inherit">
  xMidYMin slice
</td>

<br /> 

<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/pejaZx">![svg15](//images.ctfassets.net/95wnqgvmhlea/2t7ZIIVIDC0mYIMa8S8oEQ/ce1e29e97cc58d156ae458fce96ea7e4/svg15.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 300 150" preserveAspectRatio="xMidYMin slice" /&gt;</code><br />
  </div>

  <br /> 

    Troisième cas de figure, <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMidYMin</code> va permettre de centrer le <i>viewbox</i> horizontalement, car celui-ci est plus long que le <i>viewport</i>. <br />De la même façon, <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMidYMid</code> et <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMidYMax</code> auront visuellement le même résultat.

  <br />
</td>

<br />


<td class="svgExemple_aspect" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 20px;font-weight: bold;vertical-align: top;text-align:left;font-size: inherit">
  xMidYMid slice
</td>

<br /> 

<td class=" svgExemple_svg" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit">
  <br /> <a href="http://codepen.io/zeph22/pen/ryOJrb">![svg16](//images.ctfassets.net/95wnqgvmhlea/7ruIPkPvQQos4UYeeeCesG/344ae043f8995a767f4cc476b445929e/svg16.png?fm=png "")</a><br />
</td>

<br /> 

<td class="svgExemple_explanation" style="border-right: 1px solid #eee;border-bottom: 1px solid #eee;padding: 10px;vertical-align: top;text-align:left;font-size: inherit;width: 100%">
  <br /> 

  <div style="border:1px solid #ccc;background: #fefefe;padding: 10px;line-height: 1.3rem;margin: 1em 0;margin-top: 0">
    <br /> <code class="svgExemple_code">&lt;svg width="150" height="150" viewbox="0 0 150 300" preserveAspectRatio="xMidYMid slice" /&gt;</code><br />
  </div>

  <br /> 

    Dernier exemple : cette fois, le <i>viewbox</i> a une hauteur supérieure au <i>viewport</i>. <br />Pas besoin de reprendre tous les cas de figure possibles, c'est la deuxième partie du paramètre <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">&lt;align&gt;</code> qui sera pris en compte. <br /> <code class="svgExemple_code--inline" style="border: 1px solid #ccc;background: #fefefe;padding: 0 5px;line-height: 1.2rem;margin: 0 1px">xMidYMid</code> va donc permettre de centrer verticalement le <i>viewbox</i> dans le <i>viewport</i>.

  <br />
</td>

<br />

Conclusion

Ça y est, nous voilà à la fin de cet article.
Bien comprendre les coordonnées est important et permet de plus facilement travailler avec les SVGs exportés par différents logiciels. Cela permet aussi de résoudre des problématiques simples comme :