svg circle in html5 | Sololearn: Learn to code for FREE!


svg circle in html5

how i can fill the circle with image ??I try the below code but its not work can anybody help me please ?? <svg width="2000" height="2000"> <circle cx="400" cy="400" r="300" style="fill:download.jpg; stroke:yellow; stroke-width:3;" /> </svg>

3/23/2019 5:58:42 AM

Sanaa Hareb

4 Answers

New Answer


background-image : url('http://..../..jpg')



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>


Check it out guy's Super Man logo Using SVG