Search code examples
phphtmlcachingsvginline

Two Minimalistic Ways to place and display a single-graphic svg in HTML

// Updated question, skip the comments section, since all hints are implemented here //

Given a simple svg file logo.svg containing only 1 graphic(!) and an html page where we want to place the graphic into, with as little code as is barely possible in the most minimalistic way...

Method 1: works perfectly! but no caching as the whole svg becomes inline in the html source: 

<? include("logo.svg")?>

Method 2: Broken! Greyed "image missing icon" while the file exists and shows as xml file like here

<img src="logo.svg" />

enter image description here

Add to .htaccess but still the exact same problem! (images below)

# interpret svg files as image instead of xml
AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Final step: how to have external files with svg contents display as graphics, instead of xml?

logo.svg

<svg  viewBox="0 0 200 200"  id="svglogo">
<path d="m151.4 63.7c0.2 0 23.5 2 37.7-10.9 6.6-6 10.3-14.3
         11-24.7v-28.1h-200.1v31.9c0.7 10.4 4.4 18.7 11 247" />
</svg>

enter image description here

Solution

  • After lots of tryouts and comparison with why other svgs worked and my clean svg didnt, it appears all was set correctly (even .htaccess file) except:

    <svg viewBox="0 0 200 200" id="svglogo">  // svg shows as numeric xml

    had to be:

    <svg viewBox="0 0 200 200" id="svglogo"
     version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns="http://www.w3.org/2000/svg"
>

    And after setting these three extra parameters the svg is shown as a graphic. Actually the fourth and last line is the essential part. Without this line all is read as in the original question: boring xml data sheet. With it it becomes a graphic! The other two lines (second and third) could be removed and the graphic will show, as long as the last line is in place.