JPEGやPNGといった画像と違い無限に拡大できるという大きなメリットがあるSVG。

SVG上に書かれた文字は、埋め込みのフォントやデバイスのフォントが使用されるため、印刷する時のように文字をアウトライン化しないといけません。しかし文字のアウトラインは複雑になりがちで、複雑なパスはSVGのファイルサイズを肥大化してしまいます。

文字のアウトライン化からのパスの単純化

この画像のロゴでは、アウトライン化してSVGにしたものと単純化で曲線の精度を98%にしたものを比べると、ファイルサイズが1/2になりました。

このようにパスを単純化すれば簡単にダイエットができるわけですが、フォントによっては単純化をすると文字の細かな部分が変わり印象が変わりかねません。

SVGでつくることが決まっているなら、ロゴタイプをつくる段階でSVGに最適化しておきたいですね。

ちなみにイラレでSVGをつくるコツは、Adobeさんのヘルプが参考になります。

Illustrator / SVG

Illustrator / SVG

はてブ数

http://helpx.adobe.com/jp/illustrator/using/svg.html

Illustrator / SVG