title: SVG file used as background img in CSS
body: <p>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.</p>
  <p>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 <a href="https://codepen.io/rmcguinn/pen/JpVwBp" rel="nofollow noreferrer">https://codepen.io/rmcguinn/pen/JpVwBp</a>, however the sintax of the SVG is different.</p>
  <pre><code>Example from &lt;https://codepen.io/rmcguinn/pen/JpVwBp&gt;
  
  .Inner-wrap {
    background-color: red;
  background-image: url(&quot;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&quot;);
    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;
  }
  </code></pre>
  <p>MINE SVG</p>
  <pre><code>&lt;svg width=&quot;240&quot; height=&quot;144&quot; viewBox=&quot;0 0 240 144&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
  &lt;g clip-path=&quot;url(#clip0_105_102461)&quot;&gt;
  &lt;rect width=&quot;240&quot; height=&quot;144&quot; rx=&quot;8&quot; fill=&quot;url(#paint0_linear_105_102461)&quot;/&gt;
  &lt;path opacity=&quot;0.2&quot; fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;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&quot; fill=&quot;white&quot;/&gt;
  &lt;path opacity=&quot;0.2&quot; fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;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&quot; fill=&quot;white&quot;/&gt;
  &lt;/g&gt;
  &lt;defs&gt;
  &lt;linearGradient id=&quot;paint0_linear_105_102461&quot; x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;257.595&quot; y2=&quot;46.4717&quot; gradientUnits=&quot;userSpaceOnUse&quot;&gt;
  &lt;stop stop-color=&quot;#0F3CF0&quot;/&gt;
  &lt;stop offset=&quot;1&quot; stop-color=&quot;#0C31C6&quot;/&gt;
  &lt;/linearGradient&gt;
  &lt;clipPath id=&quot;clip0_105_102461&quot;&gt;
  &lt;rect width=&quot;240&quot; height=&quot;144&quot; rx=&quot;8&quot; fill=&quot;white&quot;/&gt;
  &lt;/clipPath&gt;
  &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>