How to fill the background in the SVG around the object so that the background inside the object remains transparent? something like this, only without rounding corners. Thank! https://www.iconfinder.com/icons/246717/bookmark_favorite_square_star_icon#size=256

enter image description here

  • Hmm .. They manage to sell any nonsense ... - Qwertiy ♦

3 answers 3

We take near a free star (although I would have done it myself):

<svg height="24px" version="1.1" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="Artboard-1" transform="translate(-683.000000, -263.000000)"><g id="slice" transform="translate(215.000000, 119.000000)"/><path d="M694.98491,281.136378 L688.186537,286 L690.536373,277.987539 L684,272.561762 L691.949829,272.493347 L694.98491,264 L697.936034,272.561768 L706,272.561768 L699.433447,278.040327 L701.783283,286 L694.98491,281.136378 L694.98491,281.136378 Z" fill="#000000" id="common-star-favorite-bookmark-glyph"/></g></g></svg>

and clean:

 body { margin: 0; background: linear-gradient(to bottom, red, blue); } svg { display: block; height: 100vmin; width: 100vmin; margin: auto; } 
 <svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"> <g transform="translate(-683.000000, -263.000000)"> <path d="M694.98491,281.136378 L688.186537,286 L690.536373,277.987539 L684,272.561762 L691.949829,272.493347 L694.98491,264 L697.936034,272.561768 L706,272.561768 L699.433447,278.040327 L701.783283,286 L694.98491,281.136378 L694.98491,281.136378 Z" fill="#000000" /> </g> </g> </svg>

and still clean:

 console.log( "M694.98491,281.136378 L688.186537,286 L690.536373,277.987539 L684,272.561762 L691.949829,272.493347 L694.98491,264 L697.936034,272.561768 L706,272.561768 L699.433447,278.040327 L701.783283,286 L694.98491,281.136378 L694.98491,281.136378 Z" .replace(/(\d+\.?\d*),(\d+\.?\d*)/g, (m,x,y)=>`${(x-683).toFixed(3)},${(y-263).toFixed(3)}`) ) 

 body { margin: 0; background: linear-gradient(to bottom, red, blue); } svg { display: block; height: 100vmin; width: 100vmin; margin: auto; } 
 <svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" stroke="none" stroke-width="1" fill="#000" d="M11.985,18.136 L5.187,23.000 L7.536,14.988 L1.000,9.562 L8.950,9.493 L11.985,1.000 L14.936,9.562 L23.000,9.562 L16.433,15.040 L18.783,23.000 L11.985,18.136 L11.985,18.136 Z" /> </svg>

Now add the rectangle M0,0H24V24H-24Z :

It should be noted that the fill-rule="evenodd" .

 body { margin: 0; background: linear-gradient(to bottom, red, blue); } svg { display: block; height: 100vmin; width: 100vmin; margin: auto; } 
 <svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" stroke="none" stroke-width="1" fill="#000" d="M0,0H24V24H-24ZM11.985,18.136 L5.187,23.000 L7.536,14.988 L1.000,9.562 L8.950,9.493 L11.985,1.000 L14.936,9.562 L23.000,9.562 L16.433,15.040 L18.783,23.000 L11.985,18.136 L11.985,18.136 Z" /> </svg>

Done!

    If you work in Incscape, you can create a square with rounded edges, and put a star on it

    two objects

    and then in the Contour menu, after selecting both objects with Shift, press Difference. Contour menu It should be exactly what you want!

      The clipPath inside the clipPath must be created so that you first go around all the extreme points of the block and return to the initial one, and then proceed to cut. For convenience, relative units of measurement and animation are used to illustrate the cut.

       body { animation: bg 5s forwards; } @keyframes bg { from { background-color: #fff; } to { background-color: #ccc; } } 
       <svg width="500" height="500" viewBox="0 0 500 500"> <defs> <clipPath id="clip" clipPathUnits="objectBoundingBox"> <polygon points="0,0 1,0 1,1 0,1 0,0 .50,.02 .39,.35 .02,.35 .32,.57 .21,.91 .50,.70 .79,.91 .68,.57 .98,.35 .61,.35 .5,.02"></polygon> </clipPath> </defs> <rect width="100%" height="100%" clip-path="url(#clip)"></rect> </svg>

      • But why the clip-path? - Qwertiy ♦
      • To cut another shape out of a shape, obviously. - Sasha Omelchenko
      • But it is much more effective not to cut, but to make the desired shape right away? - Qwertiy ♦
      • I saw your option if you are about this. - Sasha Omelchenko
      • In addition to my option there is an option to draw exactly the area that is needed (without evenodd). There is another option with a mask. And the clip-path seems to me the most expensive. It is better to use it for other purposes. Or am I wrong? - Qwertiy ♦