This post is an addendum to my "Using SVG 'interface' images" tip which you can find here:
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Using-SVG-quot-interface-quot-images/m-p/504387
I introduced that tip as follows: "If . . . you would like to have a small subset of images appear immediately, regardless of your internet connection but, for some reason, cannot or do not want to store all of the images that may be added to your app by users, this tip may help you."
Then, toward the end of the tip I wrote as follows:
When I wrote this tip, I was not aware of @GreenFlux 's SVG Icon Tool, which converts SVGs to AppSheet format. To reduce the amount of text you put in your spreadsheet, I have come to the conclusion, thanks to comments by @jyothis_m , @Fabian_Weller and others, that it is generally preferable to use the SVG Icon Tool to prepare SVGs for insertion in a spreadsheet than to use base64.
Indeed, @GreenFlux 's SVG Icon Tool has proved to be invaluable. Today, however, I learned how to further reduce the size of my SVG images without sacrificing quality. I got AI (either ChatGPT or Claude will work, and probably others I haven't tried yet) to help me make an app that takes the Data URI text strings I'd received from SVG Icon Tool and further optimize them. This led to my file sizes being reduced by about 1/2 to 1/3.
I am not a good enough coder to do this without AI but now, with assistance from AI, I have lots of little apps that take care of tasks like this for me. Whether you are a Mac user (like me) or a Windows user, I think you can make a similar app that will help you reduce the size of any Data URI SVG files you've placed in your spreadsheet.
Here are the instructions that I asked ChatGPT to put together:
Creating an SVG Data URI Optimizer App for Mac and Windows Using AI Assistance
This guide provides structured prompts to help users create an app that optimizes SVG Data URI files by removing unnecessary data and improving compression. The app will allow users to drag and drop a text file containing an SVG Data URI and receive a new, optimized text file in the same directory.
The process relies on:
- SVGO (SVG Optimizer) – A command-line tool for optimizing SVG files.
- Node.js – Required for running SVGO.
- Automation tools (Automator on Mac, PowerShell on Windows).
If users do not yet have these tools, installation instructions are included.
Prompts for ChatGPT or AI Assistance
Use these prompts step-by-step to generate a fully functional automation script for Mac or Windows.
1. Installing Required Software
(Same for both Mac and Windows)
Prompt:
"Help me install the required software for optimizing SVG Data URIs. I need Node.js and SVGO. Provide step-by-step instructions for downloading and installing them."
Expected Response:
- Node.js: Download from nodejs.org and install it.
- SVGO: Open Terminal (Mac) or Command Prompt (Windows) and run:
- Verify installation:
2. Extracting and Optimizing SVG from a Data URI
(Same for both Mac and Windows)
Prompt:
"I have a text file that contains an SVG in Data URI format (e.g., data:image/svg+xml;utf8,...). I need a script that extracts the SVG content, optimizes it using SVGO, and converts it back into a Data URI. The script should create a new text file in the same directory as the original with _optimized added to the filename. Provide a script for this."
Expected Response:
- Extract SVG content from the Data URI.
- Optimize the SVG using SVGO.
- Convert the optimized SVG back into a Data URI.
- Save the new Data URI in a new text file (
filename_optimized.txt).
3. Creating the App (Different for Windows and Mac)
Windows: PowerShell + Batch File
(For Windows, we use PowerShell and a batch file for drag-and-drop support.)
Prompt:
"I need a Windows script that allows drag-and-drop functionality for optimizing SVG Data URI text files. The script should use PowerShell to process the file, call SVGO, and save the result as a new text file in the same folder. Provide a PowerShell script and a batch file that lets users drag and drop a file onto it."
Expected Response:
-
PowerShell Script (OptimizeSVG.ps1)
- Reads the dragged text file.
- Extracts the SVG from the Data URI.
- Optimizes it using SVGO.
- Saves the optimized Data URI to a new text file.
-
Batch File (OptimizeSVG.bat)
- Allows users to drag and drop a file onto the batch file to run the PowerShell script.
Mac: Automator + Shell Script
(For Mac, we use Automator and a shell script for drag-and-drop support.)
Prompt:
"I need an Automator workflow that allows drag-and-drop support for optimizing SVG Data URI text files. It should extract the SVG, optimize it using SVGO, and save the result as a new text file in the same folder. The workflow should start with 'Get Selected Finder Items' to allow drag-and-drop functionality. Provide the necessary shell script for this Automator action."
Expected Response:
-
Automator Workflow:
- Starts with Get Selected Finder Items.
- Passes the file to a Run Shell Script action.
-
Shell Script (inside Automator's Run Shell Script):
- Reads the text file.
- Extracts the SVG from the Data URI.
- Optimizes it using SVGO.
- Saves the optimized Data URI in a new text file.
4. Adding User Notifications
(Different methods for Mac and Windows)
Windows Prompt:
"Modify my PowerShell script to display a Windows Toast Notification after optimization, showing the number of files optimized and any errors."
Mac Prompt:
"Modify my Automator workflow to display a macOS notification after optimization, showing success or failure."
Expected Response:
- Windows: Uses
New-BurntToastNotification for a Windows toast notification.
- Mac: Uses
osascript -e 'display notification ...' for a macOS pop-up.
5. Generating a Log File
(Same for both Mac and Windows)
Prompt:
"Modify my script to create a log file that records each processed file, the original size, the optimized size, and any errors."
Expected Response:
- Writes to a
svg_optimizer_log.txt file.
- Logs:
- File name.
- Original size.
- Optimized size.
- Percentage savings.
6. Creating an HTML Preview File
(Same for both Mac and Windows)
Prompt:
"Modify my script to generate an HTML preview file that visually compares the original and optimized SVGs. The HTML should display both versions side by side."
Expected Response:
- Creates an HTML file.
- Displays original and optimized SVGs.
- Includes file sizes and percentage savings.
Conclusion
By following these AI-generated prompts, users can create a fully functional, drag-and-drop app for SVG Data URI optimization on both Mac and Windows. Each system uses its native automation tools while achieving the same functionality.
LinkedIn
Twitter
