organicmaps/organicmaps-tmp
Archived
13
Fork 1
Code Issues2.7k Pull requests182 Projects Releases65 Wiki Activity Actions

[tools] Add minimise SVGs tool, minimise SVGs #3426

Merged
root merged 2 commits from scrub-svgs into master 2022-09-24 22:11:04 +00:00
Conversation 14 Commits 2 Files changed 1085 +8869 -13519
RedAuburn commented 2022-09-16 22:17:44 +00:00
Member
  • maybe faster symbols processing?
  • correct formatting to show file previews
    Screenshot 2022-09-16 at 23 00 56

use ./tools/unix/minimise_symbol_svg.sh

- maybe faster symbols processing? - correct formatting to show file previews <img width="400" alt="Screenshot 2022-09-16 at 23 00 56" src="https://user-images.githubusercontent.com/26939824/190815310-94ee21e8-163e-422c-adf6-4d075cb129bf.png"> use `./tools/unix/minimise_symbol_svg.sh`
vng commented 2022-09-17 11:43:07 +00:00 (Migrated from github.com)

How 7.1% was chosen? ;)

How 7.1% was chosen? ;)
RedAuburn commented 2022-09-17 12:22:38 +00:00
Author
Member

How 7.1% was chosen? ;)

i compared the styles folder size before and after, but doing it again there's only 0.1mb difference 🤔 not sure why i got 7.1% originally, maybe some files hadn't checked out of git

edit:
alright, i admit i mainly made it so the file previews work 😅

> How 7.1% was chosen? ;) i compared the styles folder size before and after, but doing it again there's only 0.1mb difference 🤔 not sure why i got 7.1% originally, maybe some files hadn't checked out of git edit: alright, i admit i mainly made it so the file previews work 😅
vng commented 2022-09-17 14:28:53 +00:00 (Migrated from github.com)

Ah, I thought that you down-scaled svg images ..

Ah, I thought that you down-scaled svg images ..
RedAuburn commented 2022-09-17 15:06:34 +00:00
Author
Member

Ah no, there's no effect for the end-user, just makes it a bit easier for devs to work with symbols 👍

Ah no, there's no effect for the end-user, just makes it a bit easier for devs to work with symbols 👍
rtsisyk commented 2022-09-18 08:44:38 +00:00
Owner

SVG symbols are converted into a bunch of bitmap images. I doubt that minimization of SVG actually reduces the size of the app, but please check it. I usually use Inkscape for SVG and save files in original Inkscape format with extra metadata. Files are bit larger, but more convenient when you need to edit them.

SVG symbols are converted into a bunch of bitmap images. I doubt that minimization of SVG actually reduces the size of the app, but please check it. I usually use Inkscape for SVG and save files in original Inkscape format with extra metadata. Files are bit larger, but more convenient when you need to edit them.
vng commented 2022-09-18 09:01:16 +00:00 (Migrated from github.com)

Here is an example diff to better understand what is proposed:
Before:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>airport-m</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="airport-m" fill-rule="nonzero">
            <rect id="Rectangle" fill="#FFFFFF" opacity="0.6" x="0" y="0" width="24" height="24" rx="2.5"></rect>
            <rect id="Rectangle" fill="#2F6499" x="1" y="1" width="22" height="22" rx="2"></rect>
            <path d="M19,15.1 L19,13.8 L13.5263158,10.55 L13.5263158,6.975 C13.5263158,6.4355 13.0678947,6 12.5,6 C11.9321053,6 11.4736842,6.4355 11.4736842,6.975 L11.4736842,10.55 L6,13.8 L6,15.1 L11.4736842,13.475 L11.4736842,17.05 L10.1052632,18.025 L10.1052632,19 L12.5,18.35 L14.8947368,19 L14.8947368,18.025 L13.5263158,17.05 L13.5263158,13.475 L19,15.1 Z" id="Path" fill="#FFFFFF"></path>
        </g>
    </g>
</svg>

After:

<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <title>airport-m</title>
 <g fill="none" fill-rule="evenodd">
  <g id="airport-m" fill-rule="nonzero">
   <rect id="Rectangle" width="24" height="24" rx="2.5" fill="#fff" opacity=".6"/>
   <rect id="Rectangle" x="1" y="1" width="22" height="22" rx="2" fill="#2F6499"/>
   <path id="Path" d="m19 15.1v-1.3l-5.4737-3.25v-3.575c0-0.5395-0.45842-0.975-1.0263-0.975s-1.0263 0.4355-1.0263 0.975v3.575l-5.4737 3.25v1.3l5.4737-1.625v3.575l-1.3684 0.975v0.975l2.3947-0.65 2.3947 0.65v-0.975l-1.3684-0.975v-3.575l5.4737 1.625z" fill="#fff"/>
  </g>
 </g>
</svg>
Here is an example diff to better understand what is proposed: Before: ``` <?xml version="1.0" encoding="UTF-8"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>airport-m</title> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="airport-m" fill-rule="nonzero"> <rect id="Rectangle" fill="#FFFFFF" opacity="0.6" x="0" y="0" width="24" height="24" rx="2.5"></rect> <rect id="Rectangle" fill="#2F6499" x="1" y="1" width="22" height="22" rx="2"></rect> <path d="M19,15.1 L19,13.8 L13.5263158,10.55 L13.5263158,6.975 C13.5263158,6.4355 13.0678947,6 12.5,6 C11.9321053,6 11.4736842,6.4355 11.4736842,6.975 L11.4736842,10.55 L6,13.8 L6,15.1 L11.4736842,13.475 L11.4736842,17.05 L10.1052632,18.025 L10.1052632,19 L12.5,18.35 L14.8947368,19 L14.8947368,18.025 L13.5263158,17.05 L13.5263158,13.475 L19,15.1 Z" id="Path" fill="#FFFFFF"></path> </g> </g> </svg> ``` After: ``` <svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <title>airport-m</title> <g fill="none" fill-rule="evenodd"> <g id="airport-m" fill-rule="nonzero"> <rect id="Rectangle" width="24" height="24" rx="2.5" fill="#fff" opacity=".6"/> <rect id="Rectangle" x="1" y="1" width="22" height="22" rx="2" fill="#2F6499"/> <path id="Path" d="m19 15.1v-1.3l-5.4737-3.25v-3.575c0-0.5395-0.45842-0.975-1.0263-0.975s-1.0263 0.4355-1.0263 0.975v3.575l-5.4737 3.25v1.3l5.4737-1.625v3.575l-1.3684 0.975v0.975l2.3947-0.65 2.3947 0.65v-0.975l-1.3684-0.975v-3.575l5.4737 1.625z" fill="#fff"/> </g> </g> </svg> ```
RedAuburn commented 2022-09-18 10:38:47 +00:00
Author
Member

Yes, using this tool will strip all unnecessary tags & minimise. notably, it removes width="24px" height="24px", which previously caused file previews to render like this:

