SVG to PDF
SVGベクターグラフィック — ロゴ、アイコン、ダイアグラム、技術図面 — を1つのPDFドキュメントに変換します。ファイルはブラウザ内で処理 — デバイスから出ることはありません。
SVG to PDFは、ウェブ上のベクター画像のW3C標準であるScalable Vector Graphicsを、1つのPDFドキュメントに変換します。SVGはブラウザのネイティブレンダリングエンジン経由でメインスレッドで2× DPIでラスタライズされ、シャープさを確保した上で、Web Worker内のpdf-libを使用してPDFに組み立てられます。結果は画面表示と印刷の両方に適しますが、複雑なSVG機能(フィルター、マスク、外部リソース)は不完全にラスタライズされる可能性があります。
SVG to PDFとは?
SVG(Scalable Vector Graphics)はW3Cが推奨するベクター画像フォーマットで、ロゴ、アイコン、ダイアグラム、チャート、インフォグラフィック、技術図面に使われます。ラスター形式(JPG、PNG、WebP)と異なり、SVGは形状を数学的なパスとして保存するため、品質を損なうことなく任意のサイズに拡大縮小できます。SVGは<strong>2001年</strong>からW3C勧告であり、すべての現代ブラウザでネイティブにサポートされています。Figma、Sketch、Adobe Illustrator、Inkscape、D3.js、MermaidなどはすべてSVGを書き出します。
SVGからPDFへの変換は、デザインソフトを持っていない受信者とベクターグラフィックを共有するとき、Word文書にロゴを埋め込むとき、印刷可能な校正としてダイアグラムを送るときによく行われます。ほとんどのオンラインSVG変換ツールはファイルをリモートサーバーにアップロードします — SVGが機密のブランドロゴ、未公開製品モックアップ、機密技術図面である場合は厄介です。このツールは変換全体をブラウザ内で実行します。SVGがネットワークを越えることはありません。
ブラウザ内SVG変換はどう動作しますか?
ブラウザのWorker内では、createImageBitmapがSVG blobをWorkerコンテキストでデコードしないため、SVGは扱いにくいです。Pikowlはメインスレッドでラスタライズすることでこれに対処します:各SVGは<img>要素経由で読み込まれ(ブラウザが完全なSVGエンジンでレンダリング)、シャープさのために2× DPIでcanvasに描画され、PNG blobとしてエクスポートされます。PNGはpdf-libを使用して新しいPDFドキュメントに埋め込むWeb Workerに送信されます。PDFはURL.createObjectURL経由でダウンロード可能なBlobとして提供されます。サーバーには何も送信されません。
SVGロゴや機密グラフィックをここで変換するのは安全ですか?
はい。ツールを使用しながらDevToolsのネットワークタブを開いてください — 変換中に送信リクエストがないことが確認できます。SVGはFile API経由でローカルに読み込まれ、ブラウザのローカルSVGエンジンによってレンダリングされ、結果のPDFはダウンロードするまでブラウザのメモリ内にのみ存在します。ブランドロゴ、未公開製品モックアップ、エンジニアリング図面はSVGの一般的なユースケースです — 変換をローカルに保つことが重要です。
SVGの隠れたメタデータについては?
SVGファイルは<title>、<desc>、<metadata>タグに隠れたテキストコンテンツを含むことがあります — 作者情報、ソフトウェアバージョン(generator="Adobe Illustrator 28.0")、内部レイヤー名、コメントアウトされた下書きまでも含むことがあります。<image href="…">タグ経由で外部画像参照を含むこともあり、ブラウザはレンダリング時にこれらを取得します。PikowlはSVGを埋め込み前にPNGにラスタライズするため、これらのメタデータはすべて削除されます — PDFには表示される画像のみが含まれます。
制限とその理由は?
1回の変換で最大50 SVG、1ファイルあたり5 MB、合計50 MBでソフト警告、100 MBでハード上限。SVGの複雑さはファイルサイズと線形に比例しないため、ファイルあたりの上限はラスター形式よりはるかに小さくなっています — 何千ものパスと複雑なフィルターを持つ5 MBのSVGはレンダリングに数秒かかり、ラスタライズ中に数百MBのメモリを消費することがあります。典型的なSVG(ロゴ、アイコン)は小さいので、ファイル数の上限は高め(50)です。
SVGでPikowlはSmallpdfやiLovePDFと比べてどうですか?
実質的な違いは、処理場所、毎日の使用制限、価格です。SmallpdfとiLovePDFはSVG to PDFを単独ツールとして提供しておらず — どちらもSVGを汎用画像→PDFパイプラインに通し、サーバー側で再ラスタライズします。下の数字は2026年4月時点の各サービスの公開無料プランを反映しています。
| 機能 | Pikowl | Smallpdf | iLovePDF |
|---|---|---|---|
| ファイルが処理される場所 | あなたのブラウザ | リモートサーバー | リモートサーバー |
| 登録必須 | いいえ | 任意 | 任意 |
| 出力品質 | ブラウザ内で2× DPIラスタライズ | サーバー側でラスタライズ | サーバー側でラスタライズ |
| 最大ファイルサイズ(無料) | 25 MB | 5 MB | 200 MB(合計) |
| 価格 | 無料 | 無制限$9/月 | プレミアム$7/月 |
出典:smallpdf.com/pricingおよびilovepdf.com/pricing、2026年4月取得。
主な用途
- ブランドロゴ校正:編集可能なソースファイルを露出させずに、Figmaから書き出したSVGロゴをクライアントレビュー用にPDFとして送信します。
- アイコンセットのアーカイブ:SVGアイコンセット(Material、Phosphor、Lucide)をデザイナー向けの1つのPDFリファレンスシートにまとめます。
- 技術ダイアグラム:MermaidやPlantUMLから書き出したSVGシーケンス図を、エンジニアリングドキュメント用の印刷可能なPDFに変換します。
- データ可視化エクスポート:D3.jsやPlotlyのSVGチャートが、研究論文やレポートに含めるPDF図になります。
- ブランドガイドラインバンドル:複数のサイズと向きのロゴを1つのPDFとして印刷会社への引き渡し用にまとめます。
- CADベクターエクスポート:SVGで書き出したフロアプランや建築図面を、ポータブルなPDFに変換します。
FAQ
SVGはPDF内でベクターとして保持されますか?
いいえ — 埋め込み前に2× DPIでラスタライズされます。PDFは埋め込みベクターコンテンツをサポートしますが、ブラウザ内のSVG→PDFベクター変換にはより重い依存関係(svg2pdf.jsなど)が必要で、現時点では意図的に除外しています。2× DPIラスターは標準96 DPI画面でシャープに見え、典型的な文書サイズでうまく印刷されます。真のベクター保持が必要な場合は、Inkscapeの「Save As PDF」のようなデスクトップツールを使ってください。
なぜ2× DPIラスターですか?
2×はスイートスポットです:Retina/HiDPI画面とA4までの印刷サイズでシャープな出力を生成しつつ、結果のPDFを小さく保ちます。より高いDPI(3×または4×)はわずかにシャープな印刷出力を生成しますが、PDFを劇的に肥大化させます。低いDPI(1×)は現代の画面ではぼやけて見えます。
SVGアニメーションはPDFに残りますか?
いいえ。SVGはCSSアニメーションやSMIL
なぜファイルサイズ上限は5 MBだけですか?
SVGのファイルサイズはレンダリングの複雑さをうまく予測しません。何千ものベジェパス、複雑なグラデーション、フィルターを持つ1 MBのSVGはラスタライズに数秒かかり、レンダリング中に数百MBを消費することがあります — 25 MBのJPEGよりはるかに悪いです。5 MBの上限はモバイルデバイスでのレンダリングリスクを管理可能に保ちます。
SVGフィルターやグラデーションは正しくレンダリングされますか?
ほぼはい — ブラウザのネイティブSVGレンダラーを使用し、これはフィルター、グラデーション、マスク、クリップパスを含むSVG 1.1仕様の全機能をサポートします。SVG 2機能(新しいフィルタープリミティブ、高度なテキストレイアウト)はすべてのブラウザでレンダリングされない場合があります。特定のフィルターが正しく見えない場合、デザインツールでエクスポート前にSVGを単純化すると通常解決します。
SVGに外部画像参照を含められますか?
外部の<image href="https://…">参照は読み込みに失敗します — ブラウザはBlobとして読み込まれたSVG内のクロスオリジン画像取得をブロックします。外部画像を含めるには、変換前にSVG内でデータURI(data:image/png;base64,…)として埋め込んでください。同じことが外部フォント参照にも当てはまります。システムフォントで<text font-family="…">を使うか、デザインツールでテキストをパスに変換してください。
SVGはサーバーにアップロードされますか?
いいえ。変換は完全にブラウザ内で実行されます — DevToolsのネットワークタブを開けば、プロセス中に送信リクエストがないことが確認できます。SVGはFile API経由でディスクから読み込まれ、ブラウザのローカルSVGエンジンによってレンダリングされ、pdf-libを使用してPDFに埋め込まれ、ダウンロードとして提供されます。
数字で見る
- SVGは2001年にW3C勧告となり、IE9(2011)以降すべての主要ブラウザでネイティブにサポートされてきました。今日ではウェブで支配的なベクターフォーマットです。
- SVGとして典型的な企業ロゴは5 KB未満ですが、印刷解像度の同等のPNGは数百KBになります — ファイルサイズとシャープさの両面で、ベクターは概ね写真のような複雑さに達するまで勝ります。
- Figma、Sketch、Adobe Illustrator、Inkscape、Affinity DesignerはすべてネイティブSVGをエクスポートします。D3.js、Mermaid、PlantUML、ほとんどのJavaScriptチャートライブラリもSVGを生成し、SVGをデザインとコードの間のコネクタフォーマットにしています。