Reduce the size of SVGs

Sonny Piers

Last update: Dec 26, 2022

Related tags

Overview

Oh My SVG

Reduce the size of SVGs

About

Oh My SVG let you export unoptimized SVG files into smaller versions.

Under the hood, it uses SVGO to remove or approximate information that is not required for rendering.

It lets you preview and tweak the parameters to obtain a satisfactory result before saving.

Remember that Oh My SVG removes information and metadata that may be useful, do not overwrite your original/source SVG files.

Installation

Setup flatpak then

flatpak install re.sonny.OhMySVG
flatpak run re.sonny.OhMySVG

Roadmap

better icon
zoom in and out
out of process svgo
- toggling switches not smooth
- block UI threads
rasterize
- Export to png
- Export to webp
UI
- Filename as headedr bar subtitle
- Already optimized 🎉
- use libadwaita
- basic/advanced plugins
support drag'n drop file https://gitlab.gnome.org/GNOME/gtk/-/issues/3094
support pasting file
support copying file
show original / compare original
preview in browser
compared gzipped

Development

cd OhMySVG
./re.sonny.OhMySVG src/car-lite.svg

Make changes and hit Ctrl+Shift+Q on the window to restart the application.

To pass the tests you have to install a few dependencies

# Install development dependencies
sudo dnf install --assumeyes npm flatpak make desktop-file-utils gjs gtk4-devel
npm install
flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
flatpak install --user --assumeyes --noninteractive flathub org.freedesktop.appstream-glib

# Run tests
make test

Flathub builds https://flathub.org/builds/#/apps/re.sonny.OhMySVG

Building

host

meson --prefix $PWD/install build
ninja -C build install

Flatpak

Use GNOME Builder or

flatpak-builder --user --force-clean --install-deps-from=flathub --install flatpak re.sonny.OhMySVG.yaml

Credits

Oh My SVG is powered by SVGO and inspired by SVGOMG.

License

GPLv3 or later. Please see COPYING file.

why make apps to increase focus -- when you can make apps to reduce focus

impossifocus 🕺 What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Nov 30, 2022

Reduce misspelled email addresses in your web apps.

mailcheck.js The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address. mailcheck.js is pa

Dec 28, 2022

JavaScript library to resize, reduce, or change ranges of DOM elements.

Range.js JavaScript library to resize, reduce, or change ranges of DOM elements using the HTML5 input type="range" element. Usage: Include range.js

Jun 3, 2021

🔤 Font metric overrides to reduce CLS

Nuxt Font Metrics Font metric override implementation for Nuxt 3 ✨ Changelog ▶️ Online playground Features ⚠️ nuxt-font-metrics is under active develo

Dec 29, 2022

Notices on a digital platform are quick and easy to access, reduce a lot of paper waste, and one can get notified about the updates and news.

DigitalNoticeBoard - Mobile App - (Still In DEV) An Notice Board App for Students To Stay Connected With The College Updates..! Why a college campus n

Nov 24, 2022

GreenWebhook is a proxy or gateway between two systems that helps reduce your carbon footprint by dynamically routing or delaying traffic so that your workloads run when and where they will cause the lowest amount of carbon emissions.

💚 Welcome to Green Webhook! 💚 Green Webhook is a proxy or gateway between two systems that intelligently chooses which endpoint to send a webhook ev

Nov 23, 2022

An arbitrary size Bit-Vector implementation in JavaScript

BitSet.js BitSet.js is an infinite Bit-Array (aka bit vector, bit string, bit set) implementation in JavaScript. That means that if you invert a bit v

Dec 9, 2022

Web typography at its finest: font-size and line-height based on element width.

FlowType.JS Responsive web typography at its finest: font-size and line-height based on element width. Check out the demo site. What does FlowType.JS

Dec 30, 2022

jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.

BigText BigText Makes Text Big Read the original blog post Play around on the demo Watch the video Download bigtext.js Or use bower: bower install big

Dec 15, 2022

local storage wrapper for both react-native and browser. Support size controlling, auto expiring, remote data auto syncing and getting batch data in one query.

react-native-storage This is a local storage wrapper for both react native apps (using AsyncStorage) and web apps (using localStorage). ES6 syntax, pr

Dec 16, 2022

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.

Note: This repo is currently looking for maintainers: https://github.com/jquery-backstretch/jquery-backstretch/issues/464 Backstretch Backstretch is a

Dec 30, 2022

Converts geojson to svg string given svg viewport size and maps extent.

geojson2svg Converts geojson to svg string given svg viewport size and maps extent. Check world map, SVG scaled map and color coded map examples to de

Dec 17, 2022

Reliably get the terminal window size

term-size Reliably get the terminal window size Because process.stdout.columns doesn't exist when run non-interactively, for example, in a child proce

Oct 11, 2022

一个运行在浏览器内的提词器，可翻页，可变速，可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more.

Introduction 一个运行在浏览器内的提词器，可翻页，可变速，可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more. inst

Aug 17, 2021

An implementation of React v15.x that optimizes for small script size

react-lite Introduction react-lite is an implementation of React that optimizes for small script size. Note: react-lite dose not support React v16.x n

Dec 10, 2022

Smart Auto Move learns the size and position of your application windows and restores them to the correct place on subsequent launches. Supports GNOME Wayland.

smart-auto-move smart-auto-move is a Gnome Shell extension which keeps track of all application windows and restores them to the previous position, si

Dec 23, 2022

Comments

On narrow width the preview is not very viewable

If there's an interest in making this application adaptive or usable on mobile form factors, it would be nice if the preview for the image were visible at narrower window sizes--potentially by reflowing the UI so the preview fits in the top of the window.

opened by snwh 0
Potential Feature: XML view

While the visual optimization view is nice, it may be worthwhile having a view switcher to allow seeing the markup/xml optimizations as well as the visual.

opened by snwh 2
Some UI Quibbles
the Save as button could be moved to the headerbar as a primary action and use text instead of an icon so it is more clear

the precision and features headings should use the heading class instead of title-2

it is unclear what "Precision" means (is this the most accurate term for what this slider affects?) and the numbers do not convey meaning--what does "precision = 0" mean? This might be solved by defining the two extremes with a string label.

the big list of switches under Features is pretty cumbersome, it might be nice to break them into groups of related options to make it a bit more understandable
opened by snwh 0