svg最適化(軽量化)

まずはsvgoをnode.jsでインストールします。

node.jsのバージョンは、v22.0.0

svgoのバージョンは、3.3.2

です。

svgo.config.jsを作り下記の通り記述して、設置します。

export default {
  plugins: [
    'preset-default',
    {
      name: 'removeAttrs',
      params: {
        attrs: 'style',
      },
    },
    {
      name: 'addClassesToSVGElement',
      params: {
        classNames: [], 
      },
    },
    {
      name: 'removeStyleElement',
    },
    {
      name: 'removeTitle',
    },
    {
      name: 'removeDesc',
    },
    {
      name: 'cleanupAttrs',
    },
    {
      name: 'removeMetadata',
    },

  ],
};

そして、もうひとつ。package.jsonに以下を追加します。

"type": "module"

package.jsonに上記を追加せず、svgo.config.jsファイルをsvgo.config.mjsとしてもOKでした。

あとはコマンドを打てばOKです。

input.svgを最適化したものがoutput.svgになります。

svgo --config=svgo.config.js input.svg -o output.svg

.mjsとした場合は、下記コマンドで。

svgo --config=svgo.config.mjs input.svg -o output.svg

<?xml version="1.0" encoding="UTF-8"?><svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.43 167.39"><defs><style>.cls-1{fill:none;}.cls-2{fill:#97c0e8;opacity:.83;}.cls-3{opacity:.23;}.cls-3,.cls-4{fill:#7fc5ef;}.cls-4{opacity:.46;}.cls-5{fill:#6cc0ea;opacity:.64;}</style></defs><g id="svg_group"><path class="cls-1" d="M0,126.57V40.83L70.72,0V85.75S0,126.57,0,126.57ZM70.71,.02L0,40.84V126.56s70.7-40.82,70.7-40.82V.02Z"/><path class="cls-1" d="M141.43,126.57h0s-70.71-40.83-70.71-40.83V0s0,0,0,0l70.71,40.82V126.57ZM70.72,.02V85.74l70.7,40.82V40.83L70.72,.02Z"/><polygon class="cls-4" points="0 126.57 70.72 167.39 70.72 81.66 0 40.83 0 126.57 0 126.57"/><polygon class="cls-2" points="70.72 167.39 141.43 126.57 141.43 40.83 70.72 81.66 70.72 167.39 70.72 167.39"/><polygon class="cls-5" points="70.71 81.66 141.42 40.83 70.71 0 0 40.83 70.71 81.66 70.71 81.66"/><polygon class="cls-3" points="141.43 126.57 70.72 167.39 0 126.57 70.72 85.74 141.43 126.57 141.43 126.57"/></g></svg>

これがこうなりました。

 <svg xmlns="http://www.w3.org/2000/svg" id="svg" viewBox="0 0 141.43 167.39">
    <defs />
    <g id="svg_group">
      <path
        d="M0 126.57V40.83L70.72 0v85.75zM70.71.02 0 40.84v85.72l70.7-40.82V.02ZM141.43 126.57 70.72 85.74V0l70.71 40.82zM70.72.02v85.72l70.7 40.82V40.83z"
        class="cls-1" />
      <path d="m0 126.57 70.72 40.82V81.66L0 40.83z" />
      <path d="m70.72 167.39 70.71-40.82V40.83L70.72 81.66z" />
      <path d="m70.71 81.66 70.71-40.83L70.71 0 0 40.83z" />
      <path d="m141.43 126.57-70.71 40.82L0 126.57l70.72-40.83z" />
    </g>
  </svg>