文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン

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

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

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

SVGで文字を縁取りして見よう

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

作成文字
縁取り
縁太さ
縁取り種類
文字の指定
文字サイズ
文字間隔
文字太さ
文字の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
縁取りの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
SVGで縁取り
使用したhtml
<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回繰り返しています
生成したCSS
<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>
CSSのみで縁取り・白抜き(アウトライン)使い方は以下を参照ください。
縁取り文字・白抜き文字のCSS生成
ページTOP

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

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


ページTOP

文字の縁取りにアニメーションを付ける

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

SVGで縁取り 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 「アニメーション」

ページTOP

CSSのみで文字の縁取りを付ける

以下はSVGを使用せずにCSSのみで文字の縁取りを行っているサンプルです。

CSSのみで縁取り

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

ページTOP
広告
広告

注意事項

IEで縦の中央寄せ「dominant-baseline : middle;」が効かないため「dominant-baseline : alphabetic」を使用し、「dy=0.4em」で文字を少し下げることで中央寄せしています。このため、縦中央から少しずれています。中央寄せが必要な場合は「dy」で調整してください。

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン