在 <img> 标记中使用具有非 `.svg` 扩展名的 SVG 图像答案

【问题标题】：Use an SVG image with non `.svg` extension in <img> tag在 <img> 标记中使用具有非 `.svg` 扩展名的 SVG 图像
【发布时间】：2019-07-14 18:26:27
【问题描述】：

我正在尝试在 <img> 标记中显示 SVG，但 SVG 文件没有 .svg 扩展名。

有几件事，

文件扩展名不是.svg，而是文件中的内容IS svg。
我需要使用<img> 标记，因为忽略SVG 文件（如果有）中的宽度和高度并改用HTML/CSS 中定义的值很重要。 我无法编辑 SVG 文件的内容，这些内容是随机上传的，我不想在每次上传时都修改它们。
我可以使用 PHP 从 SVG 中读取数据，但仍需要在 <img> 标签中显示。

目前，当我尝试使用具有 SVG 内容但没有 SVG 文件扩展名的 SVG 时，它会表现得好像无法加载图像一样。

但是，如果我在网络浏览器中访问相同的 URL，它会正常显示 SVG，不管它没有 .svg 扩展名。

<img src="https://di.community/uploads/monthly_2019_02/D-00023_svg.614976c7cefbcc2e89ab406b11f87800" />

在不修改 SVG 文件且不使用 .svg 扩展名的情况下，如何在仍使用 <img> 标记确定宽度/高度的同时正确显示 SVG。

我尝试了以下方法，但宽度/高度仍然是 SVG 中使用的，而不是我在 HTML/CSS 中定义的。

    <span style='display: inline-block; margin: 0px; width: 35px !important; height: 35px !important;'>
        <?php echo file_get_contents('https://di.community/uploads/monthly_2019_02/D-00023_svg.614976c7cefbcc2e89ab406b11f87800'); ?>
    </span>

【问题讨论】：

标签： html css svg

【解决方案1】：

您可以直接在服务器上对文本进行 base-64 编码并将其直接注入到图像中，或者将源用作远程参考。

<img src="data:image/svg+xml;base64,<?php echo PHP_BASE64_STRING ?>" />
<img src="https://di.community/uploads/monthly_2019_02/D-00023_svg.614976c7cefbcc2e89ab406b11f87800" />

元素的naturalWidth 和naturalHeight 属性将给出图像的实际大小，而不是显示/渲染的大小。

下面的脚本会将 SVG 数据按原样注入到不应显示的块中。

HTML：

<script id="svgToCheck" type="script/no-execute">
  <?php echo file_get_contents('https://di.community/uploads/monthly_2019_02/D-00023_svg.614976c7cefbcc2e89ab406b11f87800'); ?>
</script>

JS：

function getImageSizeFromUrl(url) {
  return new Promise(function(resolve, reject) {
    const image = document.createElement('img');
    image.addEventListener('load', _ => resolve({ width: image.naturalWidth, height: image.naturalHeight }), false);
    image.addEventListener('error', reject, false);
    image.src = url;
  }
}


// get the SVG
const svgText = document.getElementById("svgToCheck").innerHTML.trim();

// convert to data url
const svgUrl = `data:image/svg+xml;base64,${window.btoa(svgText)}`;

// get the size
getImageSizeFromUrl(svgUrl).then(size => console.log(size.width, size.height));

【讨论】：

【解决方案2】：

改用<object> 标签。它使您有机会直接声明 MIME 类型。大小调整与<img> 标签一样。

<object type="image/svg+xml" data="myFile.extension"></object>

【讨论】：