ライブラリから web 用に最適化された SVG ファイルの抽出

最終更新日 : 2021年11月17日

ライブラリから web 用に最適化された SVG ファイルを抽出し、SVG ファイルのプロパティをカスタマイズします。

Dreamweaver は、2021 年 11 月 16 日より、Illustrator アセットから SVG を抽出する機能を廃止しました。この回避策を使用して、画像形式オプションを有効にし、Illustrator(.ai)アセットを PNG 32/PNG 24/PNG 8/JPEG 形式に変換することを推奨します。また、ユーザーは Illustrator アプリから Illustrator アセットを SVG 形式にエクスポートすることもできます。

Illustrator の画像またはライセンス認証済みの Adobe Stock の画像を Creative Cloud ライブラリに保存している場合は、それらを web 用に最適化された SVG ファイルとして Dreamweaver web ページに抽出できます。 ライブラリパネルから画像を web ページにドラッグすると、デフォルトで SVG ファイルとして挿入されます。 詳しくは、ライブラリに保存されたグラフィックを再利用するを参照してください。

SVG ファイルのプロパティをカスタマイズする場合は、次の場所にある options.json ファイルの環境設定を編集できます。

  • Windows: %appdata%¥Adobe¥Dreamweaver CC 2015¥<locale>¥Configuration¥SVGOptions¥
  • Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2015/<locale>/Configuration/SVGOptions/

.ai ファイルを SVG ファイルに変換するための JSon オブジェクトには、次のプロパティを含めることができます。

プロパティ名 Value 説明
trimToArtBounds boolean SVG は、アートの境界を OMG ドキュメントのサイズとは無関係に処理します。
useViewBox boolean trimToArtBoundsuseViewBox が true に設定されている場合、ドキュメントのコンテンツはシフトされません。 代わりに、ルート SVG エレメントの viewBox 値が slice に変更され、コンテンツが必要に応じてズームされます。
constrainToDocBounds boolean 表示可能なコンテンツをドキュメントの端で切り捨てます。
preserveAspectRatio 文字列

SVG 仕様で定義された縦横比。 preserveAspectRatio を設定すると、svgWriter の計算値が上書きされます。 したがって、この値は設定しないことをお勧めします。

注意meet または xMidYMid meet では、同等の文字列である xMidYMid を使用してファイルサイズを縮小します。

styling 文字列

このプロパティはオプションです。既定で class: が設定されます。

  • class: グローバルエレメントを使用し、クラス属性を持つスタイルブロックを参照します。
  • style: スタイル属性を使用して、スタイリングプロパティをエレメントに適用します。
  • attribute: プレゼンテーション属性を使用して、スタイリングプロパティをエレメントに適用します。
prefix string すべての ID とクラス名に追加される接頭辞。 これにより、すべての SVG ドキュメントの一意の命名スキームが可能になります。 指定された接頭辞が一意である限り、ID またはクラス名の競合なしで、複数の SVG ドキュメントを単一の HTML ドキュメントにインライン化できます。
cropRect object x、y、幅および高さのプロパティを持つ四角形。 x と y はオプションです。 SVG ドキュメントがトリミングされる四角形を定義します。 サイズがトリミング用の四角形よりも小さい場合は、余白が作成されます。
minify   SVG 出力で、インデント、改行およびホワイトスペースが発生しないようにします。 最小の ID を使用します。
idType string
  • regular: ID を作成するデフォルトの方法。 アプリケーションのレイヤー/オブジェクト名に基づいて作成することをお勧めします。
  • minimal: アプリケーションでユーザーが定義したレイヤー/オブジェクト名に関係なく、できるだけ短い ID を作成します。
  • unique: rfc4122 に基づく UUID を xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx の書式で作成します。
precision number 小数点以下の桁数。 この数値は 0 ~ 10 の範囲にする必要があり、範囲外を指定した場合、数値はトリミングされます。 デフォルトは 3 です。
isResponsive boolean true に設定した場合、SVG ドキュメントがビューポート/イメージ領域に表示されます(幅と高さの属性が SVG ルートに設定されることはありません)。
carriageReturn  boolean デフォルトでは、svgWriter は行末で LF を使用します。 carriageReturntrue に設定すると、行末で CRLF が使用されます。
indentation string インデントとしてカスタム文字列を使用します。 例えば、タブインデントを使用します。 この場合の既定値は 2 つのスペースです。
fillFilter boolean フィルターは、エレメントの塗りつぶしにのみ適用されます。 線は影響を受けず、フィルター済みコンテンツの上に描画されます。
documentUnits  string mm | cm | pc | in - ルートエレメントの幅と高さの属性で使用される特定のドキュメントの単位。