bug: svg "sprites" are broken when using svgo
tomcru opened this issue · 6 comments
tomcru commented
Describe the bug
We used to format our svg sprites with npx svgo --pretty -f ./public/sprites. This was working previously, but now returns empty svgs. I couldn't make out the version when this started happening. Issue seems to be coming from <defs>?
To Reproduce
- create file:
/regions.svg
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" overflow="hidden" style="position:absolute;width:0;height:0">
<defs>
<symbol id="Europe" viewBox="0 0 24 24">
<g clip-path="url(#clip0_1273_38264)">
<path fill="#0052B4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10"/>
<path fill="#FFDA44" d="m12 5.913.324.997h1.048l-.848.615.324.997L12 7.906l-.847.616.323-.997-.847-.615h1.048zM7.696 7.696l.934.475.74-.74-.163 1.034.933.476-1.034.164-.164 1.035-.476-.934-1.035.164.741-.74zM5.913 12l.997-.324V10.63l.615.847.997-.324-.616.848.616.848-.997-.324-.615.848v-1.048zm1.783 4.304.476-.933-.74-.741 1.034.164.476-.934.164 1.035 1.034.164-.933.476.164 1.034-.741-.74zM12 18.087l-.323-.997h-1.048l.848-.615-.324-.997.847.616.848-.616-.324.997.848.615h-1.048zm4.304-1.783-.933-.475-.741.74.164-1.035-.934-.475 1.035-.164.164-1.035.476.934 1.034-.164-.74.74zM18.087 12l-.996.324v1.048l-.616-.848-.997.324.616-.848-.616-.848.997.324.616-.847v1.047zm-1.783-4.304-.476.933.741.741-1.035-.164-.475.934-.164-1.035-1.035-.164.934-.476-.164-1.034.74.74z"/>
</g>
<defs>
<clipPath id="clip0_1273_38264">
<path fill="#fff" d="M2 2h20v20H2z"/>
</clipPath>
</defs>
</symbol>
<symbol id="NorthAmerica" viewBox="0 0 24 24">
<g clip-path="url(#clip0_1273_38302)">
<path fill="#F0F0F0" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10"/>
<path fill="#D80027" d="M11.566 12H22c0-.902-.12-1.777-.344-2.608h-10.09zm0-5.217h8.967a10.054 10.054 0 0 0-2.308-2.609h-6.66zM12 22a9.957 9.957 0 0 0 6.225-2.174H5.775A9.957 9.957 0 0 0 12 22m-8.532-4.782h17.064a9.94 9.94 0 0 0 1.124-2.61H2.345a9.94 9.94 0 0 0 1.123 2.61"/>
<path fill="#0052B4" d="M6.632 3.562h.911l-.847.615.324.997-.848-.616-.848.616.28-.86c-.746.62-1.4 1.35-1.94 2.16h.293l-.54.393c-.084.14-.165.282-.242.427l.258.793-.481-.35a9.81 9.81 0 0 0-.327.777l.284.874h1.048l-.848.616.324.996-.848-.616-.508.37C2.027 11.161 2 11.577 2 12h10V2a9.953 9.953 0 0 0-5.368 1.562M7.02 11l-.848-.616-.848.616.324-.996-.847-.616h1.047l.324-.997.324.997h1.047l-.847.616zm-.324-3.91.324.997-.848-.616-.848.616.324-.996-.847-.616h1.047l.324-.997.324.997h1.047zm3.91 3.91-.847-.616L8.91 11l.324-.996-.848-.616h1.048l.324-.997.324.997h1.047l-.847.616zm-.323-3.91.324.997-.848-.616-.848.616.324-.996-.848-.616h1.048l.324-.997.324.997h1.047zm0-2.913.324.997-.848-.616-.848.616.324-.997-.848-.615h1.048l.324-.997.324.997h1.047z"/>
</g>
<defs>
<clipPath id="clip0_1273_38302">
<path fill="#fff" d="M2 2h20v20H2z"/>
</clipPath>
</defs>
</symbol>
<symbol id="World" viewBox="0 0 24 24">
<path fill="#006CA2" d="M21.944 12.001c0 5.492-4.453 9.944-9.946 9.944-5.49 0-9.943-4.452-9.943-9.944 0-5.493 4.452-9.944 9.943-9.944 5.493 0 9.946 4.45 9.946 9.944"/>
<path fill="#BDCF46" d="M18.41 14.378a1.882 1.882 0 0 0-.658-.29c-.304-.046-.47.06-.612-.262-.119-.269-.207-.437-.419-.659-.408-.426-.777-.615-1.33-.828h-.943c-.396-.108-.794-.25-1.146.066-.038.033-.07.075-.104.113-.039.042-.215.057-.272.072-.08.02-.163.043-.247.045-.13.003-.306-.032-.395-.134a.509.509 0 0 1-.088-.25c-.01-.102.034-.191.036-.289.003-.087.007-.187-.017-.27-.05-.172-.245-.222-.396-.255-.09-.02-.179-.033-.27-.063-.23-.078-.111-.392-.014-.531.1-.143.242-.242.003-.372a.561.561 0 0 0-.597.039c-.162.123-.269.361-.465.423-.225.072-.47-.093-.683-.123.021-.284-.121-.806-.114-.935.021-.34.272-.71.6-.8.329-.09.69-.159 1.031-.123.527.056.505.338.78.705.09.12.262.262.418.179.331-.174.23-.621.24-.923.016-.47.318-.753.606-1.1.107-.127.215-.253.32-.382.094-.117.205-.227.364-.257.111-.02.248.001.36.001.184 0 .533.062.64-.126.099-.177-.047-.298-.194-.355-.06-.024-.162-.036-.18-.111-.061-.263.22-.272.396-.3.16-.026.365-.078.486.069.055.066.027.145.089.213.113.121.402.052.524-.018.14-.083.18-.314.18-.464a.386.386 0 0 0-.057-.224c-.12-.17-.473-.249-.65-.35a6.794 6.794 0 0 1-.734-.499 6.376 6.376 0 0 0-.882-.537c-.263-.137-.588-.363-.896-.31-.12.02-.186.107-.212.223-.016.087-.057.175-.057.265.002.11.053.21.084.313.04.127.07.258-.03.364-.096.1-.309.098-.42.015-.135-.102-.19-.265-.339-.343a.714.714 0 0 0-.473-.089c-.172.021-.38.042-.552-.001a.483.483 0 0 1-.328-.41c-.003-.122.024-.291.14-.359.136-.078.362-.058.515-.07a1.57 1.57 0 0 0 .09-.008l.014-.001c.004-.002.01-.002.015-.002.043-.006.084-.01.112-.018-.001-.003-.006-.006-.007-.009.024.045.16-.153.165-.175.024-.1-.05-.215-.014-.308.027-.069.125-.113.19-.134.1-.031.204-.013.306-.003.082.01.17.01.252.026.187.039.193.186.31.3.168.158.27.089.49.119.235.031.853.436 1.063.12.235-.353-.396-.613-.59-.677a1.793 1.793 0 0 1-.816-.566c-.06-.077-.18-.109-.177-.274.005-.134-.081-.205.03-.277.03-.02.15.001.185 0 .062-.006.114-.03.164 0 .076.046.231.24.27.316 0 0 .104.07.223.235.118.16.155.111.299.246.373.348.786.658 1.265.84.258.1.53.176.774.311.278.156.38.357.564.596.518.665 1.978.585 1.622-.464-.394-.302-.74-.542-1.437-.968a6.44 6.44 0 0 0-1.203-.565c-.469-.169-1.22-.412-1.691-.49a13.005 13.005 0 0 0-1.597-.18c-.41-.017-.646 0-.975.017a13.76 13.76 0 0 0-.5.045c-.011.201.28.26.322.444.017.08.023.15-.039.21-.067.066-.16.087-.175.192-.012.092.022.153.058.231.029.06.09.176.038.243-.14.176-.328-.14-.34-.26-.018-.196.044-.365-.154-.488-.134-.083-.497-.119-.552.076-.027.093.078.183.066.291-.026.22-.171.164-.338.192-.291.05-.351.268-.663.123-.03-.156.06-.408-.092-.513-.121-.082-.26.16-.397.105-.342-.138-.302-.144-.666-.036-.386.115-.4.204-.771.389-.17.084-.69.425-.965.617l-.329.248c-.121.097-.21.144-.347.287-.166.146-.308.277-.473.425-.09.101-.171.183-.236.251a10.169 10.169 0 0 0-.405.453c.322.042.383.23.641.398.22.14.488.283.527.552.048.324-.012.686-.003 1.014.018.653.693 1.15 1.095 1.601.179.201.194.452.37.641.097.107.393.636.609.44.172-.156-.28-.634-.243-.853.02-.133.322.134.34.153.126.15.192.367.258.548.143.392.27.566.598.719-.02.188.172.314.343.411.188.107.392.11.592.198.189.086.396.084.571.17.261.126.086.25.233.438.163.21.474.081.695.116.472.073.393.525.687.796.16.152.435.135.638.158.08.009.183.01.246.067.157.14-.027.332-.087.469-.083.183-.14.38-.176.577-.1.553-.08 1.17.323 1.597.438.467.974.678 1.14 1.344.143.557.01 1.102-.091 1.651-.063.33-.515.904-.066 1.147.39.211 1.053-.371 1.308-.593.602-.525 1.397-.845 1.793-1.582.188-.35.355-.719.683-.96.173-.128.372-.212.557-.318.392-.224.626-.7.801-1.094.207-.479.017-.749-.358-1.03m-7.067-8.445a.84.84 0 0 1 .296-.009c.173.042.3.177.432.285.096.077.177.158.263.243.055.056.108.105.096.197-.01.08-.054.118-.126.126-.13.013-.19-.072-.306-.092-.278-.046-.394.422-.671.294-.07-.033-.05-.091-.05-.166a.366.366 0 0 1 .021-.158.461.461 0 0 1 .123-.162c.033-.028.087-.05.113-.088.061-.096-.026-.198-.113-.234-.054-.023-.133-.024-.168-.072-.064-.092-.001-.14.09-.164m10.563 5.2c-.003-.45-.142-1.021-.223-1.403-.183-.23-.349-.113-.635.175-.556.56-.78 1.616-.318 2.296.17.252.388.462.673.528.28.065.39 0 .514 0 .01-.165.026-.632.026-.811-.001-.305-.034-.483-.037-.784Z"/>
<path fill="#BDCF46" d="M13.782 10.556c-.138-.069-.19-.186-.282-.279a.413.413 0 0 0-.177-.108c-.148-.042-.334-.025-.485-.016-.224.013-.794.05-.822.364-.038.4.513.356.786.351.187-.003.369-.072.557-.025.274.067.213.312.426.405.076.033.313.078.387.084.273.024.929-.134.755-.524-.158-.358-.865-.112-1.145-.252"/>
</symbol>
<symbol id="LatinAmerica" viewBox="0 0 24 24"><path d="M21.944 12.001c0 5.492-4.453 9.944-9.946 9.944-5.49 0-9.943-4.452-9.943-9.944 0-5.493 4.452-9.944 9.943-9.944 5.493 0 9.946 4.45 9.946 9.944Z" fill="#006CA2"/><path d="M10.69 3.814c-.226-.11-.311-.299-.462-.449a.679.679 0 0 0-.29-.173c-.24-.068-.546-.041-.794-.027-.366.022-1.3.082-1.347.586-.062.645.84.572 1.288.565.307-.005.605-.116.912-.04.45.108.35.5.699.65.125.054.514.126.634.136.447.038 1.522-.215 1.237-.842-.258-.577-1.417-.181-1.876-.406Z" fill="#BDCF46"/><path d="M17.196 9.494c.293.044.819.275 1.077.466.615.451.927.886.588 1.655-.288.635-.672 1.4-1.313 1.76-.303.17-.63.306-.912.511-.539.389-.812.982-1.12 1.544-.648 1.185-1.951 1.699-2.937 2.544l-.01.009c-.426.363-1.5 1.281-2.134.944-.735-.391.005-1.313.108-1.844.167-.883.384-1.759.15-2.654-.273-1.071-1.15-1.412-1.868-2.162-.66-.688-.694-1.68-.529-2.567.059-.319.152-.635.288-.93.098-.22.4-.528.142-.752-.103-.092-.273-.094-.403-.109-.332-.036-.782-.01-1.045-.253-.482-.437-.351-1.163-1.126-1.282-.361-.055-.87.152-1.138-.185-.241-.302-.312-.481-.514-.72 1-1.019 1.094-1.124 2.247-1.914.391.21.425.49.263.72-.16.225-.354.729.022.854.15.049.295.07.443.102.248.053.568.132.649.41.04.133.032.294.027.434-.003.157-.074.3-.06.463.013.124.062.31.146.403.145.165.435.22.647.215.137-.002.275-.04.405-.072.094-.024.381-.048.445-.116.057-.06.108-.128.17-.18.578-.508 1.23-.28 1.878-.107h1.544c.907.342 1.512.647 2.181 1.332.347.357.492.627.686 1.06.233.518.504.347 1.003.421Z" fill="#BDCF46"/></symbol>
</defs>
</svg>
- run:
npx svgo --pretty regions.svg
results in:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" overflow="hidden" style="position:absolute;width:0;height:0"/>
Running without --pretty has the same results
Desktop (please complete the following information):
- SVGO Version 3.1.0
- NodeJs Version 20.5.0
- OS: macOS 14.0
Additional context
There's multiple svgs just like this in /public/sprites
KTibow commented
This issue is caused by either cleanupIds or removeHiddenElems
KTibow commented
What is the original SVG's purpose? It seems to be to define things, as it renders nothing. How is it being used?
tomcru commented
It is used as a Sprite sheet (instead of requesting a lot of icons on a page, we can just request this file once and pick the item out of it with <use>).
It is for all icons here:
https://main.gamegator.net/games/starfield
These, for example:
Example on how it is used in a React component:
import { VariantProps, cva, cx } from 'class-variance-authority';
import { ComponentPropsWithoutRef } from 'react';
import { Sprite } from '../../../common/types/Sprite';
const styles = cva('', {
variants: {
color: {
primary: 'text-icon-primary',
secondary: 'text-icon-secondary',
tertiary: 'text-icon-tertiary',
success: 'text-icon-success',
'on-color': 'text-icon-on-color',
'on-color-inverse': 'text-icon-on-color-inverse',
error: 'text-icon-error',
none: '',
},
},
defaultVariants: {
color: 'none',
},
});
type Props = {
path: Sprite;
className?: string;
width?: number;
height?: number;
style?: Omit<ComponentPropsWithoutRef<'svg'>['style'], 'width' | 'height'>;
} & VariantProps<typeof styles>;
export function Icon({
path,
className,
width,
height,
style,
...props
}: Props): JSX.Element {
/** helper to find broken icons */
if (!path) {
return <div className="block h-24 w-24 bg-button-danger"></div>;
}
const [type, name] = path.split('/');
return (
<svg
className={cx(styles(props), className)}
style={{
width: `${width}px`,
height: `${height}px`,
...style,
}}
>
<use href={`/sprites/${type}.svg#${name}`} />
</svg>
);
}
tomcru commented
You can basically render the elements inside defs with a # and the id of it, like /sprites/regions.svg#LatinAmerica
KTibow commented
As SVGO caters to standalone SVGs, this isn't a bug, but SVGO working as intended - removing unused definitions. However you can customize SVGO to disable that behavior, by turning off removeHiddenElems and cleanupIds, as these both have the sole purpose to optimize defs within the SVG.
tomcru commented
Thank you, this was indeed the case - had to disable both removeHiddenElems & cleanupIds.
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeHiddenElems: false,
cleanupIds: false,
},
},
},
],
};