TypstでSVGを配置し、図と書き出し結果を確認する
TypstのimageとfigureでSVGを配置します。サイズ、キャプション、文中の位置、書き出したPDFを納品前に確認します。
目次
TypstにSVGを入れるには、imageにファイルのパスを渡します。キャプションと番号が必要ならfigureで、文中に入れるならboxで包みます。SVGは対応する入力形式なので、単純なSVGを配置するためだけにPDFへ変換する必要はありません。公式のimageリファレンスにこれらの設定が記載されています。
表示された後の確認が重要です。アートワークは完全ですか。キャプションは文書本来のテキストですか。小さくしても形が伝わりますか。本記事では、独自の細胞風の模様でそれぞれを区別します。イラストであり、生物学的モデルや測定した標本ではありません。
アートワークと文書のテキストを分ける
文字のないSVGと短いTypstファイルを同じフォルダーに用意します。これにより、文書の文字組みの変更とアートワーク内に組み込まれた文字の変更を混同する原因を一つ減らせます。
この模様をcell.svgとして保存します。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
<rect x="20" y="20" width="200" height="120" rx="40"
fill="#e5f5ed" stroke="#197c70" stroke-width="6"/>
<circle cx="100" cy="80" r="27" fill="#e89173"/>
<circle cx="100" cy="80" r="9" fill="#263b60"/>
<path d="M150 52C172 42 193 62 178 76C164 91 146 72 150 52Z"
fill="#197c70"/>
</svg>ファイルには丸みのある外側の境界、暗い中央を持つサンゴ色の円、独立した緑の形があります。配置後に比較するのはこれらの特徴です。復元すべき軸の値、ラベル、スケールバー、埋め込み写真はありません。
既存の科学イラストでは、編集可能なマスターと受け渡し用のコピーを保持します。マスターが数値プロットなら、作図ツールと元データから再度書き出します。研究の値を復元するためにプロットのピクセルをトレースしてはいけません。形の整理が必要な単純なスケッチについては、線画の準備ガイドがその前段階を扱っています。
SVGを文書本来の図として配置する
SVGの隣に、以下をmain.typとして保存します。
#set page(paper: "a5", margin: 18mm)
#set text(size: 11pt)
= A schematic cell
The drawing in @fig-cell is an illustrative motif, not a measured specimen.
#figure(
image(
"cell.svg",
width: 70%,
alt: "Rounded cell outline with a circular center and a separate curved interior shape.",
),
caption: [A simplified cell motif, not drawn to scale.],
) <fig-cell>
Inline marker: #box(
baseline: 20%,
image("cell.svg", height: 1em, alt: "Cell motif"),
) next to the word cell.図は画像とキャプションをまとめます。<fig-cell>ラベルが図に名前を付け、段落の@fig-cellが参照します。この識別子は文書内で一意にしてください。Typstのfigureの資料はキャプションと番号を、referenceの資料はラベルによる参照を説明しています。
この構成なら、イラストを開き直さずにキャプションを修正できます。SVGに図番号を書き込んでから、文書側で番号が変わったことに気付く事態も避けられます。
画像のaltは見えている内容を説明します。画像が一つのこの図では、imageの資料の推奨に従って説明を画像に付けます。キャプションは、模様の解釈を読者に伝える別の役割があります。どちらの欄も、不十分な科学的説明を完全にするものではありません。実際のイラストに適した説明を書いてください。
描画全体を保持するサイズを設定する
主な例は一方の寸法だけをwidth: 70%で指定します。周囲のテキスト領域に収まる幅から始め、実際のテンプレート内で確認します。狭い段とページ全体では、同じアートワークに使える空間が異なります。
幅と高さの両方が必要なら、収め方を明示します。Typstの画像のfitリファレンスは3種類を定義しています。containは縦横比を保って画像全体を収め、coverは切り抜いて領域を埋め、stretchは比率を変えて埋めます。
この模様では、8 cm×3 cmの領域を元のキャンバスより意図的に横長にしています。次の比較で選択の違いが見えます。
#set page(paper: "a5", margin: 18mm)
= Fixed-area comparison
Contain:
#image("cell.svg", width: 8cm, height: 3cm, fit: "contain")
Cover:
#image("cell.svg", width: 8cm, height: 3cm, fit: "cover")
Stretch:
#image("cell.svg", width: 8cm, height: 3cm, fit: "stretch")丸みのある境界と中央の円を目印にします。境界が切れていれば切り抜きがあり、元の円が楕円になっていれば比率が変わっています。完全な描画の周囲の空間は許容できる場合がありますが、欠けたアートワークには通常、意図的な編集判断が必要です。
元のキャンバスが不適切だからといって、ページ寸法を何度も変更しないでください。SVGに空白が多すぎるなら、まずマスターのキャンバスを修正し、受け渡し用コピーを置き換えて配置を再確認します。
文中の表示は別のデザインとして確認する
main.typの最後の行は、模様を単語の隣に置きます。1emの高さは周囲の文字サイズに従います。ボックスのbaseline: 20%はこの例の調整の出発点であり、すべてのアイコンに使える値ではありません。Typstのboxリファレンスは、ベースラインによる近くの文字との位置合わせを説明しています。
通常の読書サイズでマーカーを確認します。大きなイラストでは暗い中央の点が明確でも、文中ではほとんど見えない場合があります。そのためにすべての段落を大きくするのではなく、マーカーを意図的に単純化するか、別の記号を選ぶ理由として考えます。
「cell biology」のように、上に伸びる文字と下に伸びる文字を含む実際の文、そして折り返した行を確認します。アイコンが浮いて見える、文字より下に沈む、行間が不均等になるといった点を探します。視覚的な調整はマーカーのコンポーネント内に留め、通常の文書テキストに影響しないようにします。
文字はキャプションと独立して確認する
例のSVGには文字がありません。自身のSVGに文字がある場合は、まずテキストなのかアウトライン化した図形なのかを確認します。SVGのフォント変更ガイドにその確認手順があります。
Typstのtext設定は、Typstで作る文書のテキストを制御します。本文フォントを選ぶとインポートした画像の内部も書き換わるとは考えないでください。特に別のマシンでコンパイルする場合は、珍しい字形、下付き文字、長い単語を含むラベルを納品ファイルで確認します。
文字を文書内容として編集可能に保つ必要があるなら、Typstで作るか適した元の制作方法を保持します。アウトライン化は描かれた形を保持できますが、検索可能なテキストとは別の成果物です。見た目だけで判断せず、必要な性質をテストしてください。
書き出した実際の文書を確認する
SVGを含めることと、Typst文書全体をSVGとして書き出すことは別です。TypstのSVG書き出しの資料は、文書の文字を字形の図形として書き出すため、そのSVGから通常のテキストを抽出できなくなると説明しています。文書の目的に合わせて出力形式を選びます。PDFの資料は、PDF書き出しと規格の選択を説明しています。
ローカルのコマンドラインでは、例のフォルダーからtypst compile main.typ main.pdfでコンパイルします。相手が使いそうなビューアーでPDFを開いてください。
これらの独自の例をTypst 0.15.1でコンパイルし、PDFを確認しました。図の参照とキャプションは一致し、文中マーカーは文字の隣に現れ、3つのfitモードは想定どおり、比率を保つ、切り抜く、引き伸ばす結果を示しました。元データや文書テンプレートを変えた後は、書き出しファイルをテストします。
受け渡し前に次を確認します。
- 外側の境界と各独立した内側の形が存在すること。
- 選んだ図サイズで中央の円が円のままであること。
- キャプションと相互参照に意図した図番号が出ること。
- 文中マーカーを通常の文字の隣で判読できること。
- 必要に応じて重要な文書テキストを選択、検索できること。
- 出力先のビューアーとテンプレートでも文書が正しく動作すること。
鮮明なプレビューは、学術誌の要件への適合、アクセシビリティ適合、すべてのSVG機能の保持を証明しません。元データがすでにPDFなら、さらに変換する前に用途を考えます。PDFからSVGへのガイドではアートワーク抽出が有用な場面を説明しています。SVGが粗く見える場合は、拡張子を再び変えるのではなく、埋め込みラスター画像を調べます。
イラストの元データがピクセルでしか存在しない場合
単純なイラストの模様がPNGやスキャンでしか残っていないなら、PerfectVectorの科学図をSVGにするワークフローで編集可能なアートワーク候補を復元できます。模様に合わせて切り抜き、失われた穴や余分な背景図形をプレビューで確認して、元データと比較します。採用したSVGをTypstに置き、図サイズと文中の確認を繰り返します。
この経路はイラストの形状に使います。測定値、数値プロット、スケールバー、科学的解釈は、元のデータと制作ツールとの結び付きを保持します。ベクター化は失われた研究情報を復元せず、投稿承認も与えません。元のベクターがあれば直接使ってください。
ブログのSVG準備ガイドは、文書レイアウトの前に行う元ファイルの確認を扱っています。
よくある質問
TypstはSVG画像を直接受け付けますか？ はい。SVGのファイルパスをimageに渡します。番号付きキャプションにはfigure、文中配置にはboxで包みます。
SVGの一部が切れるのはなぜですか？ 縦横比が合わない幅と高さを両方指定していないか確認します。coverは領域を埋めるために切り抜きます。全体を見せる必要があるならcontainを試し、元のキャンバスも確認します。
TypstでSVGを文字と揃えるにはどうしますか？ 画像をbox内に置き、周囲の文字に合う高さを選び、boxのベースラインを調整します。実際の行を確認してください。一つの割合がすべてのアイコンとフォントに適するわけではありません。
SVG書き出しは選択可能な文書テキストを保持しますか？ TypstのSVG出力は文字を字形の図形として表します。テキスト抽出が重要ならPDFなどの適した出力を使い、鮮明さで文字の性質を判断せず、書き出した結果を確認します。
参考資料
- Typst — Image — SVG入力、寸法、fitモード、画像の説明。
- Typst — Figure — キャプションと番号の動作。
- Typst — Reference — ラベルと自動参照。
- Typst — Box — 文中の配置とベースライン調整。
- Typst — Text — 文書本来のテキストの設定。
- Typst — SVG — SVG出力と字形の図形による文字。
- Typst — PDF — 文書の書き出し方法と出力規格の選択。
図一つと文中の表示一つから始めます。失われたイラストを復元する必要があれば、SVG候補を準備し、形を比較して、残りの一式を準備する前に採用したアートワークを文書内で確認してください。
