Docker Desktop と SVGO プラグインでしている SVG 最適化について、覚書を残しておきます。
設定ファイル（imagemin.js）
imagemin.js
const keepfolder = require('imagemin-keep-folder');
const path = require('path');
const crypto = require('crypto');
const { JSDOM } = require('jsdom');
const fs = require('fs');
(async () => {
const imageminSvgo = (await import('imagemin-svgo')).default;
// Imageminで最初の圧縮・最適化
await keepfolder(['src/**/*.svg'], {
plugins: [
imageminSvgo({
// コード整形用プラグイン
// js2svg: {
// indent: 2,
// pretty: true,
// closeSelfClosingTag: true, // 自己閉じタグを保持する
// },
plugins: [
'removeDimensions', // 幅と高さを削除し、viewBox のみで制御
'removeXMLProcInst', // XML宣言を削除
'removeComments', // コメントを削除
'removeMetadata', // <metadata> タグを削除
'removeUselessDefs', // <defs> タグ内で使われていないものを削除
'collapseGroups', // グループ要素を一つにまとめる
'convertStyleToAttrs', // インラインのスタイルを対応するSVG属性に変換
'sortAttrs', // 属性をソート
'convertShapeToPath', // 図形を <path> タグに変換
'convertColors', // 色の表現方法を最も短い形式に変換
'convertPathData', // パスデータの圧縮
{
name: "removeAttrs", // 不要な属性を削除
params: {
attrs: 'svg:fill:none' // <svg> タグの fill="none" を削除
}
},
{
name: "inlineStyles", // <style> タグ内のスタイルをインライン化
params: {
onlyMatchedOnce: true,
removeMatchedSelectors: true
}
},
{
name: "cleanupIds", // 未使用IDを削除し、短くする
params: {
remove: true,
minify: true,
preserve: [],
preservePrefixes: [],
force: false
}
},
{
name: "addAttributesToSVGElement", // <svg> タグに属性を追加
params: {
attributes: [
{
'aria-hidden': 'true',
'data-test': 'test'
}
]
}
},
]
})
],
replaceOutputDir: output => {
return output.replace(/src\//, 'dist/')
}
});
// 再帰的にディレクトリ内のすべてのSVGファイルを取得
function getAllSvgFiles(dir) {
let results = [];
const list = fs.readdirSync(dir);
list.forEach(file => {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat && stat.isDirectory()) {
results = results.concat(getAllSvgFiles(filePath));
} else if (filePath.endsWith('.svg')) {
results.push(filePath);
}
});
return results;
}
const svgFiles = getAllSvgFiles('dist');
// 圧縮・最適化が完了した後にプレフィックス処理を実行
svgFiles.forEach(file => {
const svgContent = fs.readFileSync(file, 'utf-8');
const dom = new JSDOM(svgContent, { contentType: 'application/xml' });
const document = dom.window.document;
// ID名に一意のプレフィックスを追加
const elementsWithId = document.querySelectorAll('[id]');
elementsWithId.forEach((element) => {
const id = element.getAttribute('id');
if (id) {
const prefix = crypto.createHash('md5').update(file).digest('hex').slice(0, 8);
const newId = `${prefix}-${id}`;
element.setAttribute('id', newId);
// 参照している属性も更新
const references = document.querySelectorAll(`[href="#${id}"], [xlink\:href="#${id}"], [clip-path="url(#${id})"], [fill="url(#${id})"], [filter="url(#${id})"]`);
references.forEach(ref => {
const attr = [...ref.attributes].find(attr => attr.value === `url(#${id})`);
if (attr) {
const attrName = attr.name;
ref.setAttribute(attrName, `url(#${newId})`);
}
});
}
});
// class名に一意のプレフィックスを追加
const elementsWithClass = document.querySelectorAll('[class]');
elementsWithClass.forEach((element) => {
const classNames = element.getAttribute('class');
if (classNames) {
const prefix = crypto.createHash('md5').update(file).digest('hex').slice(0, 8);
const newClassNames = classNames.split(' ').map(className => `${prefix}-${className}`).join(' ');
element.setAttribute('class', newClassNames);
}
});
fs.writeFileSync(file, document.documentElement.outerHTML, 'utf-8');
});
})();
imagemin.js の解説
svgo プラグイン
-
removeDimensions
SVG をレスポンシブ対応させる。- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-
removeXMLProcInst
XML 宣言（<?xml ... ?>）を削除する。
-
removeComments
ソースコード中のコメントを削除する。
-
removeMetadata
<metadata> タグを削除する。
-
collapseGroups
不要なグループを解除する。<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"> - <g> <path d="...省略..."/> <path d="...省略..."/> - </g>
-
convertStyleToAttrs
インラインのスタイルを対応する SVG 属性に変換する。- <path class="cls-1" d="...省略..." style="fill:#ccc"/> + <path class="cls-1" d="...省略..." fill="#ccc"/>
-
sortAttrs
各要素の属性をアルファベット順にソートする。
-
convertShapeToPath
<circle> タグなどの図形要素を <path> 要素に変換する。- <rect width="10" height="10"/> + <path d="...省略..."/>
-
convertColors
色表現を短い形式（例: #ffffff → #fff ）に変換する。
-
convertPathData
<path> タグなどのパスデータを最適化する。- 座標をより短い指定方式（相対または絶対）に変換
- パスコマンドの変換
（例：直線のようなベジェ曲線を LineTo パスコマンドに変換） - 冗長なパスコマンドの削除
（例：現在の位置に移動するコマンドの削除） - 冗長な区切り文字・先頭のゼロの削除
- 丸め規則を用いた数値の調整
- <path d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21ZM11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z"/> + <path d="M11 21c5.523 0 10-4.477 10-10S16.523 1 11 1 1 5.477 1 11s4.477 10 10 10m0 1c6.075 0 11-4.925 11-11S17.075 0 11 0 0 4.925 0 11s4.925 11 11 11"/>
-
removeAttrs
指定した属性を削除する。
-
inlineStyles
<style> タグ内のスタイルをインラインに変換する。- <defs> - <style> - .cls-1 { - fill: #ccc; - } - </style> - </defs> - <path class="cls-1" d="...省略..."/> + <path class="cls-1" d="...省略..." style="fill:#ccc"/>
-
cleanupIds
未使用のIDを削除・IDを短縮する。
-
addAttributesToSVGElement
<svg> タグに任意の属性を追加する。
ID・clsss にプレフィックス（接頭辞）を追加
異なる SVG 間で ID や class 名が競合すると、バグの原因となることがあります。
（例：異なるアイコンが同じスタイルを持つ、アニメーションが正しく動作しないなど）
これを避けるために、ファイルパスをもとにハッシュを生成して、プレフィックスとして追加してます。
SVG 最適化の Before / After
よく使用するグラフィックツールで SVG を書き出し、比較しました。
追加した属性もありますが、全体的に容量が抑えられています。
figma.svg
before（1,075 バイト）
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11Z" fill="#CCCCCC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21ZM11 22C17.0751 22 22 17.0751 22 11C22 4.92487 17.0751 0 11 0C4.92487 0 0 4.92487 0 11C0 17.0751 4.92487 22 11 22Z" fill="black"/>
<g clip-path="url(#clip0_106_5)">
<path d="M9.43 12.62C9.41 11.2 9.67 10.67 10.85 9.66C11.62 9 11.83 8.68 11.83 8.14C11.83 7.6 11.54 7.29 10.96 7.29C10.29 7.29 9.97 7.67 9.62 8.92L7 8.49C7.14 7.59 7.5 6.78 8.01 6.17C8.65 5.4 9.68 5 11 5C13.4 5 14.65 6.14 14.65 8.3C14.65 9.53 14.27 10.16 12.7 11.41C11.91 12.03 11.64 12.43 11.64 12.99V13.28H9.43V12.62ZM9.19 14.17H11.9V16.63H9.19V14.17Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_106_5">
<rect width="7.65" height="11.64" fill="white" transform="translate(7 5)"/>
</clipPath>
</defs>
</svg>
after（821 バイト）
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-test="test" viewBox="0 0 22 22"><path fill="#CCC" d="M22 11c0 6.075-4.925 11-11 11S0 17.075 0 11 4.925 0 11 0s11 4.925 11 11"/><path fill="#000" fill-rule="evenodd" d="M11 21c5.523 0 10-4.477 10-10S16.523 1 11 1 1 5.477 1 11s4.477 10 10 10m0 1c6.075 0 11-4.925 11-11S17.075 0 11 0 0 4.925 0 11s4.925 11 11 11" clip-rule="evenodd"/><g clip-path="url(#16c3fd09-a)"><path fill="#000" d="M9.43 12.62c-.02-1.42.24-1.95 1.42-2.96.77-.66.98-.98.98-1.52s-.29-.85-.87-.85c-.67 0-.99.38-1.34 1.63L7 8.49c.14-.9.5-1.71 1.01-2.32C8.65 5.4 9.68 5 11 5c2.4 0 3.65 1.14 3.65 3.3 0 1.23-.38 1.86-1.95 3.11-.79.62-1.06 1.02-1.06 1.58v.29H9.43zm-.24 1.55h2.71v2.46H9.19z"/></g><defs><clipPath id="16c3fd09-a"><path fill="#fff" d="M7 5h7.65v11.64H7z"/></clipPath></defs></svg>
illustrator.svg
before（748 バイト）
<?xml version="1.0" encoding="UTF-8"?><svg id="_レイヤー_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.cls-1{fill:#ccc;}</style></defs><g id="_レイヤー_1-2"><path class="cls-1" d="M10,19.5C4.76,19.5.5,15.24.5,10S4.76.5,10,.5s9.5,4.26,9.5,9.5-4.26,9.5-9.5,9.5Z"/><path d="M10,1c4.96,0,9,4.04,9,9s-4.04,9-9,9S1,14.96,1,10,5.04,1,10,1M10,0C4.48,0,0,4.48,0,10s4.48,10,10,10,10-4.48,10-10S15.52,0,10,0h0Z"/><path d="M8.61,11.8c-.02-1.42.24-1.95,1.42-2.96.77-.66.98-.98.98-1.52s-.29-.85-.87-.85c-.67,0-.99.38-1.34,1.63l-2.62-.43c.14-.9.5-1.71,1.01-2.32.64-.77,1.67-1.17,2.99-1.17,2.4,0,3.65,1.14,3.65,3.3,0,1.23-.38,1.86-1.95,3.11-.79.62-1.06,1.02-1.06,1.58v.29h-2.21v-.66ZM8.37,13.35h2.71v2.46h-2.71v-2.46Z"/></g></svg>
after（625 バイト）
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-test="test" viewBox="0 0 20 20"><path fill="#ccc" d="M10 19.5C4.76 19.5.5 15.24.5 10S4.76.5 10 .5s9.5 4.26 9.5 9.5-4.26 9.5-9.5 9.5"/><path d="M10 1c4.96 0 9 4.04 9 9s-4.04 9-9 9-9-4.04-9-9 4.04-9 9-9m0-1C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0"/><path d="M8.61 11.8c-.02-1.42.24-1.95 1.42-2.96.77-.66.98-.98.98-1.52s-.29-.85-.87-.85c-.67 0-.99.38-1.34 1.63l-2.62-.43c.14-.9.5-1.71 1.01-2.32.64-.77 1.67-1.17 2.99-1.17 2.4 0 3.65 1.14 3.65 3.3 0 1.23-.38 1.86-1.95 3.11-.79.62-1.06 1.02-1.06 1.58v.29H8.61zm-.24 1.55h2.71v2.46H8.37z"/></svg>
xd.svg
before（679 バイト）
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g transform="translate(-368 -165)"><circle cx="10" cy="10" r="10" transform="translate(368 165)" fill="#ccc"/><path d="M10,1a9,9,0,1,0,9,9,9.01,9.01,0,0,0-9-9m0-1A10,10,0,1,1,0,10,10,10,0,0,1,10,0Z" transform="translate(368 165)"/><path d="M3.408-3.36H5.616v-.288c0-.56.272-.96,1.056-1.584C8.24-6.48,8.624-7.1,8.624-8.336c0-2.16-1.248-3.3-3.648-3.3a3.719,3.719,0,0,0-2.992,1.168A4.8,4.8,0,0,0,.976-8.144L3.6-7.712c.352-1.248.672-1.632,1.344-1.632a.759.759,0,0,1,.864.848c0,.544-.208.864-.976,1.52a3.084,3.084,0,0,0-1.424,2.96ZM3.168,0h2.7V-2.464h-2.7Z" transform="translate(373 181)"/></g></svg>
after（639 バイト）
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-test="test" viewBox="0 0 20 20"><g transform="translate(-368 -165)"><circle cx="10" cy="10" r="10" fill="#ccc" transform="translate(368 165)"/><path d="M378 166a9 9 0 1 0 9 9 9.01 9.01 0 0 0-9-9m0-1a10 10 0 1 1-10 10 10 10 0 0 1 10-10"/><path d="M376.408 177.64h2.208v-.288c0-.56.272-.96 1.056-1.584 1.568-1.248 1.952-1.868 1.952-3.104 0-2.16-1.248-3.3-3.648-3.3a3.72 3.72 0 0 0-2.992 1.168 4.8 4.8 0 0 0-1.008 2.324l2.624.432c.352-1.248.672-1.632 1.344-1.632a.76.76 0 0 1 .864.848c0 .544-.208.864-.976 1.52a3.08 3.08 0 0 0-1.424 2.96Zm-.24 3.36h2.7v-2.464h-2.7Z"/></g></svg>