Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svgo --precision #211

Merged
merged 4 commits into from
Nov 17, 2024
Merged

svgo --precision #211

merged 4 commits into from
Nov 17, 2024

Conversation

gurgeous
Copy link
Contributor

How about this? Personally I'd suggest --precision=1 as the default since this is what I've always used. Sometimes even zero! I don't have a strong preference, though, since picky users like me can easily override :)

I added a simple test too. There is a failing spec but I don't think it's related. Feedback welcome

@gurgeous gurgeous mentioned this pull request Nov 10, 2024
Comment on lines 25 to 28
'`0`..`10`, ignored in default/lossless mode') \
do |v, opt_def|
if allow_lossy
OptionHelpers.limit_with_range(v.to_i, 0..10)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

svgo allows precision to be from 0 to 20. I'm wondering why are negative numbers forbidden (to round integer part), but that is a question to svgo.

Copy link
Owner

@toy toy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! Just notes about range of values and the changelog entry

@@ -2,6 +2,8 @@

## unreleased

* Added `svgo-allow-lossy` and `svgo-precision` options to use svgo in lossy mode. This sets svgo `precision`, which can result in substantially smaller svgs. Lower values are more lossy. 3 is the default, but many SVGs will work well even with 0 or 1. [#210] [@gurgeous](https://github.com/gurgeous)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is better to use complete option names --svgo-precision, also I assume default is to use global --allow-lossy instead of per worker --xxx-allow-lossy.
And please create complete link to #210, so it works even outside of github and please add a link to this PR too.

@toy
Copy link
Owner

toy commented Nov 17, 2024

Just to post somewhere an experiment in scales accepted in svg, images should be identical because viewbox and all values inside are scaled by same power of 10, but they are not at extremes.

require 'bigdecimal'

template = <<SVG
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 N N">
  <rect x=".1N" y=".1N" width=".8N" height=".8N" fill="#777" />
  <circle cx=".5N" cy=".5N" r=".5N" fill="#000" opacity=".5" />
</svg>
SVG

(-9..9).each do |power|
  mult = Rational(10) ** power
  File.open("#{power}.svg", 'w') do |f|
    f << template.gsub(/(\.\d+)?N/) do
      (BigDecimal($1 || 1) * mult).to_s('F')
    end
  end
end
10**-9 -9
10**-8 -8
10**-7 -7
10**-6 -6
10**-5 -5
10**-4 -4
10**-3 -3
10**-2 -2
10**-1 -1
10**0 0 10**1 1
10**2 2
10**3 3
10**4 4
10**5 5
10**6 6
10**7 7
10**8 8
10**9 9

@gurgeous
Copy link
Contributor Author

Oh, that's neat. Appreciate the stats. Typically when I export an SVG from figma or whatever there are many extra digits. It's just the nature of the beast. Here is an actual export from one of my projects (below). I'll update the PR too :)

Original (3.4k):

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 223.695V223.709C0.179686 230.368 0.235109 237.066 1.35931 243.685C2.55061 250.687 4.25354 257.515 7.50246 263.87C11.8948 272.472 17.9272 279.736 25.5416 285.67C31.0086 289.931 36.9809 293.313 43.5919 295.447C53.2319 298.554 63.177 299.745 73.2675 299.803C79.5629 299.843 85.8542 300 92.152 299.974C137.887 299.781 183.624 300.304 229.36 299.692C235.429 299.609 241.399 298.87 247.356 297.781C258.772 295.693 268.862 290.826 277.494 283.13C287.555 274.164 294.343 263.191 297.407 249.947C299.412 241.29 299.914 232.508 299.999 223.694V221.936C299.999 221.254 299.74 72.1828 299.716 70.2125C299.649 64.7998 299.25 59.428 298.234 54.1023C296.999 47.6124 295.254 41.2886 292.144 35.4172C288.86 29.2141 284.747 23.6366 279.659 18.7626C271.865 11.2951 262.872 6.01421 252.401 3.22076C242.945 0.698365 233.297 0.139907 223.579 0.148651C223.563 0.146319 223.526 0.0478012 223.524 0H76.4289C76.426 0.050133 76.4242 0.100267 76.4207 0.148651C70.9053 0.2495 65.3817 0.20811 59.8943 0.88782C53.883 1.63457 47.9294 2.75906 42.2396 4.85882C33.2775 8.1711 25.4909 13.3301 18.8396 20.2176C11.3039 28.0209 5.99205 37.0454 3.17367 47.5541C0.659238 56.9301 0.112016 66.4927 0.0985975 76.1229" fill="#66D322"/>
<path d="M91.7837 161.118L98.4917 59.208H202.208V98.682H132.29L128.162 139.188C136.16 132.222 147.77 126.804 164.282 126.804C192.92 126.804 213.044 144.606 213.044 183.822C213.044 225.876 181.826 249.096 142.352 249.096C111.65 249.096 84.0437 236.97 79.3997 198.786L120.68 191.562C122.228 206.268 129.452 213.75 143.126 213.75C156.026 213.75 165.83 204.204 165.83 185.886C165.83 165.246 155.252 161.892 146.48 161.892C136.676 161.892 128.42 167.568 122.744 173.502L91.7837 161.118Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M76.1008 171L84.4466 44.208H217.208V113.682H181.166C192.22 116.275 202.341 121.654 210.437 130.447C222.377 143.415 228.044 161.785 228.044 183.822C228.044 208.857 218.601 229.431 202.335 243.555C186.331 257.452 164.922 264.096 142.352 264.096C125.295 264.096 107.324 260.768 92.5896 250.609C77.3014 240.069 67.283 223.402 64.5094 200.597L62.7906 186.465L98.9443 180.138L76.1008 171ZM134.823 182.637L135.597 189.992C136.168 195.409 137.56 197.162 137.962 197.564L137.97 197.572C138.146 197.749 139.14 198.75 143.126 198.75C145.677 198.75 147.057 197.925 147.993 196.848C149.088 195.588 150.83 192.457 150.83 185.886C150.83 179.895 149.687 177.749 149.341 177.254C149.114 177.153 148.341 176.892 146.48 176.892C142.916 176.892 138.811 178.87 134.823 182.637ZM149.299 177.197C149.259 177.158 149.241 177.135 149.243 177.134C149.244 177.132 149.264 177.152 149.299 177.197ZM146.715 113.682H145.839L145.818 113.89C146.115 113.819 146.414 113.75 146.715 113.682ZM144.179 129.97C137.689 132.217 132.415 135.484 128.162 139.188L132.29 98.682H202.208V59.208H98.4917L91.7837 161.118L122.744 173.502C128.42 167.568 136.676 161.892 146.48 161.892C155.252 161.892 165.83 165.246 165.83 185.886C165.83 204.204 156.026 213.75 143.126 213.75C131.461 213.75 124.49 208.305 121.732 197.575C121.257 195.727 120.907 193.723 120.68 191.562L79.3997 198.786C79.7508 201.673 80.2331 204.41 80.8381 207.005C81.3629 209.256 81.9799 211.4 82.6837 213.439C91.9001 240.152 115.984 249.096 142.352 249.096C181.826 249.096 213.044 225.876 213.044 183.822C213.044 144.606 192.92 126.804 164.282 126.804C156.55 126.804 149.893 127.992 144.179 129.97Z" fill="black"/>
</svg>

five

After svgo -p1 (1.4k):

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" fill="none">
<path fill="#66D322" d="M0 223.7c.2 6.7.2 13.4 1.4 20 1.2 7 2.9 13.8 6.1 20.2a65 65 0 0 0 36 31.5 98 98 0 0 0 29.8 4.4l18.9.2c45.7-.2 91.4.3 137.2-.3q9-.1 18-2a61 61 0 0 0 30-14.6q15.4-13.4 20-33.2c2-8.6 2.5-17.4 2.6-26.2v-1.8l-.3-151.7q0-8.1-1.5-16.1-1.6-9.8-6-18.7a65 65 0 0 0-39.8-32.2A111 111 0 0 0 223.5 0h-147v.1c-5.6.1-11.1.1-16.6.8q-9 1-17.7 4-13.4 5-23.4 15.3A62 62 0 0 0 3.2 47.6C.7 56.9.2 66.5 0 76"/>
<path fill="#fff" d="m91.8 161.1 6.7-101.9h103.7v39.5h-70l-4 40.5c8-7 19.6-12.4 36-12.4 28.7 0 48.8 17.8 48.8 57 0 42-31.2 65.3-70.6 65.3-30.7 0-58.4-12.1-63-50.3l41.3-7.2q2.1 22.1 22.4 22.2c13 0 22.7-9.6 22.7-28 0-20.6-10.5-24-19.3-24-9.8 0-18 5.8-23.8 11.7z"/>
<path fill="#000" fill-rule="evenodd" d="m76.1 171 8.3-126.8h132.8v69.5h-36c11 2.6 21.1 8 29.2 16.7 12 13 17.6 31.4 17.6 53.4 0 25-9.4 45.6-25.7 59.8a91 91 0 0 1-60 20.5 87 87 0 0 1-49.7-13.5 68 68 0 0 1-28-50l-1.8-14.1 36.1-6.4zm58.7 11.6.8 7.4c.6 5.4 2 7.2 2.4 7.6.1.1 1.1 1.2 5.1 1.2q3.7-.2 4.9-2c1-1.2 2.8-4.3 2.8-11 0-6-1.1-8-1.5-8.5q-.2-.3-2.8-.4-5.5 0-11.7 5.7m11.9-68.9h-.9v.2zm-2.5 16.3a48 48 0 0 0-16 9.2l4-40.5h70V59.2H98.5l-6.7 102 31 12.3c5.6-6 13.9-11.6 23.7-11.6 8.8 0 19.3 3.3 19.3 24 0 18.3-9.8 27.8-22.7 27.8q-17.3 0-21.4-16.1-.7-2.8-1-6l-41.3 7.2a77 77 0 0 0 3.3 14.6c9.2 26.8 33.3 35.7 59.7 35.7 39.4 0 70.6-23.2 70.6-65.3 0-39.2-20-57-48.7-57a61 61 0 0 0-20.1 3.2" clip-rule="evenodd"/>
</svg>

five

Or even svgo -p0 (0.9k):

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" fill="none">
<path fill="#66D322" d="m0 224 1 20q2 11 7 20a65 65 0 0 0 36 31q14 6 29 5h156l18-2q18-3 30-15 16-13 20-33 3-13 3-26v-2l-2-168q-1-9-6-19a65 65 0 0 0-40-32l-28-3H76L60 1 42 5Q28 9 19 20 7 32 3 48 0 61 0 76"/>
<path fill="#fff" d="m92 161 6-102h104v40h-70l-4 40q12-11 36-12c29 0 49 18 49 57 0 42-31 65-71 65-30 0-58-12-63-50l42-7q1 22 22 22t23-28c0-21-11-24-20-24q-15 2-23 12z"/>
<path fill="#000" fill-rule="evenodd" d="m76 171 8-127h133v70h-36q17 3 29 16 18 20 18 54 0 38-26 60a91 91 0 0 1-60 20q-27 1-49-13a68 68 0 0 1-28-50l-2-15 36-6zm59 12 1 7q1 7 2 8l5 1q4 0 5-2 2-2 3-11 0-8-2-9h-3q-5 0-11 6m12-69h-1zm-3 16q-9 3-16 9l4-40h70V59H98l-6 102 31 13q8-10 23-12c9 0 20 3 20 24q-2 28-23 28-18 0-21-16l-1-6-42 7 4 14c9 27 33 36 59 36 40 0 71-23 71-65 0-39-20-57-49-57q-11 0-20 3" clip-rule="evenodd"/>
</svg>

five

@toy
Copy link
Owner

toy commented Nov 17, 2024

I forgot also to ask to run script/update_worker_options_in_readme

@gurgeous
Copy link
Contributor Author

Ah, ok. Ran it!

@toy
Copy link
Owner

toy commented Nov 17, 2024

Lower case number stood out, but I just updated it myself

@toy toy linked an issue Nov 17, 2024 that may be closed by this pull request
@toy toy merged commit 3cdd578 into toy:main Nov 17, 2024
18 checks passed
@gurgeous
Copy link
Contributor Author

Excellent, thanks! Really appreciate all your hard work on the gem.

@toy
Copy link
Owner

toy commented Nov 19, 2024

Just released v0.31.4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

svgo --precision
2 participants