How can I display an image inside SVG circle in html5?

by

Here is an example elaborating on Havenard’s comment above:

<svg width="500" height="250">
    <defs>
        <clipPath id="circleView">
            <circle cx="250" cy="125" r="125" fill="#FFFFFF" />
        </clipPath>
    </defs>
    <image 
      width="500" 
      height="250" 
      xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg" 
      clip-path="url(#circleView)"
    />
 </svg>

You don’t actually draw a <circle> element with an image inside – instead, define a circular clip path, and set it as the ‘clip-path’ attribute on the <image> tag.

More Related Contents:

  1. Fill SVG path element with a background-image
  2. How to display Base64 images in HTML
  3. How to modify the fill color of an SVG image when being served as background image?
  4. SVG drop shadow using css3
  5. Is element block level or inline level?
  6. How to prevent downloading images and video files from my website?
  7. Convert web page to image [closed]
  8. Should I specify height and width attributes for my IMGs in HTML?
  9. Embed image in a element
  10. make an html svg object also a clickable link
  11. Using base tag on a page that contains SVG marker elements fails to render marker
  12. CSS image resize percentage of itself?
  13. Image scaling causes poor quality in firefox/internet explorer but not chrome
  14. How do I scale a stubborn SVG embedded with the tag?
  15. CSS: How can I set image size relative to parent height?
  16. Controlling image load order in HTML
  17. How to strike through obliquely with css
  18. Method to convert HTML5 canvas to SVG?
  19. SVG image inside circle
  20. CSS transform origin issue on svg sub-element
  21. How do I create a teardrop in HTML?
  22. Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]
  23. Create a Reverse Clip-Path – CSS or SVG
  24. Resizing SVG in html?
  25. Accessibility: recommended alt-text convention for SVG and MathML?
  26. Make Bootstrap’s Carousel both center AND responsive?
  27. Use the HTML tag as a background image instead of the CSS background-image property?
  28. How to set a microdata image property, without letting the browser download the image?
  29. How to serve up images in Angular2?
  30. What are all the differences between src and data-src attributes?

Leave a Comment