SVGファイルにオンラインでテキストを追加

SVGファイルにテキストを追加する方法

1. エディタを開きます。 rayzia.com にアクセスし、エディタを次の場所で開きます: /vector/。ダウンロード不要、開始にアカウントも要りません。Windows、Mac、Linux、ChromeOS、タブレットのどのブラウザでも動作します。
2. SVGをドラッグして読み込みます。 ファイルをキャンバスにドロップするか、「ファイル」→「開く」を使います。RayziaはネイティブSVGとして読み込むため、アートワークの各パーツはロックされた画像ではなく、それぞれ編集可能なオブジェクトとして届きます。ファイルに元から入っているテキストも、打ち直せるテキストとして読み込まれます。
3. テキストツールを選んで入力します。 キーは Tを押すか、レールのテキストツールをクリックし、キャプションを始めたい位置でキャンバスをクリックします。キャレットが表示されたら入力を開始。文字の編集ではなくテキスト自体を移動したいときは、選択ツールに切り替えます: V.
4. スタイルを整えます。 オプションバーには、フォントファミリーのコンボ、フォントアップロードボタン、スタイルのコンボ、ポイント単位のフォントサイズ（デフォルト16、プリセットは4から144まで）、行の高さ、揃え、文字間隔、単語間隔が並びます。Google Fontsの任意のフォントや自分のフォントを読み込み、アートワークに馴染む塗り色を設定しましょう。曲線状のキャプションには「パス上文字」を使ってパスをクリックすると、テキストがそれに沿って流れ、反転やスライドもできます。
5. エクスポートします。 「ファイル ▸ エクスポート」からSVGを選べばきれいなベクターファイルが得られ、ラスター版が必要ならPNGを選びます。PNGは透過を保持します。どちらのエクスポートも無料で、作業中はエディタが自動保存を続けています。

フォーム欄ではなく、本物のテキストツール

この用途のよくある簡易Webツールは、入力ボックスひとつとシステムフォントの短いリストしかくれません。Rayziaが提供するのはフルベクターエディタのテキストエンジンです。すべてのテキストオブジェクトは文字の画像ではなく、ドキュメント内の本物のSVGテキスト要素なので、いつでも打ち直しやスタイル変更ができ、どの操作もアンドゥ1回で戻せます。

文字組みの方法は5つあります。文字ツールはクリックして入力する標準の方法。エリア内文字は任意のシェイプの中に段落を流し込みます。パス上文字はテキストを任意の曲線に沿わせます。縦組み文字は上から下への段組みでCJKやポスターに便利。文字タッチツールは1文字ずつ手作業で位置調整や回転ができます。

フォントは固定メニューではありません。ファミリーリストはGoogle Fontsの任意のフォントをオンデマンドで読み込み、アップロードボタンは .ttf、.otf、.woff、.woff2、.ttc を複数まとめて受け付けます。アップロードしたフォントはデバイスに保存されるため、リロードしても消えません。Proではクラウドにもミラーされます。

テキストは編集可能なまま

SVGでエクスポートすれば、キャプションは本物のテキスト要素として書き出されるので、ファイルを開き直しても文字を選択して打ち直せます。パスもパスのまま。開いたファイルがそのまま編集するファイルであり、エクスポートされたSVGには余計なゴミではなく、あなたのアートワークだけが含まれます。

フォントに関する注意点がひとつ。素のSVGエクスポートはフォント自体を持ち運ばないため、そのファミリーがないマシンでは別のフォントに置き換わります。字形を正確に保ちたい場合は、実際に使ったフォントを埋め込むロスレスなネイティブ .rzv ファイルも保存するか、 テキストをアウトライン化 してから納品してください。選んだGoogle Fontsのフォントは、セッションの復元時に再取得されます。

SVGへのテキスト追加: よくある質問