SVGのファイルサイズをJPEGに近いものに縮小できますか？

ウェブサイトで使用している画像があります。SVGを使用して、任意のサイズでありながら鮮明に見えるようにします。

• このドロップボックスには、SVGファイルと元のIllustratorファイルが含まれています。

• これはJPEGエクスポートです。

  

SVGのファイルサイズはJPGよりもはるかに大きくなります。同様のファイルサイズになるようにSVGを最適化することは可能ですか？それが役立つ場合、品質の一部を失う可能性があります。このSVGオプティマイザーを試しましたが、それほど違いはありませんでした。

イラストレーターファイルをJPGとして保存し、結果をトレースしてSVGとして保存すると、ファイルサイズはかなり小さくなりますが、品質は多少低下します。これは、おそらく元のレイヤーが大きなサイズを引き起こしていると思いますか？私が使用している画像は、SVGに適さないほど複雑すぎませんか？

SVGには、コントローラーの右下に陰影用の埋め込みピクセルグラフィックが含まれています。これは、ファイルサイズの約forに相当します。削除すると、SVGファイルはJPEGと同等になります。おそらく、勾配を使用して適切に同様の効果を達成できます。

SVGファイルサイズを縮小するその他の手法には、次のものがあります。

• すべてのメタデータなどを削除します。Inkscapeには、このためにプレーンSVGとして保存があります。他のプログラムにも似たようなものがあると思います。
• 形状にほとんど追加しないノードを削除します。たとえば、コントローラーの形状に偽のノードがあります。

これは、おそらく元のレイヤーが大きなサイズを引き起こしていると思いますか？

驚くほど多くのレイヤーを使用していない限り（オブジェクトごとに1つのレイヤーと考えてください）、レイヤーはファイルサイズに適切に寄与してはならず、それでもほんの一部です。

私が使用している画像は、SVGに適さないほど複雑すぎませんか？

最初からイメージを合理的に作成できる場合¹、それはSVG形式に対して複雑すぎてはいけません。ファイルサイズが爆発的に増大する魔法の複雑さのしきい値などはありません（おそらく、これは漠然と合理的な形式に当てはまります）。もちろん、解像度を十分に粗く選択するだけであれば、すべてのSVGをより小さいファイルサイズのJPEGにエクスポートできます。しかし、それは必ずしもSVGを使用すべきではないという意味ではありません。

^{¹これは特にトレースや類似の機能がありません。極端な例を挙げます：SVGプリミティブを使用して（つまり、SVGにピクセルグラフィックを埋め込むことなく）写真のすべてのピクセルを正確に再現したい場合、SVG形式で効率的に表現するには結果が複雑すぎると考えるかもしれません。しかし、それはうまくいけば常識です。}

Wrzlprmftがすでに指摘しているように、SVGファイルのサイズの50％以上は、コントローラー上でかなり微妙なシェーディングエフェクトを作成するために使用される埋め込みPNGビットマップイメージによって占有されます。その画像を取り除き、単純な放射状のグラデーションに置き換えるだけで、SVGを約10kbに縮小するのに十分です。

               
^{左側に派手なビットマップシェーディング、右側に単純な放射状グラデーションを備えた編集バージョンの元の画像。}

作業中に、パスをチェックして、単純化するものがあるかどうかを確認する必要もあります。私はあまり見つけませんでしたが、コントローラーのアウトラインには、目に見える違いを生じることなくマージできるいくつかの隣接ノード（上部と下部の中央付近）があります。

そこは簡単に50％節約できますが、まだやめないでください。SVG形式について少しでも知っている場合は、それよりもはるかに良いことができます。

まず、Inkscapeで「Vacuum Defs」を実行して不要な定義を削除し、「プレーンSVG」として画像を保存します。それでは、テキストエディタで開いて、何を取り除くことができるかを見てみましょう。理想的には、統合されたSVGプレビューを備えたエディターを使用する必要があります。そうすることで、編集が画像の外観にどのような影響を与えるか（できればなし）をすばやく確認できます。私はそのためにemacsを使用していますが、同様の機能を備えた他のエディターもあります。

とにかく、SVGファイルをテキストエディターで開いた状態で、単純化を始めましょう。

• 一番上には、大きな役に立たないものがあり<!-- comment -->ます。削除するだけです。

• Illustratorから直接SVGを編集している場合、無駄な<!DOCTYPE ... >行もあります。それも削除します。

• Inkscapeは、役に立たないRDFメタデータブロックを画像に貼り付けることを主張します。<metadata ...>タグを見つけて削除するだけでなく、終了までを含むすべてのものを削除します</metadata>。

• また、ファイルを「プレーンSVG」として保存した場合でも、Inkscapeは依然として多くのカスタム属性をそのファイルに残します。inkscape:or で始まるすべての属性を見つけてsodipodi:削除します。

• メタデータとInkscape固有の属性がなくなったら、<svg>タグからすべての未使用のXML名前空間属性を削除できます。少なくとも、削除しても安全であるべきxmlns:rdf、xmlns:dc、xmlns:cc、xmlns:inkscapeとxmlns:sodipodi。冗長なxmlns:svg属性がある場合は、それも削除します。この時点で残しておくべき名前空間属性は次のとおりです。

  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"

• <svg>タグはまた、あなたが安全に削除することができ、他の無用な属性の束を持っているenable-backgroundとxml:space="preserve"。（これらは、IllustratorのSVG輸出国によって挿入され、そしてInkscapeのは、彼らは無用だ実現するスマート十分ではありません。）viewBoxそれだけの価値繰り返されるため、属性も安全に、このイメージから削除することができx、y、widthおよびheight属性を。

• タグからencodingand standalone属性を安全に削除することもできます<?xml ... ?>。

• それでは、画像データの本質を見てみましょう。何らかの理由で、Inkscapeはid属性がすべて参照されない場合でも、すべての要素に属性を割り当てることを要求します。任意のid値がファイルの別の場所で繰り返されることはありません属性は、（それを検索！）を削除しても安全です。基本的に、保持する必要があるIDは、グラデーションのIDと、<defs>セクション内にある他のオブジェクト（パスなど）のIDだけです。

• また、Inkscapeはのような長いIDを生成することを好みlinearGradient4277ます。削除できないIDは、lg1代わりに短いものに短縮することを検討してください。

• また、次の<defs>セクションが複数あります。それらをマージすると、数バイトが節約されます（そして、一般的にドキュメント構造が簡素化されます）。

• また<g>、ファイルの最後にいくつかの空のグループ（要素）があります。それらを取り除くだけです。また、まったく同じtransform属性を持つ（またはまったくない）複数の連続したグループが存在する場合があります。それらをマージしても安全です。

• 何らかの奇妙な理由で、Inkscape dは<circle>要素の冗長ベジェパス（属性）を保存します。それはまったく理由もなくスペースを占有するので、それらを削除してください。（要素のd属性はそのままにします<path>。実際に何かに使用されます。）

• Inkscapeはstyle、より具体的な属性が短くなるような属性でCSSを使用することも好みます。たとえばfill="#4888fa"、より冗長に書き換えstyle="fill:#4888fa"ます。これらのスタイルを個々の属性に分割することで（そしてデフォルト設定を無用に繰り返すものを削除することで）数バイトを節約できますが、上記のほとんどの変更よりもSVG形式に少し精通しています。

• また、<use ... >要素がある場合は、それらをリンクしている実際の要素に置き換えることで、数バイトを節約できる場合があります。（もちろん、これはリンクされた要素が一度しか使用されない場合にのみスペースを節約します。）Inkscapeは、最初にa <linearGradient>でストップを定義し、次にa で参照する円形グラデーションを間接的に定義することも好き<radialGradient>です 放射状グラデーション内でストップを直接移動し、現在使用されていない線形グラデーションを取り除くことで、それを簡素化できます。ボーナスとして、これを行うことで、すべてのxlink:href属性を削除できた場合xmlns:xlink、<svg>タグから属性を削除できます。

• 最後の余分なバイトをすべて絞り出したい場合は、小数が多すぎる数値を探し、より適切な値に丸めます。ライブプレビューは、値が表示される前に値を丸めることができるかどうかを確認できるため、実際に役立ちます。ただし、すべての数値を慎重にテストして、どれだけ丸められるかを確認したくない場合でも、たとえば1.0000859ピクセルの値をちょうどに丸めるなど、低品質の果物を少なくとも選ぶことができます1。

