MacとWebでSVGを使う方法

Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）は、Webでよく使われるサイズ変更可能な画像形式です。macOSでの使い方をご紹介します。

最新のウェブブラウザや画像アプリは、ベジェ曲線などの数学的計算を用いて画像を拡大縮小する機能を備えています。これは、固定されたビットマップ画像とは対照的です。固定されたビットマップ画像は、拡大縮小がうまくいかず、ブロック状でピクセル化された外観になることがあります。

スケーラブル（または「ベクター」）グラフィックスは、数学的な手法で画像を記述します。画像のサイズを変更しても、画質の劣化を目立たせずに、新しいサイズで完全に再計算できます。

スケーラブルグラフィックスの歴史は数十年前に遡り、コンピュータサイエンスの研究に端を発しています。1980年代後半にはデスクトップパブリッシング（DTP）革命が起こり、その結果、スケーラブルグラフィックスが主流となりました。

その時に、グラフィックやテキストをさまざまな印刷サイズや表示サイズに合わせてサイズ変更できることが重要だということが明らかになりました。

初期のDTPアプリには、Aldus Freehand、Adobe Illustratorなどがありました。もちろん、Illustratorは現在もAdobeのCreative Cloudアプリスイートに残っています。

これらのアプリにより、クリエイターやデザイナーはグラフィックを作成し、コントロールポイントを使って操作し、サイズや形状を自由に変更することができました。これにより、ピクセルのグリッドのみで構成される均一なビットマップ画像を編集する場合と比較して、画像の変更が非常に容易になりました。

NeXTなどの初期のデスクトップコンピュータも、 Display Postscriptなどの技術を用いて、画面表示にスケーラブルグラフィックスを採用していました。今日のAppleのオペレーティングシステムは、Core Graphics（別名「Quartz」）と呼ばれる同様の技術を使用して、画像を表示する前に画面外で計算を行っています。

Adobe Photoshop などの一部の最新アプリには、ビットマップ グラフィックをベクター形式に変換またはベクター化する機能がありますが、結果は異なる場合があります。

インターネットとSVG

1990年代にインターネットが普及し始めた頃、ウェブ上のグラフィックのほとんどはビットマップ形式でした。しかし、数年後、高解像度の大型ディスプレイの普及とブラウザウィンドウのサイズ変更機能の登場により、ウェブにはスケーラブルなグラフィックが必要であることが明らかになりました。

コラボレーションの要件には、Web上の複数の関係者がグラフィックをリアルタイムで操作する機能も求められます。ここでスケーラブル・ベクター・グラフィックス（SVG）が役立ちます。

ベクターグラフィックに関するサードパーティ標準が存在しなかったため、ワールドワイドウェブコンソーシアム（WC3）のSVGワーキンググループは、2001年にウェブ上での使用を目的としたスケーラブルベクターグラフィックス（SVG）勧告を作成しました。SVGファイルには、フルカラーパレットを使用して任意のサイズで画像をきれいに描画および拡大縮小する方法、さらには一部のアニメーション形式も記述されています。

SVGワーキンググループは、スケーラブルなグラフィックフォーマットに関する複数の商用提案を検討しましたが、最終的にはオープン仕様に決定しました。RFC図面でSVG画像を使用するためのRFCは、後にRFC 7996として公開されました。

WC3では、承認されていない新しいSVG 2規格も策定中です。モバイルデバイスの普及に伴い、SVG Tiny（SVGT）とSVG Basic（SVGB）という2つの規格も追加導入されました。

SVGは一般的なオープンXMLデータ標準に基づいており、ほとんどの最新システムやウェブブラウザ間での互換性がほぼ保証されています。SVG XMLは非常にコンパクトで、主にタグ、座標、形状記述、色などの描画コマンドで構成されています。

SVGの初期の採用は限られていました。主な理由は、一般的なブラウザのサポートが不足していたためです。2010年頃から、より多くのブラウザがSVGレンダリングに対応するようになり、採用が急増し始めました。2017年までに、SVGはWebで広く受け入れられるようになりました。

Windows プラットフォームでは、バージョン 8.0 より前のほとんどのバージョンの Internet Explorer は SVG をサポートしていません。

SVGを使用する最も明白な理由は、スケーラビリティです。Webブラウザのウィンドウのサイズを変更すると、Webページとそのすべての構成要素もそれに応じてサイズが変更されます。

サイズ変更されたウィンドウに合わせて任意のサイズで画像をすばやく再計算して再描画できるため、Web 画像の品質が大幅に向上します。

SVGファイルはgzip形式で圧縮することもでき、ウェブページへの読み込み速度が向上します。圧縮されていない場合でも、SVGファイルは通常非常に小さく、ウェブ上で使用されるSVGファイルの多くは10KB未満、さらに5KB未満のサイズです。

画像のダウンロードを許可するサイトでは、SVGを使用することで、追加のサーバーや変換を必要とせずに、ウェブページを介してグラフィックファイルをウェブ上で簡単に交換できます。SVGファイルは一部のユーザーインターフェースでも使用されており、例えばデスクトップアプリのウィンドウサイズを変更した際に、インターフェースの一部がきれいに拡大縮小されます。

