CODEWITHSUNDEEP
htmlcsssvg
j1992b
j1992b

Reputation: 23

SVG file used as background img in CSS

I want to use a figma selfmade SVG I saved it on my laptop as VisaCard.SVG and I was able to open it in the editor but it has an HTML format. My main goal is to use this as SVG as background to write text over it.

I looked online how to use a SVG as background but so far I just find examples where the svg is used as link, so I will like to know how can I achieve this with a SVG file. Or could someone help me understand how to implement mine own SVG as URL? I was following this example from https://codepen.io/rmcguinn/pen/JpVwBp, however the sintax of the SVG is different.

Example from <https://codepen.io/rmcguinn/pen/JpVwBp>

.Inner-wrap {
  background-color: red;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%230d1838' points='1600%2C160 0%2C460 0%2C350 1600%2C50'/%3E%3Cpolygon fill='%230e315d' points='1600%2C260 0%2C560 0%2C450 1600%2C150'/%3E%3Cpolygon fill='%230f4981' points='1600%2C360 0%2C660 0%2C550 1600%2C250'/%3E%3Cpolygon fill='%231062a6' points='1600%2C460 0%2C760 0%2C650 1600%2C350'/%3E%3Cpolygon fill='%23117aca' points='1600%2C800 0%2C800 0%2C750 1600%2C450'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto 147%;
  background-position: center;
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 13px;
  padding: 20px 40px;
  box-sizing: border-box;
  color: #fff;
}

MINE SVG

<svg width="240" height="144" viewBox="0 0 240 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_105_102461)">
<rect width="240" height="144" rx="8" fill="url(#paint0_linear_105_102461)"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M-28.6897 92.6764L61.0255 68.6372C69.0915 66.476 73.8782 58.1851 71.717 50.1191L47.6779 -39.596L14.6097 -58.688L-39.5345 35.0924C-41.5395 38.5653 -42.0828 42.6924 -41.045 46.5658L-28.6897 92.6764Z" fill="white"/>
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M207.941 180.677L297.656 156.638C305.722 154.477 310.508 146.186 308.347 138.12L284.308 48.405L251.24 29.313L197.096 123.093C195.091 126.566 194.547 130.693 195.585 134.567L207.941 180.677Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_105_102461" x1="0" y1="0" x2="257.595" y2="46.4717" gradientUnits="userSpaceOnUse">
<stop stop-color="#0F3CF0"/>
<stop offset="1" stop-color="#0C31C6"/>
</linearGradient>
<clipPath id="clip0_105_102461">
<rect width="240" height="144" rx="8" fill="white"/>
</clipPath>
</defs>
</svg>

Upvotes: 1

Views: 95

Answers (1)

Halo
Halo

Reputation: 2827

First of all, you need to convert the svg image into a css background. You can do that by accessing this tool. After you have the css background, you can normally apply it to the element in which you would want. That should do it!

Upvotes: 1

Related Questions