在HTML中引用SVG的方法有很多，这里我们介绍一种常用的方法：使用<img>标签，将SVG文件转换为Base64编码的字符串，然后将其作为src属性的值传递给<img>标签，这样，浏览器就会自动解析并显示SVG图像，下面是一个简单的示例：
1、我们需要创建一个SVG文件，创建一个名为logo.svg的文件，内容如下：
<!-logo.svg --> <svg width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" /> </svg>
2、我们需要将SVG文件转换为Base64编码的字符串，可以使用在线工具(如https://www.base64-image.de/)进行转换，假设我们已经将logo.svg转换为Base64编码的字符串data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KPHN0eWxlPi5jbGFzczFtbS8xOTYtLXNlcnZpY2UuY29tL3RpdGxlPmVuZG9iago8PC9zdmc+Cg==。
3、我们在HTML文件中使用<img>标签引用SVG图像：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML中的SVG引用示例</title>
</head>
<body>
<!-引用SVG图像 -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KPHN0eWxlPi5jbGFzczFtbS8xOTYtLXNlcnZpY2UuY29tL3RpdGxlPmVuZG9iago8PC9zdmc+Cg==" alt="Logo" />
</body>
</html>
现在，当我们打开这个HTML文件时，浏览器会显示一个红色的圆形图标，这就是我们引用的SVG图像。
相关问题与解答：
问题1:如何将SVG文件转换为Base64编码的字符串？
答案：可以使用在线工具(如https://www.base64-image.de/)进行转换，将SVG文件拖放到工具中，然后点击“Encode”按钮，即可得到Base64编码的字符串。
问题2:如何在HTML中引用外部SVG文件？
答案：确保SVG文件位于与HTML文件相同的目录下，或者提供完整的文件路径，在HTML文件中使用<img>标签引用SVG文件，如下所示：
<img src="path/to/your/svg/file.svg" alt="SVG Image" />
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/318854.html
微信扫一扫 