CODEWITHSUNDEEP
htmlcsssvgbase64
Eric Lauterbach
Eric Lauterbach

Reputation: 13

How can I get inline SVG code to act as a background image?

I have inline svg code exported from illustrator which I am using as an overlay over a background image. I need certain elements to align therefore there would both need to scale equally, and i need to keep the svg as code because certain elements will be become animated.

I first put the SVG code through SVGOMG: https://jakearchibald.github.io/svgomg/

I then put it through an encoder to base64: https://yoksel.github.io/url-encoder/

Through any research I could find this is how svg code can behave like a background image, however the code I ended up with was not able to successfully be plugged in to the background image property. Here is some sample code:

html:

<div id="mainSVG"></div>

scss: 

#mainSVG{
background-position: center;
background-size: cover;
background-image: url("data:image/svg+xml,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=");}

Also tried putting the standard svg code into the html file then using the object-fit and object-position properties, but i guess this only works for img and video tags?

I'm sure I'm missing something here. Still a beginner so please bear with me.

Upvotes: 1

Views: 326

Answers (2)

Kosh
Kosh

Reputation: 18393

You're almost there, but forgot to specify encoding of your data-uri, and width and height of your <div>:

#mainSVG {
  width: 200px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=");
}
<div id="mainSVG"></div>

Also you might use your SVG as HTML <svg> element:

#mainSVG {
  width: 200px;
  height: 100px;
}
<div id="mainSVG">
  <svg viewBox="0 0 1920 1080">
  <g id="oval">
    <path d="M1034.5 766.5c-165.4 0-320.9-29.63-437.84-83.43-56.83-26.15-101.45-56.59-132.6-90.47-32.22-35.04-48.55-72.25-48.55-110.6s16.33-75.56 48.55-110.6c31.16-33.89 75.77-64.33 132.6-90.47 116.94-53.8 272.44-83.43 437.84-83.43 165.4 0 320.9 29.63 437.84 83.43 56.83 26.15 101.45 56.59 132.6 90.47 32.22 35.04 48.55 72.25 48.55 110.6s-16.33 75.56-48.55 110.6c-31.16 33.89-75.77 64.33-132.6 90.47-116.94 53.8-272.44 83.43-437.84 83.43z"/>
    <path d="M1034.5 198c83.57 0 164.63 7.53 240.95 22.38 73.69 14.34 139.87 34.86 196.69 61 56.77 26.12 101.33 56.52 132.45 90.36C1636.71 406.69 1653 443.78 1653 482s-16.29 75.31-48.42 110.26c-31.11 33.84-75.67 64.24-132.45 90.36-56.82 26.14-123 46.67-196.69 61-76.31 14.85-157.37 22.38-240.94 22.38s-164.63-7.53-240.95-22.38c-73.69-14.34-139.87-34.86-196.69-61-56.77-26.12-101.33-56.52-132.45-90.36C432.29 557.31 416 520.22 416 482s16.29-75.31 48.42-110.26c31.11-33.84 75.67-64.24 132.45-90.36 56.82-26.14 123-46.67 196.69-61C869.87 205.53 950.93 198 1034.5 198m0-1C692.36 197 415 324.6 415 482s277.36 285 619.5 285S1654 639.4 1654 482s-277.36-285-619.5-285z"/>
  </g>
  <g id="rectangle">
    <path fill="#fff" d="M739.5 319.5h590v326h-590z"/>
    <path d="M1329 320v325H740V320h589m1-1H739v327h591V319z"/>
  </g>
</svg>
</div>

Or <img> with src of your SVG file path or data-uri:

<img width="200" height="100" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=">

Upvotes: 1

Marius Seba
Marius Seba

Reputation: 11

maybe this will help you:

https://codepen.io/netsi1964/pen/HGJms

   <div class="bg"></div>

   .bg {
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
      height: 50px;
      width: 50px;
}

Upvotes: 0

Related Questions