Setting Rounded Corners for Svg:Image

Setting rounded corners for svg:image

'border-radius' doesn't apply to svg:image elements (yet anyway). A workaround would be to create a rect with rounded corners, and use a clip-path.

An example.

The relevant part of the source:

<defs>
    <rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/>
    <clipPath id="clip">
      <use xlink:href="#rect"/>
    </clipPath>
  </defs>

  <use xlink:href="#rect" stroke-width="2" stroke="black"/>
  <image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/>

It's also possible to create several rect elements instead of using <use>.

How to embed an image with rounded corners in svg

You can apply the same clipPath to multiple elements like this...

<!DOCTYPE html>
<html>
<body>

<svg width="640" height="800">

    <clipPath id="clip" clipPathUnits="objectBoundingBox">
        <rect ry="0.1" width="1" height="1" fill="black" />
    </clipPath>

    <rect x="280" y="0" width="80" height="100"
    style="fill:limegreen;" clip-path="url(#clip)" />

    <rect x="260" y="90" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />

    <rect x="200" y="150" width="80" height="100"
    style="fill:limegreen;" clip-path="url(#clip)" />

    <rect x="180" y="240" ry="15" width="120" height="30"
    style="fill:mintcream; stroke:black;" />

</svg>

</body>
</html>

How to round image inside svg

these are some options:

1) absolute position - place the SVG path inside a container and place an absolute positioned circled div with a background image on top of the path.

HTML/SVG:

<div class="container">
  <div class="circle-div"> </div>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40">
     <path fill-rule="evenodd" clip-rule="evenodd" fill="#026890"  d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
        c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
        c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
        c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
        c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
        c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
        c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
        c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
        </svg>
</div>

CSS:

.container {
  position: relative;
}

.circle-div {
  border-radius: 50%;
  background-image: url('http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg');
  width: 25px;
  height: 25px;
  background-size: cover;
  background-position: 25% 25%;
  position: absolute;
  left: 7.5px;
  top: 2.5px;
}

2) SVG clipPath - place an SVG image on top the SVG path and clip it with a circle. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40">
    <defs>
        <clipPath  patternUnits="userSpaceOnUse" id="clip">
          <circle cx="50%" cy="40%" r="13" ></circle>
        </clipPath>
    </defs>

        <image preserveAspectRatio="xMidYMid slice" clip-path="url(#clip)" x="5" y="2" width="100%" height="65%" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"></image> 
            <path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890"  d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
        c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
        c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
        c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
        c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
        c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
        c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
        c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>

</svg>

3) SVG pattern - place an SVG circle on top the SVG path and fill it with a pattern that is the image itself.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40">
    <defs>
       <pattern  id="pf" x="0" y="0" height="100%" width="100%"
             viewBox="0 0 960 420" preserveAspectRatio="xMinYMid slice">
      <image x="-150" y="11" width="960" height="420" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg" ></image>
    </pattern>
    </defs>

    <circle cx="50%" cy="40%" r="13"  fill="url(#pf)"></circle>
        <path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890"  d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
    c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
    c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
    c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
    c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
    c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
    c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
    c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>

</svg>

I think the easiest solution in this case is to go with CSS, as it requires less position-tweaking to get proper results.

demo

How to create rounded corners in semi circle SVG

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="103px" viewBox="0 0 200 103" enable-background="new 0 0 200 103" xml:space="preserve">
<path fill="none" stroke="#000000" stroke-width="8.774" stroke-linecap="round" stroke-miterlimit="10" d="M195.675,98.851
    c0-52.17-42.822-94.463-95.644-94.463c-52.823,0-95.644,42.293-95.644,94.463"/>
</svg>

Creating a border with rounded corners using SVG masks results in lighter corners

You don't need to mask both the image and the border. Just mask the image, then draw a 1px black border on top of it.

<svg width="76" height="76">

  <defs>

    <mask id="myMask">

      <rect fill="#fff" rx="15" ry="15" width="76" height="76"/>

    </mask>

  </defs>

  <rect id="image" mask="url(#myMask)" fill="#fff" x="0" y="0" width="76" height="76" />

  <rect id="border" fill="none" stroke="#000" stroke-width="1" x="0.5" y="0.5" width="75" height="75" rx="15" ry="15" />

</svg>

Border radius in SVG

I am not sure there is way to round SVG in HTML (like apply CSS?), but you can use an SVG to the editor to the edits. I use Figma to edit this, but any vector-based graphic solution should be fine I guess.

<svg width="48" height="59" viewBox="0 0 48 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="19" rx="4" fill="#00C7B2"/>
<path d="M25.8629 58.0196C24.6968 58.6333 23.3032 58.6333 22.1371 58.0196L2.13714 47.4942C0.822862 46.8025 0 45.4396 0 43.9545V14C0 11.7909 1.79086 10 4 10H44C46.2091 10 48 11.7909 48 14V43.9545C48 45.4396 47.1771 46.8025 45.8629 47.4942L25.8629 58.0196ZM46.1538 45.6013H46.1899H46.1538Z" fill="#00C7B2"/>
<path d="M4.40314 5.48826C2.21424 5.48826 2.8797 5.48826 4.40314 5.48826L23.7245 0.137201C21.9918 0.617057 23.9735 0.068235 24.2199 0V58.4334C24.2199 58.4334 25 58.5 27 57.5L46 47.3743C47.3063 46.6855 48 45.1546 48 43.6696V3.99145C48 1.78704 46.2255 4.52027e-06 44.0366 4.52027e-06L24.2199 0L4.40314 5.48826Z" fill="#00957A"/>
</svg>

Related Topics

Surprised That Global Variable Has Undefined Value in JavaScript

CSS Transition Doesn't Work with Top, Bottom, Left, Right

Dynamically Expand Height of Input Type "Text" Based on Number of Characters Typed into Field

Disable Images in Selenium Python

Jquery Equivalent of Yui Stylesheet Utility

Get/Set Current @Keyframes Percentage/Change Keyframes

Google Map Custom Marker with CSS Rounded Corner

Vertical Centering Variable Height Image While Maintaining Max-Width/Height

Setting Rounded Corners for Svg:Image

Jquery Animate() and Backgroundcolor

Repeat Animation Every 3 Seconds

How to Get a Leaflet Map Canvas to Have a 100% Height

Vue.Js - Add Class to Clicked Button

CSS Animation Onclick

How to Use JavaScript to Check and Load CSS If Not Loaded

Jquery or JavaScript - How to Disable Window Scroll Without Overflow:Hidden;

How to Get the Coordinates of a Mouse Click on a Canvas Element

How to Show a Running Progress Bar While Page Is Loading


Leave a reply



Submit