テキスト

SVGのテキスト・エレメントは、HTMLのシンプルなテキスト・エレメントとよく似ています。フォント・スタイルや色は、スタイル・プロパティとして定義されます。文字列中にカスタムのカーニングや、パスへのバインドがない限り、テキストはHTMLの場合同様、これらのタグの中に収められます。このため、テキスト内容の編集が非常に簡単であるだけでなく、ダイナミックなテキスト生成や処理のスクリプト作成も簡単です。

テキスト・プロパティには、バウンディング・ボックス内のテキスト・エレメントの相対位置を定義する位置座標も含まれます。

(Adobe Illustratorでテキスト・エレメントを作成する場合、連続したテキスト・ブロックを書き出すには、文字設定パレットの"カーニング"を"0" に設定してください。)

以下のリストからフォントを選んでください。そして、[Set]ボタンをクリックして、テキスト・フォントを変えてみましょう。

フォントファミリー:

JavaScriptを表示する

SVG画像内のテキストに置換するために、以下のフィールドにテキストを入力して[Set]ボタンをクリックしてください。

テキストを入力:

JavaScriptを表示する

SVG画像はユーザのシステムにインストールされたフォントに限定されません。Illustrator 9では、Type 1フォントとTrueTypeフォントを、SVGファイルに埋め込めるCEF(Compact Embedded Font)に変換することが可能です。

以下の例には、埋め込みフォントが含まれています。

Type 1フォント埋め込み機能によって、SVG画像に検索とカスタマイズが可能なテキスト・コンテンツを加えることができるだけでなく、デザイナーの求めるあらゆるType 1フォントで変換、印刷可能なテキストまでも加えることができるのです。

次のレッスン:カスケーディング・スタイル・シート

Copyright ©2000 Adobe Systems Incorporated. All rights reserved.
Terms of Use
Online Privacy Policy