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が動的であり、ユーザー入力に基づいてテキストが変更される可能性がある場合にのみ役立ちます。
画像:これは、ビットマップ画像を含める場合にのみ重要です
<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内では実行できないことを微調整できることがわかります。