Understanding viewBox: how to use the correct size

Question

Have a look at this SVG. As you can see I provide it as a base64 data uri. The reason for this is that I want to use it as a background image. However, I am experiencing some difficulty getting it to work the way I want to and I fear I am misunderstanding something about the viewbox attribute. But let me start by giving an example of what I want to accomplish.

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

If you look closely you can see that the background image is not centered. (When you open your dev tools and highlight the box of the pseudo element it is very clear.) At first I thought you couldn't center data URIs, but then I noticed that when you hover over the data URI in devtools, it says the dimensions of the "image" are 300x30. Chrome also shows a small preview of the image. It is clear from this that the dimensions are not correct. The 10-to-1 ratio is not correct.

The data URI is generated from the following SVG, in which I specified values for the viewBox attribute. Even though it is close to 10-1, it isn't. So I am thinking something goes wrong because of which the embedded data URI doesn't respect the proposed dimensions.

So I am at loss. Why doesn't the SVG/data URI background respect the ratio/box that is specified in viewBox when it is used as a background? And how can I fix this?

Dekel · Accepted Answer

I believe your original SVN was not in the proportions that you thought it was, so the change in your width-height in the viewbox affected your overall view.

Check here (width/height changed from 406.53 40.78 to 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:

New proportion SVG:

Background SVG:

Understanding viewBox: how to use the correct size

Answers (1)

Related Questions