CODEWITHSUNDEEP
htmlcsssvg
icanc
icanc

Reputation: 3577

Add a background image (.png) to a SVG circle shape

Is this possible? The following is what I tried but it completely fills the circle with black.

<svg id='vizMenu' width="700" height="660">
    <defs>
        <filter id="dropshadow" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
            <feOffset dx="0.5" dy="0.8" result="offsetblur"/> 
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
    <circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
    <circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/>
</svg>

Upvotes: 53

Views: 104371

Answers (5)

Photon Khan
Photon Khan

Reputation: 451

Image repetition problem solved with proper explanation (Thanks to AmeliaBR)

TL;DR: The concept of objectBoundingBox and preserveAspectRatio are used!

<svg height="10%" width="10%">
  <defs>
    <pattern id="attachedImage" height="100%" width="100%" patternContentUnits="objectBoundingBox">
       <image xlink:href="url.png" preserveAspectRatio="none" width="1" height="1"/>
    </pattern>
  </defs>
  <circle cx="50%" cy="50%" r="35%" fill="url(#attachedImage)"/>
</svg>

Upvotes: 17

Teo Inke
Teo Inke

Reputation: 5986

Well, I couldn't make it work with the accepted answer. This is how I ended up doing it:

    <svg width="100" height="100">
      <defs>
        <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
          <image x="0" y="0" height="100" width="100" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
        </pattern>
      </defs>
      <circle id='top' cx="50" cy="50" r="50" fill="url(#image)"/>
    </svg>

If you want to customize the size, use this as a scale reference:

x = yourPreferredSize

<svg width=">2x" height=">2x">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height=">2x" width=">2x">
      <image x="0" y="0" height="2x" width="2x" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image>
    </pattern>
  </defs>
  <circle id='top' cx="x" cy="x" r="x" fill="url(#image)"/>
</svg>

(This scale works for squared images)

Upvotes: 32

Lukeus_Maximus
Lukeus_Maximus

Reputation: 513

This is my solution, the differences are that this doesn't use the patternUnits="userSpaceOnUse" and that you specify the desired width and height of the image element.

<defs>
    <pattern id="{some name}" x="0" y="0" width="1" height="1">
        <image href="{image url}" x="0" y="0" width="{desired width}" height="{desired height}"></image>
    </pattern>
</defs>

Upvotes: 2

Arian Faurtosh
Arian Faurtosh

Reputation: 18491

I know this is an old question, but I used a filter to overlay the image. The above solution didn't work for me because of scaling and it seemed like the images was tiled. I used this instead, I hope it will help others as well.

<svg width="700" height="660">
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%">
        <feImage xlink:href="test_image.png"/>
    </filter>
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" />
</svg>

Upvotes: 13

methodofaction
methodofaction

Reputation: 72385

An image fill for an svg element is achieved through SVG Patterns...

<svg width="700" height="660">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>

Upvotes: 45

Related Questions