SVGで縁取り文字・白抜き文字の生成

SVGの「text」と「stroke-width」を利用すると文字の縁取り（アウトライン）が簡単にできます。
当ページでは、枠線の太さや種類（丸み、角張り、とんがり）、枠線の色を指定することが出来ます。また、文字のサイズや文字間隔、文字色も簡単操作で実際に作成されるSVG文字を確認することが出来ます。
生成された「html」「css」などのソースコードは、そのままコピー＆ペーストで利用することが出来ます。

SVGは画像として利用されます。文書中の文字などを縁取り・白抜き（アウトライン）する場合は、CSSのみでも可能ですので以下をご確認ください。
縁取り文字・白抜き文字のCSS生成

IEなどのブラウザでは、SVGの「paint-order」に対応していません。このため、IEに対応させるため「text」を二重で作成しています。

<div class="svgSample1">
  <svg width="100%" height="100%">
    <text x="50%" y="50%" dy="0.4em">SVGで縁取り</text>
    <text x="50%" y="50%" dy="0.4em">SVGで縁取り</text>
  </svg>
</div>
（注） IE対策のため「text」を2回繰り返しています

<style type="text/css">
.svgSample1 > svg > text {
  font-weight       : bold;
  font-size         : 40px;
  font-family       : Meiryo UI;
  stroke            : #003366;
  fill              : #ffffff;
  letter-spacing    : 11px;
  text-anchor       : middle;
  dominant-baseline : alphabetic;
}
.svgSample1 .svgText1 {
  stroke-width      : 23px;
  paint-order       : stroke;
  stroke-linejoin   : round ;
}
.svgSample1 .svgText2 {
  stroke-width      : 0;
}
.rangeTable table th,td {
padding-top:3px;
padding-bottom:3px;
}
</style>

作成したSVGを画像ファイルとして保存する場合

SVGを直接背景として指定する場合は、SVGタグをURLエンコードして「background-image」に「url」として指定します。

IEなど一部ブラウザでは、SVGのアニメーションに対応していたいため動作しません。

<div class="svgSample2">
  <svg width="100%" height="100%">
    <text x="50%" y="50%" dy="0.4em">SVGで縁取り</text>
    <text x="50%" y="50%" dy="0.4em">SVGで縁取り</text>
  </svg>
</div>

<style type="text/css">
.svgSample2 > svg > text {
  font-weight       : bold;
  font-size         : 40px;
  font-family       : Meiryo UI;
  stroke            : #003366;
  fill              : #ffffff;
  letter-spacing    : 11px;
  text-anchor       : middle;
  dominant-baseline : alphabetic;
  animation  : sample2Anime 10s linear infinite alternate;
}
.svgSample2 > svg > text:nth-of-type(1) {
  stroke-width      : 12px;
  paint-order       : stroke;
  stroke-linejoin   : round ;
}
.svgSample2 > svg > text:nth-of-type(2) {
  stroke-width      : 0;
}
@keyframes sample2Anime{
   0% { stroke: red;   fill:yellow}
  17% { stroke: orange;fill:green}
  34% { stroke: yellow;fill:aqua}
  51% { stroke: green; fill:blue}
  68% { stroke: aqua;  fill:purple}
  85% { stroke: blue;  fill:red}
 100% { stroke: purple;fill:orange}
}
</style>

CSS3で追加された「animation」を使用すると、文字の縁取りをいろいろと変化させることが出来ます。
アニメーションについては以下をご確認ください。
animation 「アニメーション」

文書の途中文字を白抜きしたい場合はCSSのみの実現する方が簡単となります。
以下に縁取りするCSSの自動作成とサンプルを記載していますのでご確認ください。
縁取り文字・白抜き文字のCSS生成