図をカタログ・Web・PDFに載せる

SVGとPNGの使い分けは「どちらの形式にするか」を決めるページでした。このページは、決めたあとの「どう置くか」です。置き場所ごとに、手順と、つまずきやすい点を書きます。

まず一つの判断

Webには、SVGを画像として置く。置き場所がSVGを受け付けなければPNG。 これだけ覚えておけば、以下はその補足です。

Webページに置く

SVGファイルをそのまま画像としてアップロードし、ほかの画像と同じように貼ります。拡大しても粗くならず、ファイルも軽いままです。

代替テキスト（alt）は短く、型番と「構成図」で足ります。図が伝える「どの文字が何を表すか」は、altに詰め込むより、本文に表として置くほうが読む人にも検索にも届きます。このサイトの作例のページが、そのとおりの形です。

SVGを受け付けない置き場所にはPNGを

SVGをアップロードできない仕組みは、まだあります。その場合はPNGで書き出します。このツールのPNG幅は既定で2400ピクセル、800〜4000ピクセルの範囲で指定できます。

幅の目安は、表示される幅の2倍です。ページの本文幅いっぱいに置くなら、本文幅が800ピクセルのとき1600、高解像度の画面を考えて2400にしておけばまず困りません。ただし目安です。読者が指で拡大して読む場面が多いなら、大きめにして実際に表示し、型番の文字が読めるかを確かめてください。

印刷物・PDFに置く

レイアウトソフトがSVGの配置に対応していれば、SVGをそのまま置くのがいちばんきれいです。 Adobe IllustratorとInDesign、近年のWordとPowerPointは、SVGを開いたり挿入したりできます。ただし版によって扱いが違うので、お使いの版で実際に配置し、PDFに書き出したあとの見え方も確かめてください。

SVGが置けない、または見え方が崩れる場合はPNGにします。必要な幅は「仕上がりの幅（インチ）×目標の解像度」で計算できます。幅8cm（約3.15インチ）の図を300ppiで刷るなら、3.15 × 300 ≒ 945ピクセルです。 300は一律の決まりではなく、拡大して配置すれば実効の解像度は下がります。文字と細い線でできた図なので、迷ったら実寸で試し刷りをして、線が途切れていないかを見てください。

暗い背景の上に置く

図は黒い線と黒い文字で描かれ、背景は既定では透明です。そのまま暗い背景のページに置くと、線が背景に溶けて読めなくなります。

対処は二つです。書き出すときに背景を「白」にして図の中に白を持たせるか、ページ側で図の下に白いパネルを敷くか。このサイトの作例ページは後者で、暗い表示モードでも図の周りだけ白くしています。公開前に暗いモードで一度は見ておくと、気づかないまま出すことを防げます。

文字がずれる・別の書体になる、という問題は背景とは別の話で、SVGに書体を埋め込むで扱っています。

渡すときに添えるもの

画像と一緒に、「JSONを保存」で書き出したファイルを渡してください。 SVGやPNGはこのツールに読み戻せません。読み戻せるのはJSONだけです。型番に選択肢が増えたとき、JSONがあれば図を開いて1項目足すだけで済み、無ければ最初から作り直しになります。

デザイナーや印刷所に渡すなら、次の三つを一組にします。

SVG（配置用）
PNG（SVGが使えなかったときの予備。幅を明記）
JSON（更新用。「このファイルで図を再編集できます」と一言添える）

受け取った側で見ること

型番の文字が、作ったときと同じ並びで、同じ間隔で出ているか
引き出し線の先が、それぞれの文字の真下にあるか
注釈の番号が、本文の対応する場所に付いているか
暗い背景なら、図の周りが白いか

一つでも違えば、置き方ではなく書体の問題であることが多いです。上のリンク先で確認してください。

開発者向けの補足: inlineとimg

HTMLに直接書く方法（inline SVG）と、<img>で参照する方法があります。 inlineにすると、図の中の文字がページの文字として扱われ、CSSで色を変えることもできます。ただしCMSによってはSVGの中身を書き換えたり削ったりするので、<img>のほうが確実です。 inlineで置くなら、書体の埋め込みを外してページの書体を当てる、という調整も可能です。このサイトの作例はそうしています。

参考資料

Images Tutorial（W3C WAI）：画像の代替テキストをどう書くかの考え方です。
SVG（MDN）：SVG を HTML に置く方法の解説です。

ツールを開く