在 HTML 中放置和显示单个图形 svg 的两种简约方式

Question

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

给定一个简单的 svg 文件 logo.svg，其中包含 只有 1 个图形 (!) 和一个 html 页面我们想要将图形放入的地方，用尽可能少的代码以最简约的方式...

方法一：完美！但没有缓存，因为整个 svg 在 html 来源中变为内联：

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

方法二：破解！当文件存在时呈灰色 "image missing icon" 并显示为 xml 文件，如 here

<img src="logo.svg" />

添加到 .htaccess 但仍然是完全相同的问题！（下图）

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

最后一步：如何将带有 svg 内容的外部文件显示为图形，而不是 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>

Answer 1

经过大量尝试并与为什么其他 svg 工作而我的干净 svg 没有工作的原因进行比较后，似乎所有设置都正确（甚至 .htaccess 文件）除了：

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

必须是：

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

设置这三个额外参数后，svg 显示为图形。实际上第四行也是最后一行是必不可少的部分。如果没有这一行，所有内容都将按照原始问题读取：无聊 xml 数据 sheet。有了它，它就变成了图形！可以删除其他两行（第二行和第三行），只要最后一行就位，图形就会显示。

在 HTML 中放置和显示单个图形 svg 的两种简约方式

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

html

php

svg

caching

inline