Can I to make svg icon using data-uri with built-in data for the properties of the background?

Question

I want it to look like the result of this code:

html {
  font-size: 16px;
}

.ico {
  display: inline-block;
}

.ico_size_s {
  width: 1.3rem;
  height: 1.3rem;
}

.ico_size_m {
  width: 2rem;
  height: 2rem;
}

.ico_first {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzLjUxMi40NTMgNS40NzUgMTIuNDc4IDEuNzA4IDguMjguNjY3IDkuNjA1IDUuNjAzIDE1LjA2IDE0LjcyMiAxLjYxM3oiLz48L3N2Zz4K);
  background-color: yellow;
}

.ico_last {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQo8cGF0aCBkPSJNMTUsMGMtMC40NDYsMC0wLjcxOSwwLjM0NC0wLjkzOSwwLjY5OUw2LjgwNywxMy4zOTNsLTUuMS01LjFsMCwwQzEuNTI2LDguMTEyLDEuMjc2LDgsMSw4QzAuNDQ4LDgsMCw4LjQ0OCwwLDkNCgljMCwwLjI3NiwwLjExMiwwLjUyNiwwLjI5MywwLjcwN2w2LDZDNi40NzQsMTUuODg4LDYuNzI0LDE2LDcsMTZjMC40NDYsMCwwLjgxMi0wLjM0NCwwLjk4NC0wLjY5OWw3LjY3Mi0xMy41MDQNCglDMTUuNjU2LDEuNzk3LDE2LDEuMjY2LDE2LDFDMTYsMC40NDgsMTUuNTUyLDAsMTUsMHoiLz4NCjwvc3ZnPg0K);
  background-color: orange;
}

<i class="ico ico_first ico_size_s"></i>
<i class="ico ico_last ico_size_s"></i>

<hr />

<i class="ico ico_first ico_size_m"></i>
<i class="ico ico_last ico_size_m"></i>

There are two different data-uri for the two icons. One behaves as if it had the following properties:

background-repeat: no-repeat;
background-size: contain;
background-position: bottom;

How is it done?

Answer 1

If you do a Base64 decode of the first icon you get:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M13.512.453 5.475 12.478 1.708 8.28.667 9.605 5.603 15.06 14.722 1.613z"/>
</svg>

Whereas decoding the second one gives:

<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
  <path d="M15,0c-0.446,0-0.719,0.344-0.939,0.699L6.807,13.393l-5.1-5.1l0,0C1.526,8.112,1.276,8,1,8C0.448,8,0,8.448,0,9
c0,0.276,0.112,0.526,0.293,0.707l6,6C6.474,15.888,6.724,16,7,16c0.446,0,0.812-0.344,0.984-0.699l7.672-13.504
C15.656,1.797,16,1.266,16,1C16,0.448,15.552,0,15,0z"/>

Notice that the second specifies a width and height of "16px" for the SVG. That means it will always be drawn at that size no matter what. So when it is used as a background image it gets repeated if the container is larger than 16px in width or height.

The first icon does not specify a width or height. So those attributes default to "100%". That means the icon gets scaled to fit the container.