塗り絵の線の太さ：印刷するサイズで確認する
塗り絵の線の太さは最終サイズで選びましょう。複数の太さを比較して小さな塗り面を残し、SVGの線がストロークか塗り形状かを確認します。
塗り絵の線の太さは、絵柄の最終的な実寸を決めてから選びます。同じ絵でいくつかの太さを比較し、黒い線と同じくらい注意して、最も小さな白い隙間を調べましょう。輪郭を太くすると形を見分けやすくなる一方、読者が色を塗るはずの細い部分が閉じてしまう場合があります。
適切な太さは、絵柄、寸法、画材、印刷会社の要件によって異なります。以下の再現可能なSVGの例で形状を確認し、その後に紙の校正で実際の印刷を確認してください。
入稿するサイズで判断する
太さを比較する間は寸法を固定します。サイズを変えたら、線と白い隙間を再確認してください。調整する前に、見えている線が編集可能なストロークなのか、塗りつぶした輪郭なのかを確認します。
まずページと絵柄のサイズを決める
編集可能なマスターと、予定するページサイズから始めます。100 mm四方に配置する花なら、そのサイズで比較してください。エディターで拡大すると、小さな隙間を見落とすことがあります。
SVGのviewBoxは、描画座標の長方形です。今回の正方形の例では、width="100mm"、height="100mm"、viewBox="0 0 100 100"を組み合わせ、描画単位1つを1 mmにしています。同じviewBoxを50 mm四方に配置すると、1単位は0.5 mmになります。SVGの座標仕様は、この対応関係を定義しています。
この例の通常のストロークは、形状とともに拡大縮小されます。幅0.6は、大きなファイルでは0.6 mm、小さなファイルでは0.3 mmです。これらのファイルには、ストロークを拡大縮小しない設定はありません。エディターがサイズ変更時にストローク幅を保持する場合は、その幅を再確認してください。
線とその隣の空間を比較する
ストロークはパスの周囲を描画します。同じ太さの中央揃えストロークを持つ、平行な2本の直線パスでは、開いた隙間は中心線同士の距離からストローク1本分の幅を引いた値です。曲線の交差部は別途確認が必要です。SVGの描画仕様では、ストロークの描画と形状内部の塗りを区別しています。
描画単位で1離れた、茎の2本の境界を考えます。それぞれのストロークを0.3から0.6へ太くすると、開いた隙間は0.7から0.4単位へ減ります。1.2ではストロークが重なり、隙間が閉じます。
| SVGで試すストローク幅 | 100 mmサイズでの線 | 100 mmでの茎の隙間 | 50 mmサイズでの線 | 50 mmでの茎の隙間 |
|---|---|---|---|---|
| 0.3単位 | 0.3 mm | 0.7 mm | 0.15 mm | 0.35 mm |
| 0.6単位 | 0.6 mm | 0.4 mm | 0.3 mm | 0.2 mm |
| 1.2単位 | 1.2 mm | 閉じる | 0.6 mm | 閉じる |
100 mmサイズでは、これらの試用幅は約0.85、1.70、3.40ポイントです。比較のための値であり、推奨する最小値や年齢別の基準ではありません。隙間の計算が表すのは、茎の平行な部分です。花びらの先や曲線の接合部は別に確認してください。
本全体を変える前に小さく比較する
この独自の例をflower.svgとして保存します。stroke-widthだけを変えて、上の3行を比較してください。次にviewBoxはそのままで外側の2寸法を50mmに変え、小さい組を作ります。
<svg xmlns="http://www.w3.org/2000/svg"
width="100mm" height="100mm" viewBox="0 0 100 100">
<g fill="none" stroke="#000000" stroke-width="0.3"
stroke-linecap="butt" stroke-linejoin="round">
<ellipse cx="50" cy="20" rx="7" ry="10"/>
<ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(60 50 35)"/>
<ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(120 50 35)"/>
<ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(180 50 35)"/>
<ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(240 50 35)"/>
<ellipse cx="50" cy="20" rx="7" ry="10" transform="rotate(300 50 35)"/>
<circle cx="50" cy="35" r="5"/>
<path d="M49.5 60V85 M50.5 60V85"/>
</g>
</svg>茎の2本の直線パスは、1単位離れてy=60からy=85まで延びます。花びらや線端の影響を受けずに隙間を比較するには、その中央を確認してください。
6種類すべてをlibrsvg 2.62.1でPDFへ書き出し、Poppler 26.02.0で開き直しました。PDFのページサイズは丸めの範囲で100 mmと50 mmに一致しました。1,016 DPIで測った茎の隙間は、大きな組で28、16、0ピクセル、小さな組で14、8、0ピクセルであり、1 mmあたり40ピクセルで表と一致しました。レンダリングしたファイルを確認したもので、実物の印刷はしていません。
- 未修正のマスターを保存します。開いた塗り面と細かく狭い部分の両方を含む、代表的な模様を1つ選びます。
- 形状と実寸が同じコピーを3つ作ります。ストローク幅だけを変えます。
- 予定サイズで最も狭い隙間を確認します。閉じた場合は、線を細くするか、隣の輪郭との距離を広げます。すべての線を細くするより、不要な内部の線を削除したほうが分かりやすいこともあります。
- 予定する入稿形式で書き出し、開き直してページ寸法を確認します。小さな穴、角、線端も含め、書き出した絵柄をマスターと比較します。
- 販売または印刷する予定の最小サイズでも確認を繰り返します。完成したページのサイズ変更によって、判断が変わる場合があります。
同じページとズーム率で比較してください。花の外側に合う太さでも、内部の線が混み合うことがあります。外側と内側で異なる太さを使うなら、書き出し後に接する場所を確認します。
SVGがストロークか塗りつぶした輪郭か確認する
塗りは形状の内側を描画します。そのため、見えている黒い線は、細い塗り形状の場合も、中心のパスにストロークが付いたものの場合もあります。stroke-widthを変えるとストロークは変わりますが、stroke="none"の場合は既存の塗りは変わりません。ストローク幅だけが異なる、同じ塗りパスの対照データも2つ書き出しました。レンダリングしたピクセルは同一でした。この対照データは直接作成した形状であり、製品でトレースした出力ではありません。
通常の輪郭トレースは、インクの線の縁をたどります。中心線トレースは、その中央を通るパスを復元しようとします。Inkscapeのトレースガイドは両方のモードを説明しています。トレースしたSVGがすべて同じ構造だと考えず、実際のオブジェクトを確認してください。
塗りつぶした輪郭の場合は、元の原画があればそちらを調整します。なければ、その形状を編集するか、該当する中心パスを描き直します。輪郭形状の周りにストロークを加えても、元のペンの経路は復元されません。「ストロークをパスへ」と「オブジェクトをパスへ」のガイドでは、その構造上の違いを説明し、単線SVGのガイドでは、プロッター用の中心線の作業を扱っています。
元データがPNGやJPGの塗り絵しかない場合、PerfectVectorの塗り絵のベクター化ワークフローで、確認できる編集可能なSVG形状を得られます。プレビューを確認してから、SVGの編集と書き出しのために結果をアンロックしてください。ベクター化はページに最適な線幅を選ぶものでも、1つの幅設定で調整できる中心線ストロークを保証するものでもありません。元データの準備とトレースには、線画からSVGへのガイドを参照してください。
既存のベクターマスターはエディター内で維持します。適切なラスターのページなら、すでに印刷会社の要件を満たしている場合があります。画像のベクター化の解説は、編集可能な形状が必要か判断する助けになります。
印刷会社の最小値とデザイン上の選択を分ける
ファイルを受け取るサービスの要件に従います。たとえば、KDPのペーパーバックのガイドラインは、グラフィック要素の最小線幅を0.75ポイントとしています。これはKDPの入稿要件であり、推奨する塗り絵のスタイルでも、すべての印刷会社に共通するルールでもありません。
入稿するサイズで、その要件に合うか再確認してください。絵柄を縮小する前に最小値を満たしていた線も、その後は下回ることがあります。単位を統一しましょう。CSSの絶対長の定義は、1ポイントを1/72インチと定めています。丸めたミリメートル相当値を正確な換算値として扱わないでください。
紙の校正では、予定した倍率で印刷し、不要な「用紙に合わせる」縮小を無効にして、既知の寸法を定規で測ります。可能なら、実際に使う紙と画材を使ってください。線切れ、閉じた隙間、混み合った細部を探します。上記のデジタルテストは、インクの広がり、紙の特性、塗りやすさを示すものではありません。
よくある質問
塗り絵の線は、どれくらいの太さにすべきですか？ 代表的な絵柄で複数の太さを比較し、最終的な実寸で選びます。塗れる状態で残すべき最小の空間を保ち、受け取り側の印刷会社の要件を満たしてください。この記事では、すべてのページや年齢層に共通する1つの値は定めていません。
絵を小さくすると線が細く見えるのはなぜですか？ 通常の形状の拡大縮小では、絵柄とともにストローク幅も減ることがあります。書き出したファイルを最終サイズで確認してください。エディターの設定や非拡大縮小ストロークで幅を維持できる場合もありますが、残る隙間の確認は必要です。
ストローク幅の設定で、トレースした線が変わらないのはなぜですか？ 黒い部分が、ストロークのない塗りつぶした輪郭形状かもしれません。ストローク幅の設定では、その塗り形状は変わりません。元データや輪郭を編集するか、適切な工程であれば意図的に中心パスを再構築します。
出典
- W3C — SVG 2の座標系 — 2つの実寸で使ったviewBoxとビューポートの対応を説明しています。
- W3C — SVG 2の描画 — 塗りとストロークを区別し、ストローク幅を定義しています。
- Inkscape — 画像のトレース — 輪郭トレースと中心線トレースを区別しています。
- Amazon KDP — ペーパーバックの入稿ガイドライン — サービス固有の最小線幅の要件を示しています。
- W3C — CSSの値と単位 — ポイント、インチ、そのほかの絶対長単位の関係を定義しています。
編集したい元データがPNGやJPGなら、自分の塗り絵をPerfectVectorで試してみてください。SVGをアンロックして書き出した後、予定するページサイズで線の形状と最も小さな白い隙間を確認してから、紙の校正を準備しましょう。
