web-dev-qa-db-ja.com

SVGファイルサイズの最小化

AdobeIllustratorで作成した地図画像を.svgドキュメントとして保存しています。ファイルサイズをできるだけ小さくするためのヒントとコツは何ですか？

svgfilesizeadobe-illustrator
21
Lauren

  1. 「Illustratorの編集機能を保持する」をオフにします。これには、ファイルに巨大な独自の疑似バイナリブロブが含まれます。

  2. 作業を表示する予定のユーザーエージェントがこれをサポートしている場合は、コンテンツを（明示的に、またはWebサーバー設定を介して）GZIPで圧縮します。
    SVGはXMLであるため、テキストであるため、非常に圧縮可能です。

  3. 不要な数値精度を下げます。 （これは、Illustratorから保存するときに[小数点以下の桁数]設定を使用するか、ファイルを後処理して精度を下げることによって行うことができます。）
    たとえば、次の2つのパスは視覚的に区別できません：

    <path d="M102.6923828,391.6152344
 c56.8027344,115.9394531-3.8457031-246.1542969,105.3847656-217.6923828
 s218.4609375-53.0766602,243.8457031,40.7695313
 S541.9228516,411.6152344,435,527s-166.1538086,58.4609375-213.8461914-50
 C173.4614258,368.5385742,46.5385742,277,102.6923828,391.6152344z"

<path d="M102.7,391.6c56.8,115.9-3.8-246.2,105.4-217.7s218.5-53.1,243.8,40.8
 s90,196.9-16.9,312.3s-166.2,58.5-213.8-50C173.5,368.5,46.5,277,102.7,391.6z"

  4. 繰り返される属性ベースのスタイルを、一般的なCSSベースまたはエンティティベースのスタイルに分解します。
    たとえば、を置き換えることができます

    <rect fill="red" stroke="black" stroke-width="10px"   ... />
<circle fill="red" stroke="black" stroke-width="10px" ... />

    with

    .bold { fill:red; stroke:black; stroke-width:10px }
<!-- ... -->
<rect class="bold"   ... />
<circle class="bold" ... />

  5. グループ化されたアイテムへの繰り返しの変換を除外します。
    たとえば、replace

    <rect   transform="translate(102,-64) rotate(10.23)" ... />
<circle transform="translate(102,-64) rotate(10.23)" ... />

    with

    <g transform="translate(102,-64) rotate(10.23)">
  <rect ... />
  <circle ... />
</g>
30
Phrogz