Mac 上の SVG

macOSはSVGをサポートしており、SVGグラフィックを画像ファイルとして編集、エクスポート、インポート、保存できる高品質なアプリが数多くあります。ほとんどのSVGファイルの拡張子は.svgまたは.svgzです。

こうしたアプリには次のようなものがあります (ただし、これらに限定されません)。

1. macSVG
2. 箱型SVG（20ドル）
3. スケッチ（月額10ドル）
4. オムニグラフル
5. インクスケープ
6. Canva（月額15ドル）
7. ギャップリン（視聴者のみ）
8. アフィニティ デザイナー 2 (69 ドル)
9. Pixelmator Pro（50ドル）
10. Adobe Illustrator（月額23ドル）

Sketchなどの一部のアプリは、SVGだけでなく、CSS（ウェブ）、PNG、JPG、GIF、TIFF、WebPなどのビットマップ、Figmaファイル（.fig）、PDF、Adobe IllustratorおよびPhotoshopファイル、さらには生のSVGコードなど、様々なファイルや形式のインポート/エクスポートが可能です。Sketchは、GIFやWebPなどのインポートされたグラフィック形式のアニメーションには対応していません。

Autodesk Fusion などの一部の設計アプリは SVG ファイルをインポートして使用できますが、直接編集したり操作したりすることはできません。一般的に、ほとんどの CAD アプリは SVG の直接編集をサポートしていません。

「SVG として保存」などのサードパーティ アプリの中には、ネイティブにエクスポートされた CAD ファイルを SVG ファイルに変換できるものがありますが、結果はさまざまです。

Microsoft 365 をご利用の場合、SVG のインポート、画像の回転、特定のサイズへの拡大縮小は限定的にサポートされていますが、現時点では SVG の完全な編集はサポートされていません。ただし、SVG 画像のアウトラインや塗りつぶしを変更したり、Microsoft 365 内の SVG ファイルを 365 アプリで使用される Office Shapes に変換したりすることは可能です。

どの Mac SVG アプリを使用すべきでしょうか?

長年、Mac用の無料SVGアプリとして最も人気があったのはInkscapeとBoxy SVG（後に商用化）でした。これらのアプリは、シンプルで使いやすく、分かりやすいSVG編集とエクスポートに今でも最適です。

しかし、2022年にアーカンソー州の開発者ダグラス・ワードがmacSVGをリリースしたことで、状況は一変しました。macSVGは現在、MacにおけるSVG編集の絶対的なリーダーとなっています。macSVGは使いやすく、驚くほど豊富な機能を備えています。SVG画像の編集に加え、あらゆる要素のXMLをワンクリックで直接表示することも可能です。

利用可能なツールには、シェイプ、ポイント、パスのコントロール、シェイプのモーフィング、テキスト、画像、そしてパスと曲線の変換機能が含まれます。また、Web用にエクスポートされたSVGを完全なXMLファイルで表示することもできます。

AppleのFinal Cut Proに似たタイムラインエディタも搭載されており、SVG画像のアニメーション作成が驚くほどスムーズで滑らかです。macSVGはHTML5ビデオとCore Graphicsコードも生成できます。

SketchとCanvaは、おそらく最も人気のある最新のSVGエディタであり、どちらも手頃な価格です。グラフィックデザイナーであれば、おそらく既にAdobe Illustratorの有料版を使っているでしょう。

Pixelmator Pro と Affinity Designer が当然の選択ですが、どちらも価格が高くなります。

ウェブ上のSVG

SVGファイルとコードの主な使用例はWebであることは明らかです。そして、優れたSVG Webフレームワークが数多く存在します。以下にいくつか例を挙げます。

1. Adobe の Snap.svg
2. SVG.js
3. SVG.NET
4. SVG からキャンバスへの変換のための Fabric.js
5. SVG-Edit（Webブラウザで直接SVGを編集できる）
6. SwiftSVG（主にアイコンと単純な図形のレンダリング用）

これらのフレームワークのほとんどは、SVGをWeb上で表示するために必要なWebコードのほとんどを既に提供しているため、Webプロジェクトにこれらを含めることで開発時間を短縮できます。

サイトのSVGコードを、できるだけ多くのプラットフォーム上の様々なブラウザでテストし、互換性を確認しましょう。Tobias Strebitzer氏によるFigma用SVGツールキットもあります。

ウェブプロジェクト用のSVGファイルを作成したら、シンプルな表示を行うには、通常、ウェブサーバーにファイルをインクルードし、コード内で参照するか、ページの読み込み時に動的に読み込むことになります。画像を特定のサイズでのみ表示したい場合を除き、ほとんどの場合、スケーリングはブラウザによって自動的に処理されます。

全体的に、SVG は、ほとんどのブラウザであらゆるサイズの画像を素早くレンダリングするための単一の共通オープン スタンダードを提供するため、優れた Web テクノロジーです。

さらに詳しく知りたい場合は、W3 Schools に無料の SVG チュートリアルがあり、svgrepo.com に巨大な SVG アイコン リポジトリがあります。

さらに詳しい分析については、J. David Eisenberg 著の『SVG Essentials』もぜひご覧ください。