如何在HTML中添加可跳转至LinkedIn页面的LinkedIn SVG图标？

给你两种纯HTML/CSS就能搞定的方案，适合新手操作：

方法1：直接内嵌SVG代码（最稳妥） #

把LinkedIn的SVG代码直接写在链接标签里，不用纠结文件路径和命名空间问题，浏览器百分百能识别：

<a href="你的LinkedIn个人页面URL" target="_blank" rel="noopener noreferrer">
  <svg width="32" height="32" viewBox="0 0 24 24" fill="#0077b5" xmlns="http://www.w3.org/2000/svg">
    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
  </svg>
</a>

• 调整width和height可以改变图标大小
• fill="#0077b5"是LinkedIn官方蓝色，可自行替换颜色
• target="_blank"让链接在新窗口打开，rel="noopener noreferrer"是安全规范
• 把你的LinkedIn个人页面URL换成你自己的主页地址

方法2：用img标签引入本地SVG文件 #

如果坚持用本地SVG文件，必须注意两个关键点：

1. SVG文件开头必须加正确的命名空间声明：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <!-- 这里放LinkedIn的路径代码 -->
</svg>

2. HTML里的文件路径要准确（比如SVG和HTML在同一文件夹，就写src="linkedin.svg"）

<a href="你的LinkedIn个人页面URL" target="_blank" rel="noopener noreferrer">
  <img src="linkedin.svg" alt="LinkedIn图标" width="32" height="32">
</a>

• 本地能显示但浏览器不行，大概率是SVG没加xmlns命名空间，或者路径写错了

关于命名空间的简单说明 #

SVG是基于XML的图形格式，浏览器需要xmlns="http://www.w3.org/2000/svg"这个声明来识别这是SVG元素，而非普通HTML标签。本地编辑器对规则要求宽松，但浏览器会严格遵循标准，没加的话就会显示异常。

内容的提问来源于stack exchange，提问作者Rach22