Screenshot 2022-09-18 at 11 36 34 (charity shop displays correctly because it doesn't have the pixel sizes)

Another example of minimising:
before:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="24px"
   height="24px"
   viewBox="0 0 24 24"
   version="1.1"
   id="svg14"
   sodipodi:docname="america-football-m.svg"
   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs18" />
  <sodipodi:namedview
     id="namedview16"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     showgrid="false"
     inkscape:zoom="31.5"
     inkscape:cx="12.095238"
     inkscape:cy="12"
     inkscape:window-width="1920"
     inkscape:window-height="1011"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="Group" />
  <title
     id="title2">america-football-m</title>
  <g
     id="Page-1"
     stroke="none"
     stroke-width="1"
     fill="none"
     fill-rule="evenodd">
    <g
       id="america-football-m"
       fill-rule="nonzero">
      <g
         id="Group"
         transform="translate(6.000000, 9.607143)"
         fill="none">
        <path
           d="m -3,2.392857 c 0.5665179,1.40625 1.4544644,2.6517857 2.57142855,3.6401786 V -1.2473216 C -1.5455356,-0.25892872 -2.4334821,0.98660698 -3,2.392857 Z"
           id="Path"
           fill="#717065" />
        <path
           d="M 15,2.392857 C 14.433482,0.98660698 13.545536,-0.25892872 12.428571,-1.2473216 V 6.0330356 C 13.545536,5.0446426 14.433482,3.799107 15,2.392857 Z"
           id="path8"
           fill="#717065" />
        <path
           d="m 12,5.935045 c -1.892411,0 -3.65625,0.5383929 -5.1428571,1.4665179 v 3.1058031 0.851786 1.285714 1.104911 2.848662 C 8.34375,17.526563 10.107589,18.064955 12,18.064955 c 1.892411,0 3.65625,-0.538392 5.142856,-1.466517 V 13.749777 12.644866 11.359152 10.507366 7.4015629 C 15.65625,6.4734379 13.892411,5.935045 12,5.935045 Z m 3.857143,5.424107 v 1.285714 1.285715 h -1.285714 v -1.285715 h -1.928572 v 1.285715 H 11.357143 V 12.644866 H 9.4285715 v 1.285715 H 8.1428571 v -1.285715 -1.285714 -1.285714 h 1.2857144 v 1.285714 h 1.9285715 v -1.285714 h 1.285714 v 1.285714 h 1.928572 v -1.285714 h 1.285715 z"
           id="Shape"
           fill="#717065"
           transform="translate(-6,-9.607143)" />
      </g>
    </g>
  </g>
</svg>

after:

<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <title>america-football-m</title>
 <g fill="none" fill-rule="evenodd">
  <g id="america-football-m" fill-rule="nonzero">
   <g id="Group" transform="translate(6 9.6071)" fill="#717065">
    <path id="Path" d="m-3 2.3929c0.56652 1.4062 1.4545 2.6518 2.5714 3.6402v-7.2804c-1.117 0.98839-2.0049 2.2339-2.5714 3.6402z"/>
    <path d="m15 2.3929c-0.56652-1.4063-1.4545-2.6518-2.5714-3.6402v7.2804c1.117-0.98839 2.0049-2.2339 2.5714-3.6402z"/>
    <path id="Shape" transform="translate(-6 -9.6071)" d="m12 5.935c-1.8924 0-3.6562 0.53839-5.1429 1.4665v9.1969c1.4866 0.92812 3.2504 1.4665 5.1429 1.4665s3.6562-0.53839 5.1429-1.4665v-9.1969c-1.4866-0.92812-3.2504-1.4665-5.1429-1.4665zm3.8571 5.4241v2.5714h-1.2857v-1.2857h-1.9286v1.2857h-1.2857v-1.2857h-1.9286v1.2857h-1.2857v-3.8571h1.2857v1.2857h1.9286v-1.2857h1.2857v1.2857h1.9286v-1.2857h1.2857z"/>
   </g>
  </g>
 </g>
</svg>
Yes, using this tool will strip all unnecessary tags & minimise. notably, it removes `width="24px" height="24px"`, which previously caused file previews to render like this: <img width="639" alt="Screenshot 2022-09-18 at 11 36 34" src="https://user-images.githubusercontent.com/26939824/190897871-2065cda6-6cd5-4be1-b600-cc724a7b939c.png"> (charity shop displays correctly because it doesn't have the pixel sizes) Another example of minimising: before: ``` <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" id="svg14" sodipodi:docname="america-football-m.svg" inkscape:version="1.2 (dc2aedaf03, 2022-05-15)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs18" /> <sodipodi:namedview id="namedview16" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="31.5" inkscape:cx="12.095238" inkscape:cy="12" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="Group" /> <title id="title2">america-football-m</title> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="america-football-m" fill-rule="nonzero"> <g id="Group" transform="translate(6.000000, 9.607143)" fill="none"> <path d="m -3,2.392857 c 0.5665179,1.40625 1.4544644,2.6517857 2.57142855,3.6401786 V -1.2473216 C -1.5455356,-0.25892872 -2.4334821,0.98660698 -3,2.392857 Z" id="Path" fill="#717065" /> <path d="M 15,2.392857 C 14.433482,0.98660698 13.545536,-0.25892872 12.428571,-1.2473216 V 6.0330356 C 13.545536,5.0446426 14.433482,3.799107 15,2.392857 Z" id="path8" fill="#717065" /> <path d="m 12,5.935045 c -1.892411,0 -3.65625,0.5383929 -5.1428571,1.4665179 v 3.1058031 0.851786 1.285714 1.104911 2.848662 C 8.34375,17.526563 10.107589,18.064955 12,18.064955 c 1.892411,0 3.65625,-0.538392 5.142856,-1.466517 V 13.749777 12.644866 11.359152 10.507366 7.4015629 C 15.65625,6.4734379 13.892411,5.935045 12,5.935045 Z m 3.857143,5.424107 v 1.285714 1.285715 h -1.285714 v -1.285715 h -1.928572 v 1.285715 H 11.357143 V 12.644866 H 9.4285715 v 1.285715 H 8.1428571 v -1.285715 -1.285714 -1.285714 h 1.2857144 v 1.285714 h 1.9285715 v -1.285714 h 1.285714 v 1.285714 h 1.928572 v -1.285714 h 1.285715 z" id="Shape" fill="#717065" transform="translate(-6,-9.607143)" /> </g> </g> </g> </svg> ``` after: ``` <svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <title>america-football-m</title> <g fill="none" fill-rule="evenodd"> <g id="america-football-m" fill-rule="nonzero"> <g id="Group" transform="translate(6 9.6071)" fill="#717065"> <path id="Path" d="m-3 2.3929c0.56652 1.4062 1.4545 2.6518 2.5714 3.6402v-7.2804c-1.117 0.98839-2.0049 2.2339-2.5714 3.6402z"/> <path d="m15 2.3929c-0.56652-1.4063-1.4545-2.6518-2.5714-3.6402v7.2804c1.117-0.98839 2.0049-2.2339 2.5714-3.6402z"/> <path id="Shape" transform="translate(-6 -9.6071)" d="m12 5.935c-1.8924 0-3.6562 0.53839-5.1429 1.4665v9.1969c1.4866 0.92812 3.2504 1.4665 5.1429 1.4665s3.6562-0.53839 5.1429-1.4665v-9.1969c-1.4866-0.92812-3.2504-1.4665-5.1429-1.4665zm3.8571 5.4241v2.5714h-1.2857v-1.2857h-1.9286v1.2857h-1.2857v-1.2857h-1.9286v1.2857h-1.2857v-3.8571h1.2857v1.2857h1.9286v-1.2857h1.2857v1.2857h1.9286v-1.2857h1.2857z"/> </g> </g> </g> </svg> ```
biodranik commented 2022-09-18 12:18:06 +00:00 (Migrated from github.com)

This idea is good in the context that we will eventually render SVGs directly on devices (that is planned, yes).

For now, to accept this PR, @endim8 please confirm that all our icons and symbols will properly regenerate from modified SVGs without any issues.

This idea is good in the context that we will eventually render SVGs directly on devices (that is planned, yes). For now, to accept this PR, @endim8 please confirm that all our icons and symbols will properly regenerate from modified SVGs without any issues.
RedAuburn commented 2022-09-18 13:16:32 +00:00
Author
Member

For now, to accept this PR, @endim8 please confirm that all our icons and symbols will properly regenerate from modified SVGs without any issues.

The generated images look fine 👍:
symbols
unfortunately the order is random, otherwise I'd generate a pixel difference image

> For now, to accept this PR, @endim8 please confirm that all our icons and symbols will properly regenerate from modified SVGs without any issues. The generated images look fine 👍: ![symbols](https://user-images.githubusercontent.com/26939824/190903957-53363c7d-55ef-40a4-90ce-e5d8bac84cd5.png) unfortunately the order is random, otherwise I'd generate a pixel difference image
rtsisyk commented 2022-09-18 17:27:32 +00:00
Owner

Why is the order random? It should be the same on every generation.

Why is the order random? It should be the same on every generation.
RedAuburn commented 2022-09-18 17:35:22 +00:00
Author
Member

Why is the order random? It should be the same on every generation.

Huh...
A guess is that maybe the order is currently based on filesize or an svg tag?
I'll look into that once I get back 👍

> Why is the order random? It should be the same on every generation. Huh... A guess is that maybe the order is currently based on filesize or an svg tag? I'll look into that once I get back 👍
vng commented 2022-09-18 17:43:38 +00:00 (Migrated from github.com)

Don't bother about the order. There is a fancy packing algorithm, but in fact we always get re-shuffle on every generation.

Don't bother about the order. There is a fancy packing algorithm, but in fact we always get re-shuffle on every generation.
👍 1
biodranik (Migrated from github.com) reviewed 2022-09-18 17:44:06 +00:00
tools/unix/minimise_symbol_svg.sh
biodranik (Migrated from github.com) commented 2022-09-18 17:30:20 +00:00 
if ! command -v scour &> /dev/null; then
```suggestion if ! command -v scour &> /dev/null; then ```
biodranik (Migrated from github.com) commented 2022-09-18 17:41:45 +00:00 
    echo 'Take a look at https://github.com/scour-project/scour'
```suggestion echo 'Take a look at https://github.com/scour-project/scour' ```
biodranik (Migrated from github.com) commented 2022-09-18 17:42:19 +00:00 
for i in style-clear/symbols style-night/symbols; do
```suggestion for i in style-clear/symbols style-night/symbols; do ```
biodranik (Migrated from github.com) commented 2022-09-18 17:42:30 +00:00 
    for f in $OMIM_PATH/data/styles/clear/$i/*.svg; do
```suggestion for f in $OMIM_PATH/data/styles/clear/$i/*.svg; do ```
biodranik commented 2022-09-18 20:18:52 +00:00 (Migrated from github.com)

Actually, making the order more stable would be really beneficial for diffs and reviews. There was some discussion in some old PR about how Qt sorting works...

Actually, making the order more _stable_ would be really beneficial for diffs and reviews. There was some discussion in some old PR about how Qt sorting works...
RedAuburn commented 2022-09-18 23:58:08 +00:00
Author
Member

added review code formatting fixes

added review code formatting fixes
biodranik (Migrated from github.com) approved these changes 2022-09-24 22:10:57 +00:00
This repo is archived. You cannot comment on pull requests.
No reviewers
biodranik
No labels
Accessibility
Accessibility
Address
Address
Android
Android
Android Auto
Android Auto
Android Automotive (AAOS)
Android Automotive (AAOS)
API
API
AppGallery
AppGallery
AppStore
AppStore
Battery and Performance
Battery and Performance
Blocker
Blocker
Bookmarks and Tracks
Bookmarks and Tracks
Borders
Borders
Bug
Bug
Build
Build
CarPlay
CarPlay
Classificator
Classificator
Community
Community
Core
Core
CrashReports
CrashReports
Cycling
Cycling
Desktop
Desktop
DevEx
DevEx
DevOps
DevOps
dev_sandbox
dev_sandbox
Directions
Directions
Documentation
Documentation
Downloader
Downloader
Drape
Drape
Driving
Driving
Duplicate
Duplicate
Editor
Editor
Elevation
Elevation
Enhancement
Enhancement
Epic
Epic
External Map Datasets
External Map Datasets
F-Droid
F-Droid
Fonts
Fonts
Frequently User Reported
Frequently User Reported
Fund
Fund
Generator
Generator
Good first issue
Good first issue
Google Play
Google Play
GPS
GPS
GSoC
GSoC
iCloud
iCloud
Icons
Icons
iOS
iOS
Legal
Legal
Linux Desktop
Linux Desktop
Linux packaging
Linux packaging
Linux Phone
Linux Phone
Mac OS
Mac OS
Map Data
Map Data
Metro
Metro
Navigation
Navigation
Need Feedback
Need Feedback
Night Mode
Night Mode
NLnet 2024-06-281
NLnet 2024-06-281
No Feature Parity
No Feature Parity
Opening Hours
Opening Hours
Outdoors
Outdoors
POI Info
POI Info
Privacy
Privacy
Public Transport
Public Transport
Raw Idea
Raw Idea
Refactoring
Refactoring
Regional
Regional
Regression
Regression
Releases
Releases
RoboTest
RoboTest
Route Planning
Route Planning
Routing
Routing
Ruler
Ruler
Search
Search
Security
Security
Styles
Styles
Tests
Tests
Track Recording
Track Recording
Translations
Translations
TTS
TTS
UI
UI
UX
UX
Walk Navigation
Walk Navigation
Watches
Watches
Web
Web
Wikipedia
Wikipedia
Windows
Windows
Won't fix
Won't fix
World Map
World Map
No milestone
No project
No assignees
3 participants
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: organicmaps/organicmaps-tmp#3426
No description provided.
Delete branch "scrub-svgs"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?