Question

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

几件事，

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

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

但是，如果我在Web浏览器中访问相同的URL，则无论它没有.svg扩展名，它都会显示SVG。

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

如何在不修改SVG文件且没有<img>扩展名的情况下，仍然使用.svg标签确定宽度/高度的同时使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>

Answer 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));

Answer 2

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

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

在<img/>标签

2 个答案: