SVGとPNGの使い分け
結論から言うと、置き場所が受け入れるならSVG、受け入れないならPNGです。 型番構成図は線と文字だけでできているので、SVGの利点がそのまま効きます。
何が違うか
| SVG | PNG | |
|---|---|---|
| 中身 | 線と文字の位置を書いた文書 | 点の集まり |
| 拡大 | どこまで拡大しても輪郭が保たれる | 書き出した解像度を超えると粗くなる |
| 文字 | 文字として残る（選択・検索できる） | 絵になる |
| 大きさ | この種の図なら数十KB | 幅2400pxで数十〜数百KB |
| 印刷 | 出力機の解像度で刷られる | 元の解像度で刷られる |
| 受け入れ | 断られることがある | ほぼどこでも通る |
SVGを選ぶとき
自社サイトの製品ページ、社内のドキュメント、印刷物への入稿。拡大しても粗くならないので、スマートフォンで指で広げて読む読者にも耐えます。型番のような細かい文字を含む図では、ここが実用的な差になります。
文字が文字のまま残るため、PDFにしたときに検索でき、読み上げにも乗ります。 ただし検索エンジンがSVG内の文字を本文として扱うことは期待しないでください。 図に頼らず、本文にも同じ内容を書いておくのが確実です。
PNGを選ぶとき
投稿先がSVGを受け付けないときです。ECモールの商品ページ、SNS、一部のCMS、メールに貼る場合など。 SVGは書式の性質上スクリプトを含められるため、安全のためにアップロードを禁じている場所が珍しくありません（このツールが書き出すSVGにスクリプトは含まれませんが、受け入れ側はファイルの中身まで見ずに拡張子で判断します）。
幅の決め方の目安です。
- Webページに等倍で1200pxほどで見せる → 2400pxで書き出す（高精細画面で粗く見えないように2倍）
- 資料に貼る → 1200〜2400px。文字が小さい図なら大きいほうを
- 印刷する → できればSVGで入稿。PNGなら、刷り上がりの幅(mm) ÷ 25.4 × 300 を目安に
迷ったときの決め方
置き場所がSVGを受け入れるか確かめる
受け入れるならSVG。これが最優先です。
受け入れないならPNG
用途に合わせて幅を決めます。上の目安を使ってください。
両方書き出しておく
元がSVGなら、PNGはいつでも作り直せます。逆はできません。SVGは必ず手元に残してください。
作りかけならJSONも
あとで型番が増えたときに編集を続けられるのはJSONだけです。図だけを残すと作り直しになります。
このツールでの書き出し
プレビューの下に「SVGを保存」「PNGを保存」「JSONを保存」が並んでいます。 PNGは幅を選べます（プリセットのほか、800〜4000pxで指定できます）。SVGとPNGの中身は同じ組版から作られるので、見た目がずれることはありません。
SVGには、その図で使った字だけを取り出した書体が埋め込まれます。 開く環境に書体が入っていなくても字形が変わらないようにするためで、詳しくはSVGに書体を埋め込むで説明しています。