Can I to make svg icon using data-uri with built-in data for the properties of the background? -
i want result of 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 2 different data-uri 2 icons. 1 behaves if had following properties:
background-repeat: no-repeat; background-size: contain; background-position: bottom;
how done?
if base64 decode of first icon 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 second 1 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 second specifies width
, height
of "16px"
svg. means drawn @ size no matter what. when used background image gets repeated if container larger 16px in width or height.
the first icon not specify width
or height
. attributes default "100%". means icon gets scaled fit container.
Comments
Post a Comment