Comprendre viewBox: comment utiliser la bonne taille

Question

Regardez ce SVG. Comme vous pouvez le voir, je le fournis comme base de données URI64. La raison en est que je veux l'utiliser comme image de fond. Cependant, j'éprouve quelques difficultés à le faire fonctionner comme je le souhaite et je crains de mal comprendre quelque chose à propos de l'attribut viewbox. Mais laissez-moi commencer par donner un exemple de ce que je veux accomplir.

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body::after { 
 
    content: ""; 
 
    display: block; 
 
    height: 0; 
 
    padding: 11%; 
 
    width: 76%; 
 
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDYuNTMgNDAuNzgiIGJhc2VQcm9maWxlPSJiYXNpYyIgdmVyc2lvbj0iMS4xIiB5PSIwcHgiIHg9IjBweCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8Zz4KCTxwYXRoIGZpbGw9InJnYigxMCwgNTQsIDgzKSIgZD0ibTE5NiAxNS4yYzYuMS00LjYgMTAuNy01IDEwLjctNSAwLjggMC41IDMuMSAxLjYgNS41IDIuMyA3LjggMi40IDEzLjUgMS45IDE0LjQtMC4xIDAuNy0xLjUtMC44LTMuNi0zLjQtNC43LTguNi0zLjgtMjAuNS0wLjctMjAuNS0wLjdzLTQuNC0zLjEtNy40LTQuNGMtMTAuMS00LjUtMjEuNS0wLjItMjYuMSAxMC4yLTEuNCAzLjEtMS44IDYtMS43IDguNGwwLjUtMC4xYzAtMi40IDAuMy01LjEgMS42LTguMSA0LjYtMTAuNSAxNS44LTE0LjIgMjUuNC0xMCAyLjggMS4yIDUuMyAzLjIgNi43IDQuMi04IDMuNC0xMS40IDYuNS0xMy41IDkuN2gyLjIgMTYwLjV2LTEuOGgtMTU0Ljl6bTI3LjgtNmMxLjYgMC43IDIuNSAyLjEgMi4xIDMtMC44IDEuOS04LjQgMS40LTEzLjQtMC4zLTEuOS0wLjYtNS4yLTIuMS01LjItMi4xIDktMi4yIDEzLjctMS44IDE2LjUtMC42em0tNDEuNCA5Yy00LjYgMTAuNS0xNS44IDE0LjItMjUuNCAxMC0yLjgtMS4yLTUuMy0zLjItNi43LTQuMiA4LTMuNCAxMS40LTYuNSAxMy41LTkuN2gtMi4yLTE2MC42djEuOGgxNTUuMWMtNi4xIDQuNi0xMC43IDUtMTAuNyA1LTAuOC0wLjUtMy4xLTEuNi01LjUtMi4zLTcuOC0yLjQtMTMuNS0xLjktMTQuNCAwLjEtMC43IDEuNSAwLjggMy42IDMuNCA0LjcgOC42IDMuOCAyMC41IDAuNyAyMC41IDAuN3M0LjQgMy4xIDcuNCA0LjRjMTAuMSA0LjUgMjEuNSAwLjIgMjYuMS0xMC4yIDEuNC0zLjEgMS44LTYgMS43LTguNGwtMC41IDAuMWMwIDIuMy0wLjQgNS0xLjcgOHptLTU0LjEgMy45Yy0xLjYtMC43LTIuNS0yLjEtMi4xLTMgMC44LTEuOSA4LjQtMS40IDEzLjQgMC4zIDEuOSAwLjYgNS4yIDIuMSA1LjIgMi4xLTkgMi4zLTEzLjcgMS45LTE2LjUgMC42eiIvPgo8L2c+Cjwvc3ZnPgo="); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: center center; 
 
    margin: 24px auto; 
 
}

