title: Add background image in SVG
body: <p>I need to add background image in svg. But I'm getting only black rectangle box, the image is not displaying. How to add the background image? </p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;style&gt;
      path {
          fill: none;
          stroke: #000;
          stroke-width: 3px;
          stroke-linejoin: round;
          stroke-linecap: round;
      }
  &lt;/style&gt;
  
  &lt;svg width="1000" height="700"&gt;
      &lt;!-- &lt;rect fill="#fff" width="100%" height="100%"&gt;&lt;/rect&gt; --&gt;
  
      &lt;defs&gt;
          &lt;pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700"&gt;
              &lt;image xlink:href="home/nayana/Documents/Text Editor Files/abstract-hd.jpg" width="600" height="450" /&gt;             
          &lt;/pattern&gt;
      &lt;/defs&gt;
      &lt;path d="M5,5 l0,680 l980,0 l0,-680 l-980,0 fill="url(#img1)" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Thanks in advance</p>