防止图标的 SVG 背景出血？

Question

The goal is to prevent background bleed of SVG icons so they can appear as standalone files. Many answers to similar questions suggest putting a DIV or other container around the SVG element to prevent bleed, but the goal is to make the SVG icon stand alone without any dependency on a container.

Prepending a rect element to act as a background element doesn't work reliably as this method breaks for certain viewport aspect ratios.

Is this possible?

Note: to see the flaw, you must download and open the SVG file in the browser. Using JSFiddle/CodePen hides the problem because those sites encapsulate the SVG in a container (which fixes the bleed issue).

Download SVG here: https://gofile.io/?c=eKzjk7

Example SVG:

 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255, 120, 50)" style="background-color: rgb(255, 255, 102); border-radius: 0%"> <path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/> </svg>

Ideal output:

Actual output:

Answer 1

Use a gradient and disable the repeat to avoid this:

 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255, 120, 50)" style="background:linear-gradient(rgb(255, 255, 102),rgb(255, 255, 102)) no-repeat; border-radius: 0%"> <path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/> </svg>

I don't know exactly how to explain this but it behaves the same as background propagation from html to canvas

Example of the issue

 html { width:50px; height:50px; background-color:red; }

Fixed with gradient

 html { width:50px; height:50px; background:linear-gradient(red,red) no-repeat; }

Since there is a propagation, border-radius won't have any effect so an idea would be to use a radial-gradient :

 html { width:50px; height:50px; background:radial-gradient(farthest-side,red 97%,transparent 100%) no-repeat; }

In case you want any kind of border-radius here is another idea with more background layers:

 html { --r:25px; /* adjust this to control the Radius (Max value = width/2) */ --c:red; width:100px; height:100px; background: radial-gradient(farthest-side at bottom left,var(--c) 97%,transparent 100%) top right /var(--r) var(--r), radial-gradient(farthest-side at top right,var(--c) 97%,transparent 100%) bottom left /var(--r) var(--r), radial-gradient(farthest-side at top left,var(--c) 97%,transparent 100%) bottom right /var(--r) var(--r), radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top left /var(--r) var(--r), linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--r)) 100%, linear-gradient(var(--c),var(--c)) center/100% calc(100% - 2*var(--r)); background-repeat:no-repeat; }

For a non rectangular icon:

 html { --rx:40px; /* adjust this to control the X Radius (Max value = width/2) */ --ry:75px; /* adjust this to control the Y Radius (Max value = height/2) */ --c:red; width:100px; height:150px; background: radial-gradient(farthest-side at bottom left,var(--c) 97%,transparent 100%) top right /var(--rx) var(--ry), radial-gradient(farthest-side at top right,var(--c) 97%,transparent 100%) bottom left /var(--rx) var(--ry), radial-gradient(farthest-side at top left,var(--c) 97%,transparent 100%) bottom right /var(--rx) var(--ry), radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top left /var(--rx) var(--ry), linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--rx)) 100%, linear-gradient(var(--c),var(--c)) center/100% calc(100% - 2*var(--ry)); background-repeat:no-repeat; }

And more fancy if you want to also simulate background-clip / background-origin

 html { --p:15px; /* offset from the edges*/ --rx:35px; /* Max value = width/2 - var(--p)*/ --ry:25px; /* Max value = height/2 - var(--p)*/ --c:red; width:120px; height:100px; background: radial-gradient(farthest-side at bottom left,var(--c) 97%,transparent 100%) top var(--p) right var(--p)/var(--rx) var(--ry), radial-gradient(farthest-side at top right,var(--c) 97%,transparent 100%) bottom var(--p) left var(--p)/var(--rx) var(--ry), radial-gradient(farthest-side at top left,var(--c) 97%,transparent 100%) bottom var(--p) right var(--p)/var(--rx) var(--ry), radial-gradient(farthest-side at bottom right,var(--c) 97%,transparent 100%) top var(--p) left var(--p) /var(--rx) var(--ry), linear-gradient(var(--c),var(--c)) center/calc(100% - 2*(var(--p) + var(--rx))) calc(100% - 2*var(--p)), linear-gradient(var(--c),var(--c)) center/calc(100% - 2*var(--p)) calc(100% - 2*(var(--p) + var(--ry))); background-repeat:no-repeat; }

Answer 2

I couldn't reproduce the problem you have. When I insert that svg everything is fine for me. Yellow background is only as big as circle. Would be good if you could provide CodePen or JSFiddle with your problem..

Here is what you can do.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="rgb(255, 120, 50)" style="background-color: rgb(255, 255, 102); border-radius: 0%; width: auto; height: auto;">

<path d="M8 11.5c0-.83-.67-1.5-1.5-1.5S5 10.67 5 11.5 5.67 13 6.5 13 8 12.33 8 11.5zm7-5c0-.83-.67-1.5-1.5-1.5h-3C9.67 5 9 5.67 9 6.5S9.67 8 10.5 8h3c.83 0 1.5-.67 1.5-1.5zM8.5 15c-.83 0-1.5.67-1.5 1.5S7.67 18 8.5 18s1.5-.67 1.5-1.5S9.33 15 8.5 15zM12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.96 0-9-4.04-9-9s4.04-9 9-9 9 4.04 9 9-4.04 9-9 9zm5.5-11c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-2 5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/>

</svg>

Note that I aded

width: auto;
height: auto;

This will make background as big as svg. If this is not what you were looking for write a comment so we can resolve a problem.