查看“模块:SVG Data URL/doc”的源代码

{{FromOther/CN|site=萌娘百科|originURL=https://zh.moegirl.org.cn/{{FULLPAGENAMEE}}|origin={{FULLPAGENAME}}|copyright=cc|lsubtype=by-nc-sa|lver=3.0|contribURL=https://zh.moegirl.org.cn/index.php?title={{FULLPAGENAMEE}}&action=history}}
{{#ifeq:{{NAMESPACENUMBER}}|10|{{Lua|SVG Data URL}}}}
本{{#ifeq:{{NAMESPACENUMBER}}|828|模块|模板}}使得可以在页面中嵌入SVG图像。用途包括：实现随wikitext变化的内容；避免小而杂乱的图被上传到共享站；……

本站没有启用<code>&lt;svg&gt;</code>标签，显示SVG的原理是使用[https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs Data URL]为<code>&lt;img&gt;</code>提供源。

== 用法 ==
参数<code>svg</code>填SVG代码。前面不要填<code>&lt;?xml …</code>或<code>&lt;!DOCTYPE svg …</code>，直接以<code>&lt;svg</code>开头。

没指定<code>xmlns</code>的话，会自动加上<code><nowiki>xmlns="http://www.w3.org/2000/svg"</nowiki></code>。

<pre>{{svg|svg=
<svg width="300" height="200">
  <rect width="100%" height="100%" fill="darkturquoise"/>
  <circle cx="150" cy="100" r="80" fill="cadetblue"/>
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
}}</pre>

{{svg|svg=
<svg width="300" height="200">
  <rect width="100%" height="100%" fill="darkturquoise"/>
  <circle cx="150" cy="100" r="80" fill="cadetblue"/>
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
}}

除<code>svg</code>、<code>src</code>、<code>srcset</code>以外的任何参数，如<code>width</code>、<code>alt</code>、<code>class</code>、<code>style</code>等，会被原封不动地添加到<code>&lt;img&gt;</code>上。不需要加引号。

<pre>{{svg
|width=100
|style=border-radius:6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
|alt=表情
|svg=
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.1 81.3">
  <path d="M93.1,44.8v36.5H4.6C0,64.1-.3,51.9,.1,34.3c0-5.9,.3-17.6,5.8-21.7,7,.7,9.8,7.5,16,9.6,9.7-3.7,20.1-4.6,30.1-4.8C58,9.9,62.1,1.5,71.6,0c5.3,2.5,6,7,7.1,11.4,1.6,6.2,2.7,12.5,4.7,18.6,1.9,5.6,3.5,11.8,9.7,14.8Z"/>
  <circle cx="25.8" cy="47.7" r="9" fill="#fff"/>
  <circle cx="58.2" cy="42" r="9" fill="#fff"/>
  <circle cx="22.6" cy="45.6" r="5"/>
  <circle cx="62" cy="43.6" r="5"/>
</svg>
}}</pre>

{{svg
|width=100
|style=border-radius:6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
|alt=表情
|svg=
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.1 81.3">
  <path d="M93.1,44.8v36.5H4.6C0,64.1-.3,51.9,.1,34.3c0-5.9,.3-17.6,5.8-21.7,7,.7,9.8,7.5,16,9.6,9.7-3.7,20.1-4.6,30.1-4.8C58,9.9,62.1,1.5,71.6,0c5.3,2.5,6,7,7.1,11.4,1.6,6.2,2.7,12.5,4.7,18.6,1.9,5.6,3.5,11.8,9.7,14.8Z"/>
  <circle cx="25.8" cy="47.7" r="9" fill="#fff"/>
  <circle cx="58.2" cy="42" r="9" fill="#fff"/>
  <circle cx="22.6" cy="45.6" r="5"/>
  <circle cx="62" cy="43.6" r="5"/>
</svg>
}}

==注意==
作为文字的<code>"</code>和<code>'</code>需要换为XML实体（<code>"</code>→<code>&amp;quot;</code>，<code>'</code>→<code>&amp;apos;</code>），否则两者会颠倒。

<pre>{{svg|svg=
<svg width="300" height="100" style="background:#fff">
  <text x="150" y="40" font-size="20" text-anchor="middle">字符："双引号" '单引号'</text>
  <text x="150" y="80" font-size="20" text-anchor="middle">实体：&amp;quot;双引号&amp;quot; &amp;apos;单引号&amp;apos;</text>
</svg>
}}</pre>

{{svg|svg=
<svg width="300" height="100" style="background:#fff">
  <text x="150" y="40" font-size="20" text-anchor="middle">字符："双引号" '单引号'</text>
  <text x="150" y="80" font-size="20" text-anchor="middle">实体：&quot;双引号&quot; &apos;单引号&apos;</text>
</svg>
}}

{{图像模板}}
<noinclude>[[Category:模板文档]]</noinclude><includeonly>{{#ifeq:{{NAMESPACENUMBER}}|10|[[Category:图形模板]][[Category:图像模板]]}}</includeonly>