How to add SVG files to html or CSS?-CodePudding

So as you can see here, I have used image tag to add an SVG that in my github repository, but I am unable to see it, when I turn on the live preview it just shows an image icon in the place of my actual logo, I have also tried to add the file using CSS but it has the same problem.

https://github.com/Alucard2169/Third.git here is the link to my GITHUB repo, as you can see I have put all my media file in side the media folder.

.main_heading::before {
  content: url(media/logo.svg);
  display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=default-width, initial-scale=1">
        <meta charset="UTF-8">
        <meta lang="en">
        <link href="style.css" rel="stylesheet">
    </head>
    
    <body>
        <header>
            <div class="logo">
                <img src="media/logo.svg">
            </div>
            <h1 class="main_heading">
                A history of everything you copy
            </h1>
            <article class="main_content">Clipbord allows you to track and organize everything you copy instantly access your clipboard on all your devices.</article>

            <bottoom class="ios">
                Download for iOS
            </bottoom>
            <bottom class="mac">
                Download for Mac
            </bottom>
        </header>
    </body>
</html>

CodePudding user response：

where do you try to run this from? i guess it can't find the file. Have you tried to add / front of media folder?

like : /media/logo.svg

that will look the media folder in the root of the page.

CodePudding user response：

When linking a file in css through url(), you have to give ./. This is shown below, but this only works if your html file is outside the media folder.

.main_heading::before {
  content: url(./media/logo.svg); 
  display: block;
}

CodePudding user response：

Your img tag should have a self closing tag like this: <img src="./logo.png" />.

But in this case, both your html and img files should be in same folder.