ウェブデザイナー
クライアントのロゴやインフォグラフィック（PDF形式で納品）を、鮮明で軽量なSVG形式としてウェブサイトに直接埋め込むことができます。このSVG形式は、Retinaディスプレイでも完璧に表示され、あらゆるコンテナ幅に合わせて拡大縮小されます。
PDFをSVGに変換する理由とは？
ラスター画像は高解像度になると劣化します。PDFから抽出したPNG画像は画面上では鮮明に見えますが、印刷、Retinaディスプレイ、または大判グラフィック用に拡大するとぼやけてしまいます。一方、SVGは解像度に依存しません。PDFからエクスポートしたベクター図は、モバイル画面で100ピクセルでも会議室のディスプレイで10,000ピクセルでも同じように表示されます。ロゴ、技術図、インフォグラフィック、スライドグラフィックなどのPDFコンテンツをWebページ、アプリ、またはデザインファイルに埋め込む必要があるデザイナーや開発者は、あらゆるサイズで鮮明さを保つSVGを選択します。
LuraPDFのPDFからSVGへのコンバーターをは、PDF.jsのSVGGraphicsレンダラーを使用しています。このレンダラーはPDFコンテンツストリームを走査し、描画コマンドをSVGパス、テキスト、画像要素に直接マッピングします。プロ仕様のデザインツールで作成されたベクターPDFの場合、出力は真のスケーラブルベクターとなり、Illustrator、Inkscape、Figmaで編集可能、HTMLに埋め込み可能、CSSまたはJavaScriptでアニメーション化可能です。アップロードやサーバーキュー、有料プランによるファイルサイズ制限は一切ありません。PDFファイルをドラッグ＆ドロップし、ページを選択するだけで、すぐに本番環境で使用できるSVGファイルをダウンロードできます。
PDFをオンラインでSVGに変換方法
PDFからSVGへの変換は誰が利用しているのか？
ロゴを抽出するデザイナー、図を埋め込む開発者、拡張可能な記録を作成するアーカイブ担当者など、あらゆる人がPDFからSVGへの変換を利用している。
フロントエンド開発者
PDF仕様書からSVG図をReact、Vue、またはAngularコンポーネントに直接インポートできます。外部画像ライブラリを使用せずに、スケーラブルでCSSによるスタイル設定が可能で、アニメーションも実現できます。
印刷・看板デザイナー
クライアントから提供されたPDFマスターから看板のアートワークや大型グラフィックをSVG形式で復元し、再ラスタライズすることなくIllustratorで任意の物理サイズに拡大縮小できます。
アイコンライブラリ管理者
PDFスタイルのガイドや仕様書からアイコンデザインを個別のSVGファイルとして抽出し、SVGOで最適化して、アイコンライブラリまたはFigmaコンポーネントセットに追加します。
技術文書作成チーム
PDFマニュアルから技術図面、回路図、フローチャートをSVG形式に変換し、ドキュメントサイトにインラインで埋め込むことができます。これにより、検索、ズーム、アクセスが可能になります。
ブランド＆アーカイブチーム
過去のPDFファイルから、ブランド資産のベクターアーカイブを作成します。SVGは、すべてのパスとグリフをオープンで将来性のあるフォーマットで保存するため、20年後でもあらゆるツールで読み取ることができます。
ブラウザベースのPDFからSVGへの変換の利点
ローカルでの処理は、独自の設計に関するプライバシーリスクをゼロにし、即座に結果が得られ、有料サーバーへの依存も不要であることを意味します。
- ベクターPDFから真のベクター出力を実現。あらゆる解像度において、品質劣化なしで無限に拡大縮小可能です。
- フォントのアウトライン化によりフォントへの依存性がなくなり、SVGはどこでも同じようにレンダリングされ、フォントが欠落している場合でも代替フォントは使用されません。
- ページごとのエクスポートは、デザインシステムコンポーネントに直接マッピングされます。つまり、各ページが1つのアセットになります。
- アップロード不要 ― 独自のブランド資産や未公開のデザインファイルは、お客様のコンピュータから外部に持ち出されることはありません。
- ベクターコンテンツにおいて、同等の視覚品質を維持しながら、高解像度PNGよりもファイルサイズが小さい。
- 透かしなしで無料 — 100ページのスライドデッキを個別のSVGファイルとして、有料購読なしでエクスポートできます。
PDFからSVGへの変換の仕組み
LuraPDFはPDF.jsのSVGGraphicsクラスを使用します。このクラスはcanvasレンダラーと同じページレンダリングインターフェースを実装していますが、ラスターピクセルの代わりにSVG要素を書き込みます。レンダラーはPDFコンテンツストリームを走査しながら、PDFの描画演算子（moveto、lineto、curveto、fill、stroke）をd属性を持つ対応するSVGパス要素にマッピングします。テキストランは、PDFに埋め込まれたフォントデータを使用してSVGテキスト要素にマッピングされます。コンテンツストリームで見つかったラスター画像はbase64エンコードされ、SVG画像要素として埋め込まれます。
フォントのアウトライン化を選択すると、埋め込まれたフォントデータからグリフのアウトラインをトレースすることで、テキスト要素がSVGパスコマンドに変換され、フォントに依存しないファイルが生成されます。生成されたSVGマークアップはBlobにシリアル化され、ブラウザのネイティブ圧縮APIを使用して、単一ファイルとして直接ダウンロードされるか、複数ページエクスポート用にZIPアーカイブにまとめられます。この処理中、ブラウザのタブからデータが外部に送信されることはありません。タブを閉じると、すべての状態が即座にクリアされます。
LuraPDFとその他のPDFからSVGへの変換ツールとの比較
| 特徴 | LuraPDF | クラウドコンバート | Adobe Illustrator |
|---|---|---|---|
| ブラウザのみ / アップロード不可 | はい | いいえ | いいえ |
| 真のベクトルパススルー | はい | はい | はい |
| フォントアウトラインオプション | はい | 部分的 | はい |
| 無料、ファイル数制限なし | はい | 無料枠には限りがあります | 有料購読 |
PDFからSVGへの変換結果を向上させるためのヒント
変換前後のいくつかの調整により、デザインツールやウェブ上で使いやすい、よりクリーンなSVGファイルが生成されます。
- Tip 1:
SVGを外部に共有する際にアウトラインフォントを使用すると、フォントへの依存性がなくなり、どのデバイスでも同一のレンダリングが保証されます。
- Tip 2:
IllustratorやInkscapeでSVGの編集を続け、リアルタイムで編集可能なテキストが必要な場合は、フォントを埋め込んでください。
- Tip 3:
スキャンしたPDFでは真のベクターSVGは生成できません。検索可能なテキストが必要な場合は、まずOCR PDFを実行するか、高解像度のラスター画像が必要な場合はPDF to PNGを使用してください。
- Tip 4:
エクスポート後にSVGOでSVGを圧縮すると、見た目を変えることなくファイルサイズを30～70%削減できます。
- Tip 5:
スライドデッキの場合は、すべてのページをZIPファイルとしてエクスポートし、個々のSVGファイルをFigmaに個別のフレームとしてインポートしてください。
- Tip 6:
ブラウザの動作が遅くなった場合は、複数ページのPDFを1ページずつ処理してください。大きなベクターPDFはメモリを大量に消費する可能性があります。
PDFからSVGへの変換 — よくある質問
PDFを無料でSVGに変換にはどうすればよいですか？
LuraPDFにPDFファイルをアップロードし、必要なページを選択し、フォント処理方法を選択して、「ダウンロード」をクリックします。変換はブラウザ上で実行されるため、登録もサーバーへのアップロードも不要で、費用もかかりません。
PDF内のテキストは、SVGファイル内でも編集可能なテキストとして保持されますか？
はい、ソースPDFにベクターテキスト（Illustrator、Figma、InDesign、またはWordで作成されたもの）が含まれている場合、テキストグリフはSVGテキストノードとして渡されます。受信者が同じフォントをインストールしていない場合は、アウトラインオプションを使用してテキストをパスに変換。
PDFファイルがスキャン画像だった場合はどうなりますか？
スキャンされたPDFはラスター画像であり、ベクターデータは含まれていません。SVG出力では、ラスター画像がSVGコンテナ内に埋め込まれます。これによりSVGファイルは生成されますが、真のベクターパスは生成されません。真のベクター出力を得るには、ソースとなるPDFがベクター文書である必要があります。
各ページを個別のSVGファイルとしてエクスポートできますか？
はい。ページごとのエクスポートを有効にすると、LuraPDFは各ページごとに番号付きのSVGファイルを作成し、ZIPアーカイブとして配信します。また、1ページだけを選択して、1つのSVGファイルを直接取得することもできます。
エクスポートされたSVGファイルは、IllustratorやInkscapeで編集可能ですか？
はい。ベクターPDFから生成されたSVGファイルは、Adobe Illustrator、Inkscape、Figmaで完全に開くことができます。個々のパスを選択したり、色を調整したり、要素を拡大縮小したりしても、画質が劣化することはありません。
フォントを埋め込むべきか、それともテキストをパスに沿ってアウトライン化すべきか？
SVGを外部で共有または公開する場合は、テキストをアウトライン化してください。フォントに依存しないため、どこでも同じレンダリング結果が得られます。デザインツールでSVGの編集を続け、後でテキストの内容を変更する場合は、フォントを埋め込んでください。
PDFからSVGへの変換はモバイル端末でも動作しますか？
はい、このツールはiOS版SafariとAndroid版Chromeで動作します。ただし、非常に大きい、または複雑なPDFファイルは、RAM容量の少ないスマートフォンでは処理速度が低下する場合があります。最適なパフォーマンスを得るには、一度に1ページずつ処理してください。
デザインデータや機密性の高いPDFファイルをオンラインで変換のは安全ですか？
はい。LuraPDFはPDF.jsを使用してブラウザ内で変換を行うため、ファイルデータがサーバーに送信されることはありません。ブランド資産、独自の図面、未公開のデザインファイルなども安全に処理できます。
PDFファイルにパスワードが設定されている場合はどうすればよいですか？
まず、弊社のPDFロック解除ツールを使用してPDFのロックを解除してください。これにより、ブラウザ上のパスワードが完全に削除されます。その後、こちらに戻ってロック解除されたファイルをSVGに変換。
高解像度におけるSVGの品質は、PNGと比べてどうですか？
ベクターコンテンツの場合、SVGはあらゆる解像度において、あらゆるラスター形式よりも優れています。ベクターSVGは、ビルボードサイズから顕微鏡サイズまで、鮮明さを保ったまま拡大縮小できます。ラスターコンテンツ（スキャンしたページ）の場合は、高解像度のラスター出力としてPDFからPNGへの変換を使用してください。
ブラウザでPDFをSVGに変換 — ベクター形式、非公開、無料
ロゴ、図、スライドグラフィック、アイコンなど、あらゆるベクターPDFからスケーラブルなベクターグラフィックを抽出できます。ファイルをサーバーにアップロードする必要はありません。ページごとのエクスポート、フォントのアウトライン化、ZIPダウンロードに対応。登録不要、ウォーターマークなし。PDFファイルをドロップするだけで、すぐに使えるSVGファイルが生成されます。