SVG Icon getting distorted against transparent background

Question

I am trying to display an svg icon against transparent background, however, when the transparent background is applied the svg looks like this:

ideally, I am expecting the svg icon to look like the first svg icon. One important thing to note here is that the background will dynamically be applied.

Here is the svg code:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path
                d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z"
                fill='white'
                opacity={0.8}
            ></path>

Answer 1

get rid of the fill="none" inside svg tag, if you want background dynamically applied.

also you could look closer to your svg on https://yqnn.github.io/svg-path-editor/

I changed it a bit

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.1 0.1 16 16">
  <path d="M 8 0.5 C 12.1 0.5 15.5 3.9 15.5 8 C 15.5 12.1 12.1 15.5 8 15.5 C 3.9 15.5 0.5 12.1 0.5 8 C 0.5 3.9 3.9 0.5 8 0.5 Z M 10.2 11.4 H 5.8 C 6.3 13.2 7.1 14.4 8 14.4 C 8.9 14.4 9.7 13.2 10.2 11.4 H 10.2 Z M 4.6 11.4 H 2.6 C 3.3 12.5 4.4 13.4 5.7 13.9 C 5.3 13.3 4.9 12.5 4.7 11.7 L 4.6 11.4 L 4.6 11.4 Z M 13.4 11.4 H 11.4 C 11.1 12.4 10.8 13.3 10.3 13.9 C 11.5 13.5 12.6 12.6 13.3 11.6 L 13.4 11.4 V 11.4 Z M 4.3 6.5 H 1.8 L 1.8 6.5 C 1.7 7 1.6 7.5 1.6 8 C 1.6 8.8 1.8 9.6 2 10.3 H 4.4 C 4.2 9 4.2 7.7 4.3 6.5 L 4.3 6.5 Z M 10.5 6.5 H 5.5 C 5.3 7.7 5.4 9 5.6 10.3 H 10.4 C 10.6 9 10.7 7.7 10.5 6.5 Z M 14.2 6.5 H 11.7 C 11.7 7 11.8 7.5 11.8 8 C 11.8 8.8 11.7 9.5 11.6 10.3 H 14 C 14.2 9.5 14.4 8.8 14.4 8 C 14.4 7.5 14.3 7 14.2 6.5 Z M 5.7 2.1 L 5.6 2.1 C 4.1 2.7 2.9 3.9 2.2 5.4 H 4.5 C 4.7 4.1 5.1 2.9 5.7 2.1 H 5.7 Z M 8 1.6 L 7.9 1.6 C 7 1.7 6 3.2 5.6 5.4 H 10.4 C 10 3.2 9 1.7 8.1 1.6 L 8 1.6 V 1.6 Z M 10.3 2.1 L 10.4 2.2 C 10.9 3 11.3 4.1 11.5 5.4 H 13.8 C 13.2 3.9 12 2.8 10.6 2.2 L 10.3 2.1 V 2.1 Z" fill="#fff"/>
</svg>

transparent globe svg inside my button

it looks exactly as you wanted

Answer 2

The posted image with the transparent background looks like the checkered background in Photoshop. Not a real life situation.

However you are mentioning that The background is dynamic. It can be changed to any color. and this is a problem since your icon is white.

Here is a what you can do: you can use an outline filter around your icon. This way it will be visible on every background.

As an observation: 16px width and height is way too small. I would recomend at least 24px.

 svg{border:solid}

 <svg xmlns="http://www.w3.org/2000/svg" width="160" viewBox="0 0 16 16" fill="none"> <filter id="outline"> <feMorphology in="SourceAlpha" operator="dilate" radius=".5"/> <feComposite in="SourceGraphic"/> </filter> <path id="globe" filter="url(#outline)" d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z" fill='white' opacity="0.8" ></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="160" viewBox="0 0 16 16" fill="none" style="background:black;"> <use xlink:href="#globe" filter="url(#outline)" fill='white'opac ity="0.8"></use> </svg>

Answer 3

At this scale, a shape that uses fill rather than just stroke to define the shape could give you problems because anti-aliasing might just give up.

If you don't want to recreate the shape using single strokes, then at least make it bigger and add a stroke-linejoin/round- because the shape itself isn't particularly well drawn.

 <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 16 16"> <path d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z" fill='grey' opacity='0.8' stroke="none" stroke-linejoin="round" ></path> </svg>