如何通过内联style修改<img>标签中SVG的颜色？

直接说结论：无法通过<img>标签的内联style属性修改外部引用SVG的颜色。

原因 #

当你用<img>引用外部SVG文件时，该SVG会被浏览器当作独立的文档处理，<img>上设置的color或其他样式无法穿透到SVG内部。SVG的颜色由其自身代码中的fill、stroke等属性定义，外部样式（包括内联style）无法覆盖这些内部属性。

可行的内联解决方案（无需修改CSS样式表） #

1. 内联SVG代码到HTML中（最精准）

把SVG的代码直接嵌入HTML，而非通过<img>引用，这样就能直接给SVG内部的图形元素添加内联fill属性来指定颜色：

<a href="#" class="nav-link btn btn-outline-secondary d-flex border-0 w-100" style="color:#39384A;" data-toggle="tooltip" data-placement="right" title="Discord">
  <svg class="m-auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M19.5 2.75C19.815 3.421 20 4.15 20 4.925C20 5.699 19.815 6.429 19.5 7.101C18.981 7.647 18.404 8.114 17.783 8.496C18.129 9.092 18.349 9.748 18.428 10.443C18.449 10.685 18.459 10.928 18.459 11.172C18.459 11.415 18.449 11.658 18.428 11.9C18.349 12.595 18.129 13.251 17.783 13.847C18.404 14.229 18.981 14.696 19.5 15.242C19.815 15.913 20 16.643 20 17.418C20 18.192 19.815 18.922 19.5 19.593C19.185 20.264 18.714 20.866 18.129 21.366C17.544 21.867 16.868 22.258 16.137 22.519C15.406 22.78 14.639 22.91 13.858 22.91H10.142C9.361 22.91 8.594 22.78 7.863 22.519C7.132 22.258 6.456 21.867 5.871 21.366C5.286 20.866 4.815 20.264 4.5 19.593C4.185 18.922 4 18.192 4 17.418C4 16.643 4.185 15.913 4.5 15.242C5.019 14.696 5.596 14.229 6.217 13.847C5.871 13.251 5.651 12.595 5.572 11.9C5.551 11.658 5.541 11.415 5.541 11.172C5.541 10.928 5.551 10.685 5.572 10.443C5.651 9.748 5.871 9.092 6.217 8.496C5.596 8.114 5.019 7.647 4.5 7.101C4.185 6.429 4 5.699 4 4.925C4 4.15 4.185 3.421 4.5 2.75C4.815 2.079 5.286 1.477 5.871 0.977C6.456 0.476 7.132 0.085 7.863 -0.176C8.594 -0.437 9.361 -0.567 10.142 -0.567H13.858C14.639 -0.567 15.406 -0.437 16.137 -0.176C16.868 0.085 17.544 0.476 18.129 0.977C18.714 1.477 19.185 2.079 19.5 2.75ZM15.5 14.5C16.328 14.5 17 13.828 17 13C17 12.172 16.328 11.5 15.5 11.5C14.672 11.5 14 12.172 14 13C14 13.828 14.672 14.5 15.5 14.5ZM8.5 14.5C9.328 14.5 10 13.828 10 13C10 12.172 9.328 11.5 8.5 11.5C7.672 11.5 7 12.172 7 13C7 13.828 7.672 14.5 8.5 14.5Z" fill="#39384A"/>
  </svg>
</a>

如果原SVG内部有硬编码的fill值，直接替换为你需要的颜色即可。

2. 使用CSS滤镜近似替换颜色（适合快速调整）

通过filter属性组合调整颜色，虽然无法精准匹配目标色，但可以实现近似效果：

<a href="#" class="nav-link btn btn-outline-secondary d-flex border-0 w-100" style="color:#39384A;" data-toggle="tooltip" data-placement="right" title="Discord">
  <img class="m-auto" src="https://www.svgrepo.com/show/353655/discord-icon.svg" style="filter: invert(15%) sepia(10%) saturate(1000%) hue-rotate(210deg) brightness(95%) contrast(90%);">
</a>

可以自行调整滤镜参数来接近#39384A的颜色。

3. 将SVG转为Data URI并修改内部颜色

把SVG代码转为Data URI，同时在URI中修改fill属性（注意将#转义为%23）：

<a href="#" class="nav-link btn btn-outline-secondary d-flex border-0 w-100" style="color:#39384A;" data-toggle="tooltip" data-placement="right" title="Discord">
  <img class="m-auto" src="data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M19.5 2.75C19.815 3.421 20 4.15 20 4.925C20 5.699 19.815 6.429 19.5 7.101C18.981 7.647 18.404 8.114 17.783 8.496C18.129 9.092 18.349 9.748 18.428 10.443C18.449 10.685 18.459 10.928 18.459 11.172C18.459 11.415 18.449 11.658 18.428 11.9C18.349 12.595 18.129 13.251 17.783 13.847C18.404 14.229 18.981 14.696 19.5 15.242C19.815 15.913 20 16.643 20 17.418C20 18.192 19.815 18.922 19.5 19.593C19.185 20.264 18.714 20.866 18.129 21.366C17.544 21.867 16.868 22.258 16.137 22.519C15.406 22.78 14.639 22.91 13.858 22.91H10.142C9.361 22.91 8.594 22.78 7.863 22.519C7.132 22.258 6.456 21.867 5.871 21.366C5.286 20.866 4.815 20.264 4.5 19.593C4.185 18.922 4 18.192 4 17.418C4 16.643 4.185 15.913 4.5 15.242C5.019 14.696 5.596 14.229 6.217 13.847C5.871 13.251 5.651 12.595 5.572 11.9C5.551 11.658 5.541 11.415 5.541 11.172C5.541 10.928 5.551 10.685 5.572 10.443C5.651 9.748 5.871 9.092 6.217 8.496C5.596 8.114 5.019 7.647 4.5 7.101C4.185 6.429 4 5.699 4 4.925C4 4.15 4.185 3.421 4.5 2.75C4.815 2.079 5.286 1.477 5.871 0.977C6.456 0.476 7.132 0.085 7.863 -0.176C8.594 -0.437 9.361 -0.567 10.142 -0.567H13.858C14.639 -0.567 15.406 -0.437 16.137 -0.176C16.868 0.085 17.544 0.476 18.129 0.977C18.714 1.477 19.185 2.079 19.5 2.75ZM15.5 14.5C16.328 14.5 17 13.828 17 13C17 12.172 16.328 11.5 15.5 11.5C14.672 11.5 14 12.172 14 13C14 13.828 14.672 14.5 15.5 14.5ZM8.5 14.5C9.328 14.5 10 13.828 10 13C10 12.172 9.328 11.5 8.5 11.5C7.672 11.5 7 12.172 7 13C7 13.828 7.672 14.5 8.5 14.5Z' fill='%2339384A'/></svg>">
</a>

内容的提问来源于stack exchange，提问作者Karla Cossío