SVG (第3回 EPS/PDFのSVG変換)
SVG変換作業を行う際の注意
PDFやEPSをSVGに変換するには、Adobe Illustratorを使います。
Adobe Illustrator上で作業を行う場合は、以下のことに注意してください。
フォントの置き換えが起きないようにする
元のファイルで使われているフォントがすべてインストールされている環境で作業してください。
元のファイルで使われているフォントが不足していると、[フォントの問題]メッセージが表示されます。
[フォントの問題]メッセージが出た場合は、[キャンセル]をクリックして作業を中止し、必要なフォントをインストールしてください。
[フォントの問題]メッセージを無視して作業を続けた場合、不足しているフォントが異なるフォントに自動的に置き換わってしまいます。
アートボードをオブジェクト全体に合わせる
SVG形式で保存する前に、[オブジェクト]-[アートボード]-[オブジェクト全体に合わせる]を実行して、アートボードが画像の最小領域を示すようにしてください。
アートボードは、SVG保存時にビューボックスに変換されます。(ビューボックスについては、「第1回 SVGの基礎」を参照してください。)
画像の周囲の余白は、SVG画像をはめ込む側(HTMLなど)で確保するので、SVG側で余白を意識する必要はありません。
ただし、印刷時のバランスを重要視する場合は、SVG側で余白を調整する場合があります。
用途により文字のアウトライン化を行う
印刷用のSVGを作成する場合は、SVG保存時のオプションで文字のアウトライン化を行ってください。
文字のアウトライン化を行うと、テキストの編集がしにくくなるため、編集用にアウトライン化前の版も残しておくと便利です。
電子マニュアル用のSVGを作成する場合は、文字をアウトライン化しないことをおすすめします。
理由は、マニュアルでは、画像内の文字列も検索できる方が便利だからです。(アウトライン化を行った文字は検索できなくなります。)
EPSをSVGに変換する
EPSをSVGに変換する手順は次のとおりです。
EPSをSVGに変換する手順
- Adobe Illustratorを起動し、変換したいEPSファイルを開きます。
- メニューから、[オブジェクト]-[アートボード]-[オブジェクト全体に合わせる]を選択します。
- アートボード(赤い枠)と表示されている画像の間に余白が無いことを確認します。
- 余白がある場合は、非表示の図形や不要なクリッピング枠があることを示しています。
- 非表示の図形や不要なクリッピング枠を削除した後、手順2を再度実行してください。
- アートボードが示す範囲がSVGのビューボックスになります。
- メニューから、[ファイル]-[別名で保存]を選択します。
- [別名で保存]画面で、[ファイルの種類]として[SVG]を選択し、[保存]をクリックします。
- [SVGオプション]画面で、[SVGプロファイル]として[SVG 1.1]を選択します。
- SVGの利用形態に応じて、[文字]を[SVG]または[アウトラインに変換]に設定します。
- [OK]をクリックします。
PDFをSVGに変換する
SVGにはページという概念がないため、複数ページのPDFを一括変換することはできません。
複数ページのPDFをSVG変換する場合は、1ページずつSVGに変換してください。
PDFのページをSVGに変換する手順
- Adobe Illustratorを起動し、変換したいページがあるPDFファイルを開きます。
- [PDFを開く]画面で変換したいページを選択し、[OK]をクリックします。
- メニューから、[オブジェクト]-[アートボード]-[オブジェクト全体に合わせる]を選択します。
- アートボード(赤い枠)と表示されている画像の間に余白が無いことを確認します。
- 余白がある場合は、非表示の図形や不要なクリッピング枠があることを示しています。
- 非表示の図形や不要なクリッピング枠を削除した後、手順2を再度実行してください。
- アートボードが示す範囲がSVGのビューボックスになります。
- メニューから、[ファイル]-[別名で保存]を選択します。
- [別名で保存]画面で、[ファイルの種類]として[SVG]を選択し、[保存]をクリックします。
- [SVGオプション]画面で、[SVGプロファイル]として[SVG 1.1]を選択します。
- SVGの利用形態に応じて、[文字]を[SVG]または[アウトラインに変換]に設定します。
- [OK]をクリックします。
