Skip to content

Instantly share code, notes, and snippets.

@Brugman
Last active November 3, 2024 00:53
Show Gist options
  • Save Brugman/ae6f5cacae828c9801ed76fa7c7c1b90 to your computer and use it in GitHub Desktop.
Save Brugman/ae6f5cacae828c9801ed76fa7c7c1b90 to your computer and use it in GitHub Desktop.
SVGOMG for your CLI
module.exports = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
};

SVGOMG for your CLI

These scripts use SVGO which is the tech behind the famous SVGOMG SVG optimization website.

Why run these scripts instead of the SVGO CLI?

  • You dont have to point at a config file.
  • Inline styles are removed via regex.

Why would you need a config file?
The default preset removes the viewBox, which is required to easily scale the image via CSS.

Why would you need inline styles removed?
SVGs prepped for the web are outlines and fills, we generally dont need any inline styles. Most vector drawing apps add styles and SVGO cannot remove them for us.

Requirements:

  • Windows (you can make it work elsewhere)
  • Python
  • NPM

Installation:

  1. Install SVGO globally: npm i -g svgo
  2. Place the py and bat files in a folder that is part of your PATH dirs so you can call the bats everywhere.
  3. Set config_path to the path you chose.

Usage:

# optimize one SVG
svgomg hello.svg

# optimize all SVGs
svgomgall
@echo off
python "%~dp0\svgomg.py" %*
import os
import re
import subprocess
import sys
# config
config_path = r'C:\Tools\python\svgo.config.js'
# app
print()
if len( sys.argv ) < 2:
print('Input file required as argument.')
sys.exit()
input_file = sys.argv[1];
size_old = os.path.getsize( input_file )
print( f'Before: {size_old:>{5}} bytes' )
svgo = subprocess.run( f'svgo "{sys.argv[1]}" --config {config_path} -o -', shell=True, capture_output=True, text=True )
svg_data = re.sub( r' style=".*?"', '', svgo.stdout )
with open( input_file, 'w' ) as file:
file.write( svg_data )
size_new = os.path.getsize( input_file )
print( f'After: {size_new:>{5}} bytes' )
print()
print( f'Reduced by {100-size_new/size_old*100:.2f}%' )
@echo off
python "%~dp0\svgomgall.py" %*
import glob
import os
import re
import subprocess
import sys
# config
config_path = r'C:\Tools\python\svgo.config.js'
# functions
def write_to_file( filename, content ):
with open( filename, 'w' ) as file:
file.write( content )
# app
files = glob.glob('*.svg')
if not files:
print()
print('No files found.')
sys.exit()
print()
print('You are about to optimize & override all SVGs.')
print('Make sure you have a backup of the originals.')
print()
print( 'SVGs found:' )
for file in files:
print( f'- {file}' )
print()
user_input = input( 'Do you want to continue? (y/n): ' )
if user_input.lower() != 'y':
print()
print('No files were modified.')
sys.exit()
print()
for file in files:
size_old = os.path.getsize( file )
svgo = subprocess.run( f'svgo "{file}" --config {config_path} -o -', shell=True, capture_output=True, text=True )
svg_data = re.sub( r' style=".*?"', '', svgo.stdout )
write_to_file( file, svg_data )
size_new = os.path.getsize( file )
print( f'Optimized [ {file:>{30}} ], from [ {size_old:>{5}} ] to [ {size_new:>{5}} ] bytes, [ {100-size_new/size_old*100:>{5}.2f}% ] reduction.' )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment