51

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>
5
  • 1
    Haha there are lots of them, I think they feel strong hiding behind their computers. Good luck with your problem
    – Cleverbot
    Jul 16, 2012 at 1:40
  • I didn't downvote you, but perhaps it's because the code you posted is for applying a dropshadow, not an image fill! Jul 16, 2012 at 8:04
  • Nevermind, the non-working code for fill is offscreen. When posting code try to reduce it to the minimum. Jul 16, 2012 at 8:12
  • You can't reference a PNG directly from a fill or stroke attribute at the moment. You'll have to wrap the image in a pattern element and define how it should be tiled and scaled. See the answer from Duopixel. Jul 16, 2012 at 10:42
  • 2
    possible duplicate of Fill SVG path element with a background-image Jul 16, 2012 at 13:58

5 Answers 5

44

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>
6
  • It is possible to do with SVG filters too, but patterns is the natural answer. Jul 16, 2012 at 10:36
  • 6
    Can we stop replicate png display in background using fill. In this case it will keep replicating the image in background. Is it possible to display pattern only once? I mean no tiling...
    – vicky
    Feb 13, 2013 at 15:46
  • 3
    closing defs tag missing
    – dev4life
    Sep 27, 2013 at 16:05
  • 3
    Is there a way to stop the pattern from repeating, having it scale to fit instead? Sep 7, 2015 at 13:12
  • 2
    This technique doesn't work at all. You HAVE to use the method in Teo Inke's answer. And even then, that breaks when you try to transform in any way (i.e. scaling, etc). Jun 25, 2016 at 16:43
32

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)

3
  • 3
    Even I couldn't get it working with the accepted answer. Thanks for your answer.
    – Nav
    Oct 27, 2014 at 11:45
  • 4
    How do I stop it from repeating? also it's not scalling properlly
    – Astronaut
    Oct 27, 2014 at 15:19
  • DIscovered that the key to centering my image in a circle was to set x and y attributes on the <pattern> to half the width/height ("x" above). Still haven't found an explanation for why the <pattern>'s width/height have to exceed the image's dimensions to eliminate borders (padding?), but that has been my experience as well.
    – brichins
    Nov 29, 2016 at 22:36
16

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>
13

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>
1
  • 4
    this works but image is coming in rectangle? circle should be filled entirely with bg image. May 24, 2016 at 12:54
2

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>
1
  • I tried your solution but it didn't work for me. I couldn't see the image. I use the debugging and it clearly showed me the image was in good position but nothing to display and I verified that my image was an valid image.
    – Thierry
    Jan 17, 2017 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.