Why is the page with svg not displayed in the browser and how to achieve display?

Question

HTML

<div style="background: url('./Vector-2.svg') no-repeat; background-size: 100% 500px;"></div>

Does not appear as a background. And in the form of a non-background image, it is also not displayed. It is displayed only if you use the object tag along with the picture, but I need it as a background.

I read that it is necessary to place the entry xlink:href="data:image/png; in the code of the svg file itself, but I do not understand where it should be located.

<svg width="3840" height="1202" viewBox="0 0 3840 1202" fill="none" xmlns=" http://www.w3.org/2000/svg " xlink:href="data:image/png;">

So it doesn't show up.

Answer 1

Embed SVG in CSS

background: url(data:image/svg+xml,Здесь URL-кодированный SVG)

You can translate to URL-encoded via rawurlencode in PHP or online, for example here .