私は、あらゆるデバイスに対応したレスポンシブなデザインでウェブサイトが美しく表示されるよう、SVG ロゴを使用したいと考えています。
しかしそれ以来問題があるできるだけ多くのデバイスとブラウザをサポートしたいと考えています。読み込み速度も重要な考慮事項です。Adobe Illustrator のエクスポート設定は、これらすべてにどのように適合しますか?
Illustratorでは、SVGエクスポートにはいくつかのオプションがあります。まず、どの SVG プロファイルが最適ですか?
SVG Tinyはファイルサイズが小さいと思いますか？多くのデバイスがSVG Tinyをサポートしていますか？最も重要な違いは何ですか？（このW3モンスター。
次に、画像の場所として最適なオプションは「リンク」だと思いますか? (感嘆符の後の説明を参照してください。)
あるいは、「埋め込み」オプションに対するブラウザのサポートはどうですか?
ありがとう！
PS フォールバックの alpha-PNG オプションもありますが、SVG が可能な限りサポートされることを望みます。(考えてみると、alpha-PNG 自体に古い IE 用のソリューションが必要なので、この場合、JPG などのフォールバック オプションがおそらく最適でしょう。)
アップデート：他にも設定できるオプションがあります。私はテキストを扱っていないので、関連するオプションは小数点だけです。ロゴの場合、最大 200 x 200 ピクセル (Retina ディスプレイでは 400 x 400 ピクセル) で表示されるものの場合、「3」が最適な設定でしょうか。それとも、ファイル サイズを最小限に抑えるには「2」でしょうか。
ベストアンサー1
SVG プロファイル
- SVG 1.0: すべての最新のデスクトップ ブラウザーとモバイル ブラウザーは SVG 1.1 をサポートしているため、このオプションは選択しないでください。
- SVG 1.1: ほとんどの場合、これが必要になります。
- SVG Tiny/Basic: これはモバイル デバイス向けの SVG のサブセットです。SVG Tiny をサポートするデバイスはごくわずかで、完全な仕様をサポートしていないため、SVG 1.1 を選択してください。
注意: SVG Tiny はファイル サイズを縮小しません。これは、処理能力の低いデバイスに適した SVG のサブセットにすぎません。グラデーション、不透明度、埋め込みフォント、フィルターは破棄されます。
Erik Dahlströ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です何をしているのか分かっていない限り、これを変更しないでください。
スライスデータを含める
これにより、SVG ファイルにメタデータが肥大化します。ただし、後で Illustrator で SVG ファイルを開いてスライス (ある場合) を探す予定がない場合は、これをチェックしないでください
XMPを含める
ファイルに関する詳細なメタデータについては、XMPについてはこちら。これをチェックしないでください
レスポンシブ
この設定により、含まれているグラフィックを CSS で拡大縮小すると仮定すると、SVG ルート ノードから高さと幅のプロパティが削除されることに注意してください。ただし、場合によっては、個々のグラフィックでサイズを宣言する必要があります。このような場合は、必ずこの設定をオフにしてください。
より少ない<tspan>要素を出力する
テキストがない場合、これはグレー表示されます。SVG はカーニング テーブルをサポートしていないため、特定の文字シーケンスは間隔が広すぎるように見えますAVA。Illustrator は要素を追加し、文字の位置を少し調整することでこれを回避しますtspan。これにより、ファイルが少し大きくなります。テキストの見た目よりもファイルサイズを重視する場合以外は、これをチェックしないでください。。
<textpath>パス上のテキストに要素を使用する
パス上にテキストがない場合、これはグレー表示されます。テキストをパス上に配置する場合、ブラウザによって大きく異なる傾向があるため、Illustrator はブラウザに任せるのではなく、文字に回転と位置を適用することで対応しようとします。テキストの見た目よりもファイルサイズを重視する場合以外は、これをチェックしないでください。。
一般的に、SVG 全般について調べてみることをお勧めします。SVG は HTML によく似ており、Illustrator ではできない調整ができることがわかります。