svgo on inlined SVG data-urls in CSS

[rgant]

Unclear to me if this tool is supposed to be running svgo on inlined svg in a CSS file:

For example:

.about {
  background-image: url('../assets/about.svg');
}

Is built into:

.about {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2018.0.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20480.097%20466.097'%20xml:space='preserve'%3e%3cstyle%3e%20svg%20{%20background-color:%20teal;%20}%20g%20{%20position:%20absolute;%20bottom:%200;%20}%20%3c/style%3e%3c!--%20fill%20color%20should%20be%20the%20same%20as%20light-gray%20--%3e%3cg%3e%3cpath%20fill='%23ececec'%20d='M206.759,332.99H39.225c-3.894,0-7.065-3.173-7.065-7.067V53.353c0-3.893,3.172-7.065,7.065-7.065%20h401.631c3.895,0,7.065,3.172,7.065,7.065v59.696c11.763,1.389,22.785,5.244,32.159,11.581V53.353%20c0-21.63-17.602-39.225-39.225-39.225H39.225C17.602,14.128,0,31.722,0,53.353v272.569c0,21.631,17.602,39.227,39.225,39.227%20h134.62v52.581h-21.229c-13.316,0-24.12,10.796-24.12,24.12c0,13.324,10.804,24.12,24.12,24.12h67.71%20c-8.463-11.902-13.566-26.35-13.566-42.037V332.99z'/%3e%3cpath%20fill='%23ececec'%20d='M341.739,441.645v-34.742h-70.662V184.999c0-4.681,3.8-8.489,8.479-8.489h159.887%20c4.679,0,8.478,3.808,8.478,8.489v68.676h12.046c7.364,0,14.179,2.127,20.113,5.597v-74.273c0-22.417-18.23-40.648-40.638-40.648%20H279.556c-22.407,0-40.638,18.231-40.638,40.648v238.933c0,22.417,18.23,40.647,40.638,40.647h69.438%20C344.566,458.22,341.739,449.359,341.739,441.645z'/%3e%3cpath%20fill='%23ececec'%20d='M459.967,273.775h-77.996c-11.104,0-20.132,9.037-20.132,20.138v147.732%20c0,11.101,9.028,20.131,20.132,20.131h77.996c11.102,0,20.13-9.03,20.13-20.131V293.912%20C480.097,282.811,471.068,273.775,459.967,273.775z%20M385.958,297.894h70.019v127.703h-70.019V297.894z%20M420.977,451.993%20c-2.215,0-4.193-0.896-5.7-2.277c-1.713-1.555-2.812-3.739-2.812-6.228c0-4.694,3.801-8.495,8.512-8.495%20c4.679,0,8.479,3.801,8.479,8.495c0,2.489-1.1,4.672-2.795,6.228C425.152,451.098,423.174,451.993,420.977,451.993z'/%3e%3c/g%3e%3c/svg%3e");
}

There are still comments in there, so it doesn't appear to be optimized. Other SVG files used with Astro Image are being optimized.

Astro Config

import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import { shield } from '@kindspells/astro-shield';
import playformCompress from '@playform/compress';
import astroPwa from '@vite-pwa/astro';
import type { PwaOptions } from '@vite-pwa/astro';
import { defineConfig } from 'astro/config';

import manifest from './webmanifest.json';

const pwsOpts: PwaOptions = {
  experimental: {
    directoryAndTrailingSlashHandler: true,
  },
  includeAssets: [ 'icon.svg' ],
  manifest,
  manifestFilename: 'site.webmanifest',
  registerType: 'autoUpdate',
  workbox: {
    globPatterns: [ '**/*.{css,js,html,svg,png,ico,txt}' ],
    navigateFallback: '/',
  },
};

// https://astro.build/config
export default defineConfig({ // eslint-disable-line import-x/no-default-export -- Config needs default export
  integrations: [
    mdx(),
    astroPwa(pwsOpts),
    shield({}),
    playformCompress(),
    sitemap(),
  ],
  site: 'https://rob.gant.ninja',
});

[NikolaRHristov]

SVGO is ran against your .svg files in the public dir or target dir.

[rgant]

Ok, so I need to manually run svgo on files manually because once they are in the Path: ["./dist"] they are inlined into the CSS file and are no longer .svg files. Thanks!