如何将 SVG 文件添加到 html 或 CSS？答案

【问题标题】：How to add SVG files to html or CSS?如何将 SVG 文件添加到 html 或 CSS？
【发布时间】：2021-10-01 07:12:06
【问题描述】：

正如您在此处看到的，我使用图像标签在我的 github 存储库中添加了一个 SVG，但我无法看到它，当我打开实时预览时，它只显示一个图像图标代替我的实际徽标，我也尝试使用 CSS 添加文件，但它有同样的问题。

https://github.com/Alucard2169/Third.git 这是我的 GITHUB 存储库的链接，如您所见，我已将所有媒体文件放在媒体文件夹中。

.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>

【问题讨论】：

您可以添加您目录的屏幕截图吗？ HTML 文件在哪里？

标签： html css frontend

【解决方案1】：

当通过url()链接css中的文件时，你必须给./。如下所示，但这仅适用于您的 html 文件位于媒体文件夹之外的情况。

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

【讨论】：

【解决方案2】：

你的 img 标签应该有一个像这样的自闭标签：<img src="./logo.png" />。

但在这种情况下，您的 html 和 img 文件都应该在同一个文件夹中。

【讨论】：