IllustratorからWeb用のSVGをエクスポートするための最適な設定は？

すべてのデバイスのレスポンシブデザインで見栄えを良くするために、ウェブサイトにSVGロゴを使用したいと考えています。

ただし、問題があるため、できるだけ多くのデバイスとブラウザをサポートしたいと考えています。ロード速度も重要な考慮事項です。Adobe Illustratorのエクスポート設定は、これらすべてにどのように適合しますか？

Illustratorには、SVGエクスポートのオプションがいくつかあります。まず、どのSVGプロファイルが最適ですか？

SVG Tinyの方がファイルサイズが小さいと思いますか？多くのデバイスがSVG Tinyをサポートしていますか？最も重要な違いは何ですか？（このW3モンスターを読む必要はありません。）

次に、画像の場所の最適なオプションは「リンク」だと思いますか？（感嘆符の後の説明を参照してください。）

または、ブラウザは「埋め込み」オプションをどのようにサポートしていますか？

ありがとうございました！

PSフォールバックalpha-PNGオプションがありますが、SVGを可能な限りサポートする必要があります。（考えてみてください。JPGのようなフォールバックオプションは、alpha-PNG自体が古いIEのソリューションを必要とするため、おそらくこの場合に最適です。）

更新：構成可能なオプションがさらにあります。私はテキストを扱っていないので、私が見る唯一の関連するものは小数点以下です。ロゴの場合、最大200x200px（Retinaディスプレイでは400x400px）として表示されるものは、「3」が最適な設定ですか？または「2」でファイルサイズを最小化しますか？

SVGプロファイル

• SVG 1.0：すべての最新のデスクトップおよびモバイルブラウザーはSVG 1.1をサポートしているため、このオプションを選択しないでください。
• SVG 1.1：ほとんどの場合これが必要です。
• SVG Tiny / Basic：これはモバイルデバイス向けのSVGのサブセットです。SVG Tinyをサポートしているデバイスはほんの一握りで、フルスペックではないので、SVG 1.1を使用してください。

注：SVG Tinyはファイルサイズを縮小しません。これは、低処理能力デバイスに適したSVGのサブセットにすぎません。グラデーション、不透明度、埋め込みフォント、フィルターは破棄されます。ErikDahlström氏：すべてのSVG 1.1フルビューアーは、すべてのSVG 1.1 Tiny / Basicコンテンツ（仕様による）を表示でき、Illustratorが作成するすべてのSVG 1.2 Tinyコンテンツも表示できるはずです。

フォントの注：画像にテキストがない場合、この設定は重要ではありません。

• Adobe CEF：ブラウザーに表示するつもりでこのオプションを使用しないでください。これは、AdobeのSVGファイルにフォントを埋め込む方法です。私が知る限り、これはAdobeのSVGビューアプラグインでのみサポートされています。

• SVG：これはフォントをSVGとして埋め込みます。これはFirefoxではサポートされていませんが、モバイルデバイス（通常はwebkitを実行する）のみをサポートする場合に適したオプションです。

• アウトラインを作成する：大量のテキストがない限り、ほとんどの場合これを行います。大量のテキストがある場合は、WOFFを使用してフォントを埋め込む必要がありますが、これは手動で行う必要があります。

サブセット化：

• なし：フォントがユーザーのコンピューターの他のフォントにフォールバックすることを気にしない場合、これは以前の設定を無効にし、フォントを埋め込みません。これを選択します。

• グリフのみ使用：フォントを埋め込むことを選択した場合、ほとんどの場合これが必要になります。使用する文字のみが埋め込まれるため、ファイルサイズが大きくなることはありません。

• [残りのサブセット]：これはかなり明確です。フォント全体またはそのサブセットを含めるように選択できます。これは、SVGが動的で、ユーザー入力に基づいてテキストが変更される可能性がある場合にのみ役立ちます。

画像：これは、ビットマップ画像を含める場合にのみ重要です

• 埋め込み：通常はこれが必要です。画像をデータURIとしてエンコードし、コンパニオンビットマップ画像を含むsvgファイルではなく1つのファイルをアップロードします。

• リンク：これは、1つのビットマップファイルを参照する複数のsvgファイルがある場合にのみ使用します（そのため、svgファイルをレンダリングするたびにダウンロードされません）。

リンクされたビットマップ画像は、SVGが<img>タグを介して表示される場合、img外部リソースのロードを許可しないため表示されないことに注意してください。さらに、webkitには、埋め込んでもsvgファイル内のビットマップ画像を表示しないバグがあります。つまり<svg>、ビットマップ画像を埋め込んだりリンクしたりする場合は、プレーンタグを使用し、は使用しないでください<img>。

Illustratorの編集機能を保持する

.aiファイルをソースイメージとして保存し、SVGファイルをExport for web機能と見なしたいと思います。これにより、ファイルサイズの削減に集中し、すべての編集機能を備えたベクターファイルの元のコピーを保持できます。したがって、これを選択しないでください。

小数位

デフォルト3はまともな設定であり、ほとんど忘れることができます。

ただし、非常に複雑なパスでポイント数が多い場合、この設定を1または0に下げると、ファイルサイズが大幅に減少します。ただし、ベジェセグメントはこの設定に非常に敏感であり、少し歪んでいるように見える場合があるため、注意が必要です。したがって、この設定を下げる場合は、ブラウザで許容できるように見えるようにしてください。

エンコーディング

文字エンコーディングの背後にある説明はかなり技術的であり、テキストを含むsvgファイルのみに関係しています。必要となる可能性が最も高いエンコーディングはUTF-8です。何をしているのかわからない限り、これを変更しないでください。

Adobe SVG Viewer用に最適化

Adobe SVG Viewerは、ブラウザーがSVGをネイティブでサポートしていなかった時代のブラウザープラグインです。私はそれが何をしているのかわかりませんが、それは無関係です、これをチェックしないでください。

スライスデータを含める

これにより、SVGファイルにメタデータの膨張が追加されます。後でIllustratorでSVGファイルを開いてスライスを見つける予定がある場合を除き（スライスがある場合）、これをチェックしないでください。

XMPを含める

ファイルに関するメタデータの詳細については、XMPでこちらをご覧ください。これをチェックしないでください

少ない<tspan>要素を出力

テキストがない場合、これはグレー表示されます。SVGはカーニングテーブルをサポートしていないため、特定の文字シーケンスは間隔が広すぎるように見えますAVA。Illustratorは、tspan要素を追加し、文字の位置を少し調整することで回避します。これはファイルに少し膨張を追加します。テキストの外観よりもファイルサイズを重視する場合を除いて、これをチェックしないでください。

<textpath>パス上のテキストに要素を使用する

パスにテキストがない場合、これはグレー表示されます。パス上にテキストを配置する場合、ブラウザーはさまざまな傾向があります。そのため、Illustratorは、ジョブをブラウザーに任せる代わりに、回転と位置を文字に適用することで役立つようにしています。テキストの外観よりもファイルサイズを重視する場合を除き、これを確認しないでください。

一般に、SVGを一般的に確認することをお勧めします。SVGはHTMLによく似ており、Illustratorでは実行できないことを微調整できるようになります。