# SVG to JPG 変換機:ベクトルをあらゆるプラットフォームへ
SVG形式は、軽量、スケーラブル、編集可能という現代のウェブの母国語のような存在です。しかし、ベクトルを全く理解しないプラットフォームも存在します。ソーシャルメディア、メールクライアント、Word文書、印刷アプリケーション、そして現実世界の大多数のソフトウェアはラスタライズされた画像で動作します。JPGは、例外なくどこでも受け入れられ、プラグインも追加の変換も不要な、普遍的な共通項です。# SVG vs JPG:ベクトルを写真にする必要があるとき
SVGは画像を数学的な命令として保存します。このベクトルの性質はウェブには最適ですが、アナログの世界やレガシーソフトウェアには見えない場合があります。メールで送信されたSVGファイルは、受信者のクライアントで理解不能なXMLテキストとして表示されることがあります。Word文書に添付されたSVGは、古いバージョンのOfficeでは全くレンダリングされないこともあります。JPGは、各画像をJPEGアルゴリズムによって圧縮された色情報を持つピクセルマトリックスに変換します。アルファチャネルをサポートしていないため、変換機は背景を白で自動的にマージします。代わりに、古い携帯電話、プリンター、スマートTV、20年前の編集アプリなど、 地球上のあらゆるデバイス で開くことができるファイルが得られます。これは最も広く使われている形式であり、多くの文脈において最も価値のある形式でもあります。# 比較:ローカル変換 vs クラウド変換
クラウド変換機
リモートサーバーにファイルをアップロードするツールです。
- ユーザーのSVGコード(独自のデザインデータを含む)が外部サーバーへ送信される
- フォントやグラデーションのレンダリングが一貫しない
- 変換ごとにインターネット接続が必要
- JPGの出力品質を常に構成できるとは限らない
ローカルアーキテクチャ
Vanilla JS技術を使用し、ユーザーのハードウェア上で直接処理します。
- ブラウザを離れるデータは0バイト
- ブラウザのネイティブエンジンを使用した忠実なレンデリング
- 最大の鮮明度を実現する2倍解像度のJPG
- JPG標準に従い、白い背景が自動的に適用される
# 技術的な仕組み
SVGファイルがブラウザの Image 要素に読み込まれ、この要素はXMLを解釈するために独自のベクトルレンダリングエンジンを使用します。視覚的な結果は、出力解像度を最適化するために2倍のスケールで、あらかじめ白い背景を塗りつぶした(JPGが透明度をサポートしていないために必要) HTML5 Canvas 上に描画されます。toDataURL('image/jpeg', 0.92) メソッドが、キャンバスのピクセルを高画質なJPGファイルに変換します。SVGの色は、JPEG圧縮の色空間変換により、わずかな変化が生じることがあります。そのため、色再現が重要なプロフェッショナルな印刷作業に使用する前には、結果をプレビューすることをお勧めします。印刷用途へのヒント
SVGの背景やグラデーションは、JPEG圧縮時のカラープロファイルの違いにより、JPGではわずかに異なって見えることがあります。正確なブランドカラーの精度が重要な印刷所へ送る前や、印刷用マーケティング資料に使用する前には、常に結果をプレビューしてください。# 活用事例と互換性
- Facebook、Twitter、LinkedInでのSVGロゴやイラストの共有。
- OutlookやGmailを介したメールへのベクトルグラフィックスの添付。
- Word文書、Excel、プレゼン資料へのSVGデザインの挿入。
- SVGをサポートしていないオンラインショップへの商品画像の掲載。
- オンデマンド印刷サービス用のファイル準備。