• 最後に、ファイルのインデントと空白をクリーンアップします。バイトカウントを絶対に最小化するには、すべてを1行に配置する必要があります（少なくとも、空白が必要な属性の前に改行のみを配置する必要があります）が、それは非常に読みにくいです。それでも、いくつかの単純で保守的なインデントを使用して、読みやすさとコンパクトさの間で適切なバランスを取ることができます。

とにかく、私はあなたのSVG画像を次のように手作業で編集しました。

<?xml version="1.0"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  x="0" y="0" width="124" height="52">
<g transform="translate(1,-27.5)">
  <linearGradient id="lg1"
    x1="70.1063" y1="13.4122"
    x2="66.1994" y2="-26.4368"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#154BBF" />
    <stop offset="1" stop-color="#6E8BFF" />
  </linearGradient>
  <path d="M 119.198,75.836 C 115.115,80.541 7.902,78.843 3.585,74.366 -0.734,69.888 -1.322,46.938 2.76,42.233 6.842,37.53 113.821,30.047 118.137,34.524 c 4.319,4.477 5.143,36.609 1.061,41.312 z" id="path3298" fill="url(#lg1)" />
  <linearGradient id="lg2"
    x1="70.4391" y1="13.5887"
    x2="70.4391" y2="-25.3265"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(0.9997,-0.0263,0.0263,0.9997,-7.4,61.3)">
    <stop offset="0" stop-color="#4166FA" />
    <stop offset="1" stop-color="#87A4FF" />
  </linearGradient>
  <path d="M 119.2,71.843 C 115.247,76.118 11.615,74.749 7.447,70.692 3.281,66.635 2.747,45.804 6.7,41.528 c 3.953,-4.277 107.372,-11.239 111.539,-7.183 4.167,4.057 4.915,33.222 0.961,37.498 z" id="path3305" fill="url(#lg2)" />
  <path stroke="#fff" stroke-width="5" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#4888fa" d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -7.099,-1.84 -3.233,-0.954 -5.221,-1.627 -6.961,-2.308 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.37,1.6315 3.944,1.1635 12.873,4.1185 14.692,7.5355 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" />
  <path fill="#87b5ff" d="m 114.774,40.292 c -1.17,-2.151 -7.571,-4.939 -14.293,-6.921 V 33.37 c -0.023,-0.007 -0.047,-0.014 -0.07,-0.021 -0.023,-0.007 -0.047,-0.015 -0.071,-0.02 l 0,0 c -6.723,-1.985 -13.612,-3.12 -15.761,-1.949 -4.296,2.337 -9.198,17.315 -6.265,21.228 0.907,1.209 3.014,2.449 4.466,2.043 1.452,-0.404 2.121,-3.4 2.652,-3.174 2.518,1.077 5.601,2.117 8.744,3 3.119,0.966 6.272,1.765 8.972,2.229 0.569,0.097 -0.498,2.975 0.502,4.104 1.001,1.128 3.443,1.232 4.861,0.709 4.586,-1.693 8.602,-16.933 6.263,-21.227 z" />
  <path fill="#2f67c9" d="m 90.818,42.604 c -0.097,-0.194 -0.901,-0.575 -1.999,-1.006 0.317,-1.135 0.497,-2.007 0.401,-2.2 -0.319,-0.641 -3.681,-1.766 -4.323,-1.447 -0.192,0.096 -0.574,0.9 -1.004,1.998 -1.135,-0.315 -2.006,-0.497 -2.201,-0.401 -0.64,0.319 -1.766,3.681 -1.446,4.322 0.096,0.193 0.901,0.575 1.997,1.006 -0.316,1.134 -0.496,2.007 -0.4,2.199 0.32,0.64 3.682,1.767 4.323,1.447 0.193,-0.095 0.575,-0.901 1.005,-1.997 1.135,0.314 2.008,0.496 2.199,0.401 0.642,-0.32 1.767,-3.682 1.448,-4.322 z" />
  <path fill="#4888fa" d="m 100.282,33.311 c -0.024,-0.007 -0.046,-0.013 -0.069,-0.02 -0.023,-0.006 -0.046,-0.013 -0.07,-0.02 l 0,0 c -2.455,-0.725 -4.932,-1.334 -7.181,-1.755 -0.765,2.073 -1.164,4.497 -0.789,5.91 0.627,2.363 9.764,5.059 11.574,3.414 1.096,-0.996 2.091,-3.297 2.566,-5.483 -1.876,-0.731 -3.937,-1.428 -6.031,-2.046 l 0,0 z" />
  <circle fill="#639bff" r="3.427" cy="46.947" cx="101.382" />
  <circle fill="#4888fa" r="2.868" cy="45.940" cx="109.28" />
  <circle fill="#2f67c9" r="2.868" cy="52.538" cx="106.287" />
  <radialGradient id="rg3"
    cx="90.874" cy="39.29"
    fx="90.874" fy="39.29"
    r="19.89"
    gradientUnits="userSpaceOnUse"
    gradientTransform="matrix(1.7028,-0.3387,0.276,1.3872,-70.22,16.58)">
    <stop stop-color="#1166a8" stop-opacity="0" offset="0" />
    <stop stop-color="#1166a8" stop-opacity="0.02" offset="0.45" />
    <stop stop-color="#1166a8" stop-opacity="0.63" offset="1" />
  </radialGradient>
  <path d="m 103.734,64.225 0,0 c -0.921,-0.271 -1.661,-0.724 -2.2,-1.342 -0.917,-1.051 -0.957,-2.455 -0.88,-3.576 -1.831,-0.373 -3.866,-0.886 -5.973,-1.508 -0.375,-0.11 -0.75,-0.223 -1.124,-0.338 -0.378,-0.107 -0.753,-0.216 -1.128,-0.326 -2.107,-0.622 -4.095,-1.295 -5.835,-1.976 -0.544,0.983 -1.34,2.14 -2.679,2.525 -0.789,0.227 -1.656,0.204 -2.577,-0.068 -1.415,-0.417 -2.876,-1.431 -3.723,-2.583 -1.731,-2.354 -1.283,-6.55 -0.601,-9.655 0.964,-4.399 3.692,-11.662 7.252,-13.641 3.374,-1.877 12.426,0.468 16.245,1.591 l 0.274,0.081 c 3.795,1.123 12.724,4.078 14.543,7.495 1.914,3.596 0.262,11.176 -1.317,15.393 -1.113,2.978 -3.016,6.746 -5.746,7.782 -1.338,0.505 -3.117,0.564 -4.531,0.146 z" fill="url(#rg3)" />
