Используйте изображение SVG с расширением не `.svg` в теге <img>

Question

Я пытаюсь отобразить SVG в теге <img>, но файлы SVG не имеют расширения .svg.

Итак, несколько вещей,

1. Расширение файла не .svg, а содержимое в файле IS svg.
2. Мне нужно использовать тег <img>, потому что важно, чтобы я игнорировал ширину и высотув файле SVG (если есть) и вместо этого используйте те, которые определены в моем HTML / CSS. Я не могу редактировать содержимое файла SVG, оно загружается случайным образом, и я не хочу изменять его при каждой загрузке.
3. Я могу использовать PHP для чтения данныхиз SVG, но он все еще должен отображаться в теге <img>.

В настоящее время, когда я пытаюсь использовать SVG, который имеет содержимое SVG, но не имеет расширения файла SVG, он будет действовать какхотя он не мог загрузить изображение.

Однако, если я зайду на тот же 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

Вместо этого используйте тег <object>.Это дает вам возможность напрямую указывать тип MIME.Размер работает так же, как с <img> тегами.

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

Answer 2

Вы можете 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));