Si vous regardez attentivement, vous pouvez voir que l'image d'arrière-plan ne soit pas centré. (Lorsque vous ouvrez vos outils de développement et mettez en surbrillance la boîte du pseudo élément, c'est très clair.) Au début, je pensais que vous ne pouviez pas centrer les URI de données, mais j'ai remarqué que lorsque vous survolez l'URI de données, les dimensions de "l'image" sont 300x30. Chrome affiche également un petit aperçu de l'image. Il en ressort que les dimensions ne sont pas correctes. Le rapport 10-à-1 n'est pas correct. L'URI de données est généré à partir du SVG suivant, dans lequel j'ai spécifié des valeurs pour l'attribut viewBox. Même s'il est proche de 10-1, ce n'est pas le cas. Je pense donc que quelque chose ne va pas, car l'URI de données incorporées ne respecte pas les dimensions proposées.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406.53 40.78" baseProfile="basic" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<g> 
    <path fill="rgb(10, 54, 83)" d="m196 15.2c6.1-4.6 10.7-5 10.7-5 0.8 0.5 3.1 1.6 5.5 2.3 7.8 2.4 13.5 1.9 14.4-0.1 0.7-1.5-0.8-3.6-3.4-4.7-8.6-3.8-20.5-0.7-20.5-0.7s-4.4-3.1-7.4-4.4c-10.1-4.5-21.5-0.2-26.1 10.2-1.4 3.1-1.8 6-1.7 8.4l0.5-0.1c0-2.4 0.3-5.1 1.6-8.1 4.6-10.5 15.8-14.2 25.4-10 2.8 1.2 5.3 3.2 6.7 4.2-8 3.4-11.4 6.5-13.5 9.7h2.2 160.5v-1.8h-154.9zm27.8-6c1.6 0.7 2.5 2.1 2.1 3-0.8 1.9-8.4 1.4-13.4-0.3-1.9-0.6-5.2-2.1-5.2-2.1 9-2.2 13.7-1.8 16.5-0.6zm-41.4 9c-4.6 10.5-15.8 14.2-25.4 10-2.8-1.2-5.3-3.2-6.7-4.2 8-3.4 11.4-6.5 13.5-9.7h-2.2-160.6v1.8h155.1c-6.1 4.6-10.7 5-10.7 5-0.8-0.5-3.1-1.6-5.5-2.3-7.8-2.4-13.5-1.9-14.4 0.1-0.7 1.5 0.8 3.6 3.4 4.7 8.6 3.8 20.5 0.7 20.5 0.7s4.4 3.1 7.4 4.4c10.1 4.5 21.5 0.2 26.1-10.2 1.4-3.1 1.8-6 1.7-8.4l-0.5 0.1c0 2.3-0.4 5-1.7 8zm-54.1 3.9c-1.6-0.7-2.5-2.1-2.1-3 0.8-1.9 8.4-1.4 13.4 0.3 1.9 0.6 5.2 2.1 5.2 2.1-9 2.3-13.7 1.9-16.5 0.6z"/> 
</g> 
</svg> 

Je suis donc à perte. Pourquoi l'arrière-plan SVG/URI de données ne respecte-t-il pas le rapport/la boîte spécifié dans viewBox lorsqu'il est utilisé en arrière-plan? Et comment puis-je résoudre ce problème?

Answer 1

Je crois que votre SVN d'origine n'était pas dans les proportions que vous pensiez qu'il était, donc le changement de votre largeur-hauteur dans le viewbox affecté votre vue globale.

Cochez cette case (largeur/hauteur changé de 406.53 40.78 à 352 31):

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
body::after { 
 
    content: ""; 
 
    display: block; 
 
    height: 0; 
 
    padding: 11% 0; 
 
    width: 100%; 
 
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNTIgMzEiIGJhc2VQcm9maWxlPSJiYXNpYyIgdmVyc2lvbj0iMS4xIiB5PSIwcHgiIHg9IjBweCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KPGc+DQoJPHBhdGggZmlsbD0icmdiKDEwLCA1NCwgODMpIiBkPSJtMTk2IDE1LjJjNi4xLTQuNiAxMC43LTUgMTAuNy01IDAuOCAwLjUgMy4xIDEuNiA1LjUgMi4zIDcuOCAyLjQgMTMuNSAxLjkgMTQuNC0wLjEgMC43LTEuNS0wLjgtMy42LTMuNC00LjctOC42LTMuOC0yMC41LTAuNy0yMC41LTAuN3MtNC40LTMuMS03LjQtNC40Yy0xMC4xLTQuNS0yMS41LTAuMi0yNi4xIDEwLjItMS40IDMuMS0xLjggNi0xLjcgOC40bDAuNS0wLjFjMC0yLjQgMC4zLTUuMSAxLjYtOC4xIDQuNi0xMC41IDE1LjgtMTQuMiAyNS40LTEwIDIuOCAxLjIgNS4zIDMuMiA2LjcgNC4yLTggMy40LTExLjQgNi41LTEzLjUgOS43aDIuMiAxNjAuNXYtMS44aC0xNTQuOXptMjcuOC02YzEuNiAwLjcgMi41IDIuMSAyLjEgMy0wLjggMS45LTguNCAxLjQtMTMuNC0wLjMtMS45LTAuNi01LjItMi4xLTUuMi0yLjEgOS0yLjIgMTMuNy0xLjggMTYuNS0wLjZ6bS00MS40IDljLTQuNiAxMC41LTE1LjggMTQuMi0yNS40IDEwLTIuOC0xLjItNS4zLTMuMi02LjctNC4yIDgtMy40IDExLjQtNi41IDEzLjUtOS43aC0yLjItMTYwLjZ2MS44aDE1NS4xYy02LjEgNC42LTEwLjcgNS0xMC43IDUtMC44LTAuNS0zLjEtMS42LTUuNS0yLjMtNy44LTIuNC0xMy41LTEuOS0xNC40IDAuMS0wLjcgMS41IDAuOCAzLjYgMy40IDQuNyA4LjYgMy44IDIwLjUgMC43IDIwLjUgMC43czQuNCAzLjEgNy40IDQuNGMxMC4xIDQuNSAyMS41IDAuMiAyNi4xLTEwLjIgMS40LTMuMSAxLjgtNiAxLjctOC40bC0wLjUgMC4xYzAgMi4zLTAuNCA1LTEuNyA4em0tNTQuMSAzLjljLTEuNi0wLjctMi41LTIuMS0yLjEtMyAwLjgtMS45IDguNC0xLjQgMTMuNCAwLjMgMS45IDAuNiA1LjIgMi4xIDUuMiAyLjEtOSAyLjMtMTMuNyAxLjktMTYuNSAwLjZ6Ii8+DQo8L2c+DQo8L3N2Zz4="); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

Original SVG: 
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406.53 40.78" baseProfile="basic" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
<g> 
 
    <path fill="rgb(10, 54, 83)" d="m196 15.2c6.1-4.6 10.7-5 10.7-5 0.8 0.5 3.1 1.6 5.5 2.3 7.8 2.4 13.5 1.9 14.4-0.1 0.7-1.5-0.8-3.6-3.4-4.7-8.6-3.8-20.5-0.7-20.5-0.7s-4.4-3.1-7.4-4.4c-10.1-4.5-21.5-0.2-26.1 10.2-1.4 3.1-1.8 6-1.7 8.4l0.5-0.1c0-2.4 0.3-5.1 1.6-8.1 4.6-10.5 15.8-14.2 25.4-10 2.8 1.2 5.3 3.2 6.7 4.2-8 3.4-11.4 6.5-13.5 9.7h2.2 160.5v-1.8h-154.9zm27.8-6c1.6 0.7 2.5 2.1 2.1 3-0.8 1.9-8.4 1.4-13.4-0.3-1.9-0.6-5.2-2.1-5.2-2.1 9-2.2 13.7-1.8 16.5-0.6zm-41.4 9c-4.6 10.5-15.8 14.2-25.4 10-2.8-1.2-5.3-3.2-6.7-4.2 8-3.4 11.4-6.5 13.5-9.7h-2.2-160.6v1.8h155.1c-6.1 4.6-10.7 5-10.7 5-0.8-0.5-3.1-1.6-5.5-2.3-7.8-2.4-13.5-1.9-14.4 0.1-0.7 1.5 0.8 3.6 3.4 4.7 8.6 3.8 20.5 0.7 20.5 0.7s4.4 3.1 7.4 4.4c10.1 4.5 21.5 0.2 26.1-10.2 1.4-3.1 1.8-6 1.7-8.4l-0.5 0.1c0 2.3-0.4 5-1.7 8zm-54.1 3.9c-1.6-0.7-2.5-2.1-2.1-3 0.8-1.9 8.4-1.4 13.4 0.3 1.9 0.6 5.2 2.1 5.2 2.1-9 2.3-13.7 1.9-16.5 0.6z"/> 
 
</g> 
 
</svg> 
 
New proportion SVG: 
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 31" baseProfile="basic" version="1.1" y="0" x="0" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
<g> 
 
    <path fill="rgb(10, 54, 83)" d="m196 15.2c6.1-4.6 10.7-5 10.7-5 0.8 0.5 3.1 1.6 5.5 2.3 7.8 2.4 13.5 1.9 14.4-0.1 0.7-1.5-0.8-3.6-3.4-4.7-8.6-3.8-20.5-0.7-20.5-0.7s-4.4-3.1-7.4-4.4c-10.1-4.5-21.5-0.2-26.1 10.2-1.4 3.1-1.8 6-1.7 8.4l0.5-0.1c0-2.4 0.3-5.1 1.6-8.1 4.6-10.5 15.8-14.2 25.4-10 2.8 1.2 5.3 3.2 6.7 4.2-8 3.4-11.4 6.5-13.5 9.7h2.2 160.5v-1.8h-154.9zm27.8-6c1.6 0.7 2.5 2.1 2.1 3-0.8 1.9-8.4 1.4-13.4-0.3-1.9-0.6-5.2-2.1-5.2-2.1 9-2.2 13.7-1.8 16.5-0.6zm-41.4 9c-4.6 10.5-15.8 14.2-25.4 10-2.8-1.2-5.3-3.2-6.7-4.2 8-3.4 11.4-6.5 13.5-9.7h-2.2-160.6v1.8h155.1c-6.1 4.6-10.7 5-10.7 5-0.8-0.5-3.1-1.6-5.5-2.3-7.8-2.4-13.5-1.9-14.4 0.1-0.7 1.5 0.8 3.6 3.4 4.7 8.6 3.8 20.5 0.7 20.5 0.7s4.4 3.1 7.4 4.4c10.1 4.5 21.5 0.2 26.1-10.2 1.4-3.1 1.8-6 1.7-8.4l-0.5 0.1c0 2.3-0.4 5-1.7 8zm-54.1 3.9c-1.6-0.7-2.5-2.1-2.1-3 0.8-1.9 8.4-1.4 13.4 0.3 1.9 0.6 5.2 2.1 5.2 2.1-9 2.3-13.7 1.9-16.5 0.6z"/> 
 
</g> 
 
</svg> 
 
Background SVG: