Photoshop Question posted in
The official user guide can be found here.

Add Background image to SVG – Photoshop

I have SVG code which i got from the layer of photoshop. i want to add background image in that svg curve. Please help me how can i add image or background.

.Shape_1 {
    background-color: rgb(0, 0, 0);
    box-shadow: -7.314px -6.82px 30px 0px rgba(1, 80, 50, 0.28);
    position: absolute;
    left: -15px;
    top: 83px;
    width: 592px;
    height: 779px;
    z-index: 7;
}

<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" width="651px" height="838px">
  <defs>
      <filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" 
          width="651px" height="838px">
      <feOffset in="SourceAlpha" dx="-7.314" dy="-6.82" />
      <feGaussianBlur result="blurOut" stdDeviation="5.477" />
      <feFlood flood-color="rgb(1, 80, 50)" result="floodOut" />
      <feComposite operator="atop" in="floodOut" in2="blurOut" />
      <feComponentTransfer>
      <feFuncA type="linear" slope="0.28" />
      </feComponentTransfer>
      <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
      </feMerge>
      </filter>
    </defs>
    <g filter="url(#Filter_0)">
      <path fill-rule="evenodd" fill="rgb(0, 0, 0)"
      d="M325.482,36.000 C325.482,36.000 251.567,261.626 539.526,431.976 
      C604.104,470.179 726.372,630.863 483.087,815.000 L36.000,815.000 
        L36.000,38.776 L325.482,36.000 Z" />
    </g>
</svg>
Tags:

2

Answers


  1. 0

    Just insert an image element between defs and g.
    Here is an example:

    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="100%" width="100%"/>

    See the full spec for image elements here

    Login or Signup to reply.
  2. 0

    You can use the path as a clipping path for an image.

     <clipPath id="clip">
          <path
            d="M325.482,36.000 C325.482,36.000 251.567,261.626
               539.526,431.976C604.104,470.179 726.372,630.863 483.087,815.000
               L36.000,815.000L36.000,38.776 L325.482,36.000 Z" />
 </clipPath>

    Next you need an <image> element. You may clip the image with the clipping path id="clip":

    <image xlink:href="whatever.jpg" clip-path="url(#clip)"/>

    Here is an example:

    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="651px" height="838px">
    <defs>
        <filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="0px" 
            width="651px" height="838px">
        <feOffset in="SourceAlpha" dx="-7.314" dy="-6.82" />
        <feGaussianBlur result="blurOut" stdDeviation="5.477" />
        <feFlood flood-color="rgb(1, 80, 50)" result="floodOut" />
        <feComposite operator="atop" in="floodOut" in2="blurOut" />
        <feComponentTransfer>
        <feFuncA type="linear" slope="0.28" />
        </feComponentTransfer>
        <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
        </feMerge>
        </filter>
      <clipPath id="clip">
      <path
        d="M325.482,36.000 C325.482,36.000 251.567,261.626 539.526,431.976 
        C604.104,470.179 726.372,630.863 483.087,815.000 L36.000,815.000 
         L36.000,38.776 L325.482,36.000 Z" />
        </clipPath>
        </defs>
        <g filter="url(#Filter_0)">
     <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pipes.jpg" clip-path="url(#clip)"/>  
      </g>
    </svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search