Skip to main content
Interwork Corporation
IDR Solutions Product Support Portal
PDF開発用語集 モードの切替 ダーク/ライト/自動 モードの切替 ダーク/ライト/自動 モードの切替 ダーク/ライト/自動

SVG (image)

SVG(Scalable Vector Graphics)は、ピクセルではなく数学的記述を用いてグラフィックスを定義する、XMLベースのベクター画像形式です。

キーワード: svg (image), SVG (image)

概要

SVG(Scalable Vector Graphics)は、ピクセルではなく数学的記述を用いてグラフィックスを定義する、XMLベースのベクター画像形式です。ラスター形式とは異なり、SVG画像はどのようなサイズにスケールしても品質が劣化しないため、Webアプリケーションやレスポンシブデザインに最適です。PDF文書を扱う際、SVGはグラフィックスを埋め込むためのソース形式として、またPDFコンテンツをWeb互換のベクターグラフィックスに変換するターゲット形式として機能します。特に ( Citation: N.A., (N.A.). (). Document management applications — Electronic document file format enhancement for accessibility — Part 1: Use of ISO 32000-1 (PDF/UA-1) International Organization for Standardization Retrieved from https://www.iso.org/standard/64599.html ) で概説されているアクセシブルな文書を作成する際に重要な役割を果たします。

定義

SVGは、二次元ベクターグラフィックスをXML構文で記述するためのW3C標準です。各SVG画像は、座標と数式を通じて図形、パス、テキスト、その他のグラフィカル要素を定義するテキストベースのマークアップで構成されています。各ピクセルの色情報を保存するラスター形式(JPEGPNG)とは異なり、SVGは画像を描画するための命令を保存します。これは ( Citation: N.A., (N.A.). (). Document management — Portable document format — Part 2: PDF 2.0 International Organization for Standardization Retrieved from https://www.iso.org/standard/75839.html ) でPDFが内部的にベクターコンテンツを表現する方法と類似しています。

SVGファイルには、視覚的要素だけでなく、メタデータ、CSSによるスタイリング、JavaScriptによるインタラクティビティ、ARIA属性によるアクセシビリティ機能も含めることができます。このため、SVGはアクセシブルなグラフィックスの作成に特に価値があります。スクリーンリーダーがXML構造を解析し、代替テキストの説明にアクセスできるからです。これは ( Citation: , (). Retrieved from https://pdfa.org/resource/tagged-pdf-best-practice-guide-syntax/ ) で説明されているタグ付きコンテンツのアクセシビリティ要件と合致する考慮事項です。

重要性

PDF文書を扱う開発者にとって、SVGはいくつかのワークフローにおいて重要な役割を果たします。PDFをWeb形式に変換する際、SVGはPDFグラフィックスのベクター性質を保持し、すべての表示サイズと解像度で品質を維持します。これは、高DPIディスプレイで鮮明さを保つ必要がある技術図、チャート、イラストレーションにとって特に重要です。

SVGはPDF操作の中間形式としても機能します。開発者はPDFからベクターコンテンツをSVGとして抽出し、Webツールを使用して修正し、新しいPDF文書に再インポートすることができます。アクセシブルな文書作成においては、SVGのセマンティック構造により、開発者はグラフィックスに適切なラベルと説明を追加でき、で概説されているアクセシブルなタグ付きコンテンツを作成するための原則をサポートします。

さらに、最新のWebベースPDFビューアーは、PDFベクターコンテンツをブラウザ内でSVGとしてレンダリングすることが多く、高解像度ラスター画像のメモリオーバーヘッドなしにスムーズなズームとパンを可能にします。

仕組み

SVG文書はプレーンテキストのXMLファイルであり、プログラムで作成、編集、解析することができます。ルート要素<svg>はキャンバスと座標系を定義し、<path><rect><circle><text>などの子要素が視覚的コンテンツを記述します。各要素は、スタイリング(塗りつぶし、ストローク、不透明度)と変換(スケーリング、回転、移動)のための属性を持つことができます。

PDFをSVGに変換する際、変換エンジンはPDFのコンテンツストリームを解析し、PDFグラフィックス演算子を同等のSVG要素に変換します。たとえば、PDFのパス構築演算子は、対応する座標データを持つSVGの<path>要素に変換されます。PDF内のテキストは<text>要素になりますが、一貫したレンダリングを保証するためにフォントの埋め込みまたは変換が必要になる場合があります。

SVGをPDFに埋め込む場合、SVGコンテンツをビットマップにラスタライズするか、一部のワークフローではPDFベクターコマンドに変換し直すことができます。最新のPDFライブラリは、インポート時にSVGをベクターコンテンツとして保持し、両形式が共有する解像度非依存性を維持する場合があります。

PDFをWeb表示用のSVGとしてレンダリングする場合、通常、各PDFページは個別のSVG文書または<svg>要素に変換され、PDFの座標系がSVGのviewBox寸法にマッピングされます。これにより、WebブラウザはネイティブなSVGレンダリングエンジンを活用して、スムーズでハードウェアアクセラレーションされた表示を実現できます。

関連用語

  • Vector Graphics(ベクターグラフィックス) – ピクセル配列ではなく数学的パスで定義されるグラフィックスで、無限のスケーリングが可能
  • Tagged PDF(タグ付きPDF) – アクセシビリティとコンテンツ再利用のためのセマンティック情報を含む構造化されたPDF形式
  • Content Stream(コンテンツストリーム) – ページコンテンツをレンダリングする描画コマンドを含むPDF構造
  • HTML Canvas – 宣言的マークアップではなくJavaScriptを使用してグラフィックスをレンダリングする、代替のブラウザ技術
  • PDF/UA – 適切な構造とタグ付けを持つアクセシブルなPDF文書を作成するためのISO標準

出典

(N.A.) (2020)
(N.A.). (). Document management — Portable document format — Part 2: PDF 2.0 International Organization for Standardization Retrieved from https://www.iso.org/standard/75839.html
PDF Association (2023)
(). Retrieved from https://pdfa.org/resource/tagged-pdf-best-practice-guide-syntax/
(N.A.) (2014)
(N.A.). (). Document management applications — Electronic document file format enhancement for accessibility — Part 1: Use of ISO 32000-1 (PDF/UA-1) International Organization for Standardization Retrieved from https://www.iso.org/standard/64599.html