IllustratorからWeb用のSVGをエクスポートするための最適な設定は？
すべてのデバイスのレスポンシブデザインで見栄えを良くするために、WebサイトにSVGロゴを使用したいと考えています。
しかし 問題がある なので、できるだけ多くのデバイスとブラウザをサポートしたいと思います。読み込み速度も重要な考慮事項です。 Adobe Illustratorのエクスポート設定は、これらすべてにどのように適合しますか？
Illustratorには、SVGエクスポートのオプションがいくつかあります。まず、どのSVGプロファイルが最適ですか？
SVG Tinyのファイルサイズは小さいと思いますか？多くのデバイスがSVG Tinyをサポートしていますか？最も重要な違いは何ですか？ （ このW3モンスター を読む必要はありません。）
第二に、画像の場所の最適なオプションは「リンク」だと思いますか？ （感嘆符の後の説明を参照してください。）
あるいは、ブラウザは「埋め込み」オプションをどのようにサポートしていますか？
ありがとうございました！
追伸フォールバックアルファPNGオプションがありますが、SVGを可能な限り最適にサポートする必要があります。 （考えてみると、この場合、alpha-PNG自体が古いIEのソリューションを必要とするため、フォールバックオプション（JPGなど）が最適です。）
更新：さらに設定可能なオプションがあります。私はテキストを扱っていないので、関連するのは小数点以下のみです。ロゴの場合、最大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コンテンツも表示できるはずです。
Fonts注：画像にテキストがない場合、この設定は重要ではありません。
Adobe CEF：ブラウザーで表示する予定のこのオプションを使用しないでください。私が知る限り、これはAdobeのSVGビューアプラグインでのみサポートされている限り、SVGファイルにフォントを埋め込むAdobeの方法です。
SVG：これはフォントをSVGとして埋め込みます。これはFirefoxでサポートされていませんが、モバイルデバイス（通常はwebkitを実行する）のみをサポートする場合に適したオプションです。
アウトラインの作成：大量のテキストがない限り、ほとんどの場合これを行います。大量のテキストがある場合は、WOFFを使用してフォントを埋め込む必要がありますが、これは手動で行う必要があります。
サブセット化：
なし：ユーザーのコンピューターの他のフォントにフォールバックすることを気にしない場合、これを選択すると、以前の設定が無効になり、フォントが埋め込まれなくなります。
使用されているグリフのみ：フォントの埋め込みを選択した場合、ほとんどの場合これが必要になります。使用される文字のみが埋め込まれるため、ファイルサイズが大きくなることはありません。
[残りのサブセット]：これはかなり明確です。フォント全体またはサブセットを含めることを選択できます。 SVGが動的で、ユーザー入力に基づいてテキストが変更される可能性がある場合にのみ役立ちます。
画像：これは、ビットマップ画像を含める場合にのみ重要です
埋め込み：通常はこれが必要です、画像をデータuriとしてエンコードし、svgファイルではなく1つのファイルをその仲間と一緒にアップロードしますビットマップ画像。
リンク：これは、1つのビットマップファイルを参照する複数のsvgファイルがある場合にのみ使用します（svgファイルをレンダリングするたびにダウンロードされるわけではありません）。
imgは外部リソースのロードを許可しないため、SVGが<img>タグを介して表示される場合、リンクされたビットマップ画像は表示されません。さらに、webkitには、svgファイル内にビットマップイメージを埋め込んでも表示されないバグがあります。要するに、ビットマップ画像を埋め込みまたはリンクする場合は、<svg>タグを使用し、<img>は使用しないでください。
Illustratorの編集機能を保持
ソースイメージとして.aiファイルを保存し、SVGファイルをExport for web機能と考えることを好みます。そうすることで、ファイルサイズの縮小に専念し、すべての編集機能を備えたベクターファイルの元のコピーを手に入れることができます。これを選択しないでください。
小数点以下の桁数
デフォルトの3は正常な設定であり、ほとんど忘れることができます。
ただし、この設定を1または0に下げる多くのポイントがある本当に複雑なパスがある場合、ファイルサイズが大幅に削減されます。ただし、ベジェセグメントはこの設定に非常に敏感であり、少し歪んでいるように見える場合があるため、注意が必要です。したがって、この設定を低くする場合は、常にブラウザーで受け入れられるようにしてください。
エンコーディング
文字エンコーディングの背後にある説明はかなり技術的であり、テキストを含むsvgファイルのみに関係します。 必要となる可能性が最も高いエンコーディングはUTF-8です。何をしているのかわからない限り、これを変更しないでください。
Adobe SVG Viewer用に最適化する
Adobe SVG Viewerは、ブラウザーがSVGをネイティブにサポートしていなかった時代のブラウザープラグインです。私はそれが何をするのか分かりませんが、それは無関係です、これをチェックしないでください。
スライスデータを含める
これにより、後でIllustratorでSVGファイルを開き、スライスがある場合はそれを見つける予定がない限り、SVGファイルにメタデータが追加されます。これをチェックしないでください
XMPを含める
ファイルに関するその他のメタデータは、 ここでXMPで読む です。 これをチェックしない
より少ない<tspan>要素を出力する
テキストがない場合、これはグレー表示されます。 SVGはカーニングテーブルをサポートしていないため、特定の文字シーケンスは間隔が広すぎるように見えます。つまり、AVAです。 Illustratorは、tspan要素を追加し、文字の位置を少し調整することで回避します。これにより、ファイルに少し太り気味になります。テキストの外観よりもファイルサイズを重視しない限り、これをチェックしないでください。
パス上のテキストに<textpath>要素を使用する
パス上にテキストがない場合、これはグレー表示されます。ブラウザは、パスにテキストを配置することになると大きく変化する傾向があるため、Illustratorは、ジョブをブラウザに任せるのではなく、文字に回転と位置を適用することで役立つようにしています。 テキストの外観よりもファイルサイズに注意を払わない限り、これをチェックしないでください。
一般的に、SVG全体を調べることをお勧めします。SVGはHTMLによく似ており、Illustratorで実行できないことを微調整できることがわかります。