Use an SVG image with non `.svg` extension in <img> tag

Question

I'm trying to display an SVG in an <img> tag, but the SVG files don't have the .svg extension.

So a few things,

1. The file extension is not .svg, but the content within the file IS svg.
2. I need to use the <img> tag because it's important that I ignore the width and height in the SVG file (if any) and instead use the ones defined in my HTML/CSS. I cannot edit the contents of the SVG file, these are randomly uploaded and I don't want to be modifying them each time they are uploaded.
3. I can use PHP to read the data from the SVG, but it still needs to be displayed in the <img> tag.

Currently, when I try to use the SVG that has SVG content but no SVG file extension, it will act as though it couldn't load the image.

However, if I visit that same URL in my web browser, it will display the SVG fine regardless of the fact that it doesn't have a .svg extension.

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

How would I get the SVGs to display properly while still using the <img> tag to determine width/height, without modifying the SVG file and without an .svg extension.

I've tried the following, but the width/height is still used from the SVG and not the ones i define in 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

You can base-64 encode the text directly on the server and inject it directly into an image, or use the source as a remote reference.

• <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" />

The element's naturalWidth and naturalHeight properties will give the actual size of the image rather than the displayed/rendered size.

---

The script below will have the SVG data injected as-is into a block that shouldn't display.

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

Use an <object> tag instead. It gives you the opportunity to state the MIME type directly. Sizing works just as with <img> tags.

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