134

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

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

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

ここに画像の説明を入力してください

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

第二に、私は画像の場所のための最良のオプションは「リンク」であると思いますか?(感嘆符の後の説明を参照してください。)

ここに画像の説明を入力してください

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

ここに画像の説明を入力してください

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

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

更新:構成できるオプションも他にもあります。私はテキストを扱っていないので、関連するのは小数点以下の桁数だけです。ロゴの場合、最大200x200px(Retinaディスプレイでは400x400px)として表示されるものは、「3」が最適な設定ですか?または、ファイルサイズを最小化するための「2」?

ここに画像の説明を入力してください

4

2 に答える 2

223

ここに画像の説明を入力してください

SVGプロファイル

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

注:SVG Tinyはファイルサイズを縮小しません。これは、処理能力の低いデバイスに適したSVGのサブセットにすぎません。グラデーション、不透明度、埋め込みフォント、フィルターは破棄されます。

ErikDahlströmは次のように述べています。

すべてのSVG1.1フルビューアは、すべてのSVG 1.1 Tiny / Basicコンテンツ(仕様による)、およびおそらくIllustratorが生成するすべてのSVG1.2Tinyコンテンツも表示できる必要があります。

フォントに関する注意:画像にテキストが含まれていない場合、この設定は重要ではありません。

  • 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です。何をしているのかわからない限り、これを変更しないでください。

スライスデータを含める

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

XMPを含める

ファイルに関するその他のメタデータについては、XMPでここを読むことができます。これをチェックしないでください

レスポンシブ

含まれているグラフィックをcssでスケーリングすると仮定すると、この設定により、svgルートノードからheightおよびwidthプロパティが削除されることに注意してください。ただし、場合によっては、個々のグラフィックにそのサイズを宣言させたいことがあります。このような場合は、必ずこの設定のチェックを外してください。

より少ない<tspan>要素を出力します

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

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

パスにテキストがない場合、これはグレー表示されます。パスにテキストを配置する場合、ブラウザは大きく異なる傾向があるため、Illustratorは、ブラウザに仕事を任せるのではなく、文字に回転と位置を適用することで役立つように努めます。テキストの外観よりもファイルサイズを重視しない限り、これをチェックしないでください


一般的に、SVGを一般的に調べることをお勧めします。これは、HTMLに非常によく似ており、Illustrator内では実行できないことを微調整できることがわかります。

于 2012-11-05T18:59:44.040 に答える
1

@methodofactionの優れた説明に更新します。

Illustratorの現在のバージョンでは、エクスポートオプションが少し変更されています。

  1. AdobeSVGViewerはもはや重要ではありません。

  2. しかし、もっと重要なのは、デフォルトでチェックされている「レスポンシブ」という新しい設定があると私は信じています。含まれているグラフィックをcssでスケーリングすると仮定すると、この設定により、svgルートノードからheightおよびwidthプロパティが削除されることに注意してください。ただし、場合によっては、個々のグラフィックにそのサイズを宣言させたいことがあります。このような場合は、必ずこの設定のチェックを外してください。

于 2020-09-23T18:53:20.110 に答える