SVGフォントナレッジベース

SVGフォントの紹介

SVGフォントが何であるかを説明するために、まずSVGという用語を共通して学習しましょう。いわゆる aspose.svg製品から、スケーラブルベクトルグラフィックス(SVG)は、2次元ベクターと混合ベクトル/ラスターグラフィックを作成するためのXML言語であることを理解しています。 SVGドキュメントは、画像を幾何学的プリミティブとして説明するテキストファイルです：ライン、曲線、形状、テキストなど。ベクターオブジェクトは、ビットマップのようにピクセルグリッドではなく、コマンド、数字、および式のセットとして構築および保存されます。

SVGフォントは、SVG画像で使用され、形式の他のオブジェクトと同様に、品質を失うことなくスケーリングできます。フォントを画像に直接埋め込むことができ、カスタムタイポグラフィでグラフィックを簡単に作成できます。

SVGフォントは、SVGイメージのようにXMLを使用して定義されるフォントです。フォントの文字を定義する形状、線、曲線のコレクションです。フォントは cssを使用してスタイリングおよび操作することもできます。したがって、同じ手法を使用して、他のSVG要素に対してこれを行うのと同じように、SVG画像でテキストをコーディングできます。

SVGフォントの利点と短所

以下の表は、SVGフォントの長所と短所を示しているため、プロジェクトで使用するかどうかを決定できます。

長所	短所
スケーラビリティ: SVGフォントは品質を損なうことなく任意のサイズに拡大縮小できるため、あらゆるレスポンシブデザインに最適です。	ブラウザのサポート: 最新のWebブラウザのほとんどはSVGフォントをサポートしていますが、一部の古いブラウザではサポートされていない場合があります。
ファイルサイズが小さい: Webフォントと比較すると、SVGフォントはファイルサイズが小さいため、読み込み時間を短縮したい場合に非常に重要です。	エディターのサポートが限られている: すべてのテキストエディターやデザインソフトウェアがSVGフォントをサポートしているわけではありません。
アクセシビリティが優れている: SVGフォントは、障害のあるユーザーにとってよりアクセスしやすいと考えられています。スクリーンリーダーで簡単に読み取ることができ、代替テキストの説明を含めることができます。	複雑さ: SVGフォントは、より高度な技術的知識を必要とするため、操作や編集が困難です。
高度なタイポグラフィ: SVG フォントには、合字、カーニング、代替文字などの高度なタイポグラフィ機能が含まれています。	検索可能性: SVG フォントは検索エンジンで検索できないため、Web サイトの SEO に影響を与える可能性があります。
スタイルとアニメーション: CSS と JavaScript 内で SVG フォントのスタイル設定やアニメーション化が簡単に行えます。	フォントオプションの制限: True Type フォントと比較すると、SVG 形式では使用できるフォントオプションが少なくなっています。
非ラテン文字のサポートが向上: SVG フォントはスケーラビリティに優れているため、多数の文字を含むフォントや、象形文字、アラビア文字、ヒンディー文字などの複雑なレンダリングを必要とするフォントを描画できます。

svgまたはwoff？

SVGフォントはSVGの初期に人気がありましたが、ほとんどの場合、すべての最新のブラウザで広くサポートされているため、ほとんどの場合、Webフォントがそれらを置き換えました。とにかく、たとえば、インターネットエクスプローラーの古いバージョンでSVGフォントを見つけることができます。これらのフォントを比較しましょう。

Web Open Font FormatまたはWoffは、Webアプリケーション市場のニーズをカバーするように設計されたインターネット上でフォントファイルを配信するための形式です。 Woff形式は、TrueTypeやOpentypeなどの他のファイル形式と比較して、より効率的なWebフォントを提供するためのより効率的な方法を提供するために作成されました。フォーマットはフォントデータを圧縮してファイルサイズを縮小し、Webページをより速くダウンロードおよび使用します。また、フォントファミリ、スタイル、著作権情報など、フォントに関する情報を提供するメタデータも含まれています。

SVGは、Web上に画像を作成および表示するために使用されるベクトルグラフィック形式です。これは、簡単に編集して操作できるテキストベースの形式です。したがって、ロゴ、アイコン、その他のグラフィックを作成するときに良い選択です。

したがって、これらの形式を目的で比較する場合は、Webで使用するグラフィックを作成する場合は、SVGを使用する必要があります。ウェブサイトで使用するためにフォントが必要な場合は、Woffを使用する必要があります。

どちらの形式もCSSと対話できますが、WOFFファイルはCSSのフォントフェースルールを使用してWebページに埋め込まれています。これにより、Webデザイナーは、ユーザーに頼ってデバイスにフォントをインストールすることなく、Webサイトでカスタムフォントを使用できます。これにより、ユーザーが使用するブラウザに関係なく、より優れた柔軟性と一貫した視覚エクスペリエンスが得られます。

SVGまたはTTF？

ttfまたはSVGの間で選択する場合、通常、異なるケースに使用されるため、プロジェクトの要件を最初に明確にする必要があります。これらのフォントは、高品質でスケーラブルで読みやすいテキストを提供するため、かなり似ています。

True Type Fontフォーマットは、Webおよび印刷デザインで最もよく知られているフォント形式であり、ほとんどのオペレーティングシステムとデバイスでサポートされています。 TTFは、使いやすく、実装も非常に簡単です。これはベクトル形式ですが、フォントがビットマップフォントの品質と同様になり、一部のソースによってラスターと見なされるようになった命令の開発ツールを使用します。 SVGはベクトルフォント形式です。フォントを一連のパスとして保存し、任意のサイズにスケーリングされたロスレスを補充します。このようなフォントは、SVGとWOFFの比較で既に言及されているように、より小さなフォントファイルを提供できます。また、SVGは、障害者にサービスを提供するための真のタイプよりも優れたオプションです。

要するに、TTFは最も広くサポートされている形式であり、ほとんどの場合に最適ですが、テキストをスケーリングする必要がある場合、テキストをアクセスできる、または高度なタイポグラフィの機能が必要な場合は、SVGが最適です。

SVGフォントはどこで使用しますか？

焦点を合わせる場合は、SVGフォント形式を選択します。

レスポンシブデザイン： SVGのようなスケーラブルなフォントは、そのような問題に適しています。
**アクセシビリティ：**上記のように、SVGフォントはより良い読みやすさを提供できます。
高度なタイポグラフィ： ligatures、kerning、代替キャラクターなどの機能は、SVGフォントに含まれています。
スタイルとアニメーション： SVGフォントは、デザインとアニメーションの柔軟性を高めます。
非ラチンスクリプト： SVGフォントを使用して、多数の複雑な文字を持つフォントを表すことができます。
印刷設計： SVGは、ファイルのサイズが重要な特定の印刷デザインプロジェクトで役立ちますが、高解像度の画像と複雑なタイポグラフィを同時に使用する必要があります。
SVGグラフィックの操作： SVGフォントは共通のSVGグラフィックイメージの一部であり、XML言語を使用して表現されます。特別なソフトの助けを借りて、フォントグリフを編集し、SVG画像全体で結果(テキストビューの変更)をすぐに表示できます。

SVGフォントは、すべてのプロジェクトに最適な選択ではない可能性があることに注意することが重要です。また、フォールバックオプションとして異なる形式のフォントを追加することをお勧めします。

SVGフォントは無料ですか？

Googleフォント、オープンフォントライブラリなどのオープンソースライセンスの下に、さまざまな無料のSVGフォントを備えたオープンソースフォントライブラリがたくさんあります。ただし、すべてのSVGフォントが自由に使用できるわけではありません。一部の設計者はライセンスを販売しており、ライセンス条件はさまざまです。一部のフォントには、限られたセットのセットを備えた無料バージョンと、より多くのオプションを備えた有料バージョンがあります。プロジェクトで使用する前に、フォントのライセンスと使用条件を確認してください。これを行うことで、自由に使用できること、または必要なアクセス許可があることを確認できます。

フォントライセンスを念頭に置くための4つのオプションがあります：

他のシステムにフォントの埋め込みと一時的なロードを許可します。このようなライセンスを使用すると、新しいテキストのフォーマットを含むフォントを編集し、変更を保存できます。
フォントを他のシステムにロードできるようにする一時的な方法でフォントを埋め込むことができます。このようなライセンスを使用すると、埋め込みフォントを使用して新しいテキストを編集およびフォーマットし、変更を保存できます。
フォントを永続的な方法で埋め込むことができます。これにより、リモートシステムまたは他のユーザーがフォントをインストールして使用できます。
他のシステムでドキュメントを表示または印刷する目的で、フォントを一時的な方法で埋め込むことができます。

SVGフォントファイル

SVGフォントはXML構文を使用し、SVGドキュメントに直接埋め込むか、外部ファイルとして参照できます。その構造は次のコンポーネントで構成されています。

ファイルの先頭でのXML宣言。 XMLの使用バージョンとエンコード情報を指定します。
フォント要素。フォント名、家族、スタイルなどのフォントに関する一般的な情報が含まれています。
グリフ要素。フォントの個々の文字を定義します。各 glyphには、一意の識別子、ユニコード番号、および文字を構成するパスまたは形状のセットがあります。
フォントフェイス要素。上昇、降下、ベースライン位置、グリフ境界ボックスなど、フォントメタデータ( メトリック)を定義するために使用されます。
ガリフの欠落要素。デフォルトのグリフを定義します。このグリフは、必要なグリフがフォントに見つからない場合に使用されます。- フォントファイルのソースを定義するFont-Face-SRCや、フォントにURIを提供するFont-Face-URIなどのオプションの要素。

以下は、SVGフォントファイルの基本構造のコード例です。

1 
2    <?xml version="1.0" encoding="UTF-8"?>
3    <svg xmlns="http://www.w3.org/2000/svg">
4      <font id="MyFont" horiz-adv-x="1000">
5        <font-face font-family="MyFont" units-per-em="1000" ascent="800" descent="200" />
6        <glyph glyph-name="Triangle" d="M0,0 L100,0 L50,100z" />
7        <glyph unicode="B" glyph-name="B" d="M50,50 L50,150 L100,150 L100,115 L85,100 L50,100 M85,100 L100,85 L100,50z" />
8      </font>
9    </svg>

コードの例を説明しましょう。

まず、XMLバージョン番号とエンコーディングを定義する一般的なXML宣言が表示されます。 UTF-8のエンコーディングは、2008年以来、World Wide Webの最も一般的なエンコードです。

このXMLの主な要素(TAG)は、SVGドキュメントフラグメントを定義する要素svgです。 svg要素の属性「XMLNS」は、スケーラブルベクトルグラフィックス(SVG)1.0仕様で定義されているXMLネームスペースを参照しています。

フォント自体の説明は、<font>要素から開始されます。この要素には2つの属性が含まれています。

id属性はフォントを一意に識別し、外部SVGファイルからフォントを参照するために必要なときに使用されます。属性 horiz-adv-xは、詳細については、グリフを水平方向にレンダリングした後、デフォルトの水平方向の進歩を決定します( glyph metricsを参照)。この属性が指定されていない場合、デフォルト値は1000になります。

この例の要素「フォントフェイス」は、フォントのこのような共通特性を次のように定義しています。

font family - 関連する、類似の類似の書体のグループ。
EMあたりのユニット - EMスクエアの座標ユニットの数、グリフがレイアウトされる設計グリッドのサイズ。
上昇、降下 - ベースラインの原点からグリフの最高/最低点までの長さ。

私たちの例フォントに含まれるすべてのグリフは、「グリフ」要素で表されます。「Unicode」や「Glyph -Name」などのパラメーターは、それぞれGLYPHの文字コードまたは名前を使用して、対応するグリフにアクセスする方法を教えてください。実際のSVGフォントデータでは、目的のGLYPHにアクセスするために、単一の属性、Unicode、またはGlyphの名前のみを提供するだけで十分です。

属性dは、「グリフ」要素の最も重要な属性です。このような幾何学的プリミティブをラインや曲線として使用して、グリフの概要を定義します。

この例では、「三角形」という名前のグリフのグラフィカルパスを取得する方法を見てみましょう。このパス内のすべての文字は、グラフィカルコンテキストの対応するコマンドと比較して、特別な略語です。各文字の後に2つの数字が続き、これらは座標です。この例のすべての座標はグローバルであり、前のポイントに関連する座標はありません。

このパスの最初の文字は「M」です。コマンド「Moveto」です。その名前から行くと、このコマンドは、ペンを指定された座標に設定します。この場合、座標系(0、0)の開始です。

次のコマンド - 「l」はコマンド「リネート」を意味します。このコマンドは、現在のポイント(0,0)から指定された(x、y)座標まで線を描画します。これは、新しい電流ポイントになります。

新しい電流ポイントの座標は、「l」コマンドのパラメーターです。この場合、これらは座標(100、0)です。

したがって、グリフの最初の行は、ポイント(0,0)からポイント(100、0)までの線です。次のコマンド - 「L50,100」 - は、現在のポイント(100、0)からポイント(50、100)に線を描画します。

そして、グリフパスの最後のコマンド - 「Z」は「closepath」と名付けられ、現在のポイントから現在のサブパスの初期点まで直線ラインを描くことで現在のサブパスを閉じるために使用されます(0,0)。

そのため、説明した例から、グリフがSVG形式でどのように表現されるか、これらのグリフにアクセスする方法、およびこのフォントが正しく表示されるテキストを取得するためにフォントが持つべき最も一般的な特性を簡単に学びました。

SVGフォントを作成する方法は？

通常、SVGフォントの作成プロセスには次の順序があります。

フォントの各グリフのベクトルグラフィックを作成します。このような目的のために、Illustrator、Inkscape、Glyphsなどのソフトウェアを使用できます。
各GlyphをSVGファイルとしてエクスポートし、それぞれに同じフォント名と属性を使用するようにします。
fontforgeやfontlabなどのソフトウェアを使用してフォントファイルを作成します。次に、各文字のSVGファイルをインポートします。
作成されたファイルにフォント名、著者、ライセンスなどのメタデータを追加します。
結果をテストします。コンピューターにフォントをインストールし、さまざまなテキストエディターとデザインソフトウェアで試してください。このようなプログラムはすべてSVGフォントをサポートしているわけではないため、SVGフォントを作成および編集するのに適切なプログラムがあることを確認してください。

結論

SVGフォントには、非常に高いレベルの人気があり、他のフォントよりも優れたソリューションである多くのケースがあります。しかし、このフォーマットがプロジェクトの正しい選択であるかどうかを決定するには、最初に長所と短所を学ぶことをお勧めします。

追加のソフトウェアをロードせずにSVGをオンラインで作業したい場合は、 クロスプラットフォームアプリケーションを使用できます。フォントの作業に焦点を当てている場合は、 アプリの順に進んで(11) コンバーターを見つけることができます。

真のタイプフォント woff fonts