</g></svg>

このSVG画像は、上記の2番目のサンプル画像とほとんど区別できず、5189バイトしか使用せず、JPEG画像よりもかなり少なくなります。まださらに最適化できると確信していますが、これは実際には数分で練習すればできることのほんの一例です。（実際にSVGコードを編集するよりも、この回答を入力するのに時間がかかりました。）

最後に、このSVGコードをgzipで圧縮すると、1846バイト（！）に縮小され、JPEGバージョンのサイズの4分の1をわずかに超えます。

「Scour」拡張機能について誰も言及していないことに少し驚いています。Inkscape（v0.47現在）にバンドルされており、Ilmari Karonenが言及した最適化の多くを実行します。

これを圧縮されたSVG（SVGZ）に変換し、Webページにimage.svgzを配置できます。

gzip image.svg
mv image.svg.gz image.svgz

または、Adobe Illustratorで「SVG圧縮」として保存するだけで、image.svgzファイルが書き込まれます。

ただし、テストイメージの場合は、JPGよりも大きくなります。

image.jpg:   7268 bytes
image.svg:  22385 bytes
image.svgz: 14614 bytes

最近、https：//petercollingridge.appspot.com/svg-editor（ソースコード）でSVGファイルの最適化に役立つツールを見つけました。この場合、良好な結果が得られ、ファイルサイズはJPGの半分をわずかに超える3.7kBになりますが、少し手動で調整します。

このツールを使用してSVGファイルを最適化すると、ファイルを手動でゴルフするよりも大幅に短い時間で済みます。

SVGOMG！はSVG最適化のための素晴らしいWebアプリです

アプリの作成者によると、SVGOMGはSVGOの「M issing G UI」です。

提供されたイメージで実行すると、gzip された直後3.42kbにになり1.4kbます。