Vector Art Optimization Challenge #2

Vote or enter in competitions.
Posts: 4506
Joined: Tue Jun 14, 2016 10:38 am

Re: Vector Art Optimization Challenge #2

Postby Lazur » Tue Dec 12, 2017 11:01 am

Setting the largest barrier here -272732 bytes.
Everything is drawn as separate paths with no strokes but fills. No cloning. The numeric precision is set to 16 with a -32 minimum exponent.
Yet it's still smaller than the original file??

Edit: how to track this challenge, there are quite a few variants.

Compressing them with, with 2 decimal precision cut.

272732 bytes separate paths with fill and no stroke
73587 bytes after the cleanup

25377 bytes. outer ring grouped and converted to a clone
23918 bytes saved as plain svg*

16673 bytes with cloning used instead of symbols
4575 bytes after the cleanup

24584 bytes with two rings drawn as a compound path and cloning it 19 times
6590 bytes after the cleanup

25335 bytes with cloned pattern fills**
6952 bytes after the cleanup

187668 bytes as a single compound path
14604 bytes after the cleanup

24800 bytes as a sector cloned 22 times
5127 bytes after the cleanup

339196 bytes with a pattern along path lpe
332236 bytes saved as a plain svg***

31054 bytes with a single square cloned
8866 bytes after the cleanup

*Chrome fails to render symbols with webkit so didn't run the online simplification tool.

**Wanted to draw that in a more elegant way but ran into a few bugs -all leading to crashes. Related bug report here

***Using the online simplification resulten in a faulty rendering.

So much about drawing this from flat filled paths with no strokes. Next time, testing out more obscure methods with strokes.

Posts: 4506
Joined: Tue Jun 14, 2016 10:38 am

Re: Vector Art Optimization Challenge #2

Postby Lazur » Tue Dec 12, 2017 1:22 pm

Now, something completely different -using gradients.


42078 bytes -two gradient filled paths
63039 bytes -the two objects built up from clones
21099 bytes -after the cleanup, digits reduced to 4; but of which still results in noticeable distortion

Posts: 3
Joined: Sat Dec 19, 2015 10:22 am

Re: Vector Art Optimization Challenge #2

Postby Mc- » Wed Dec 13, 2017 2:48 am

OK, if we're down to this type of optim,
still works on chromium:
-> xlink namespace is ignored
-> in css: "circle.n" -> ".n"
-> 1000 -> 1e3
-> I won two more bytes by translating "translate(480,480)scale(.04)" into "matrix(.04,0,0,.04,480,480)" (you can count, it's 1 char better :P) and another similar transform
edit: style="fill:#777" instead of .n{fill:#777}class="n" wins 5 bytes
725 bytes

Code: Select all

<svg width="1e3" height="1e3" xmlns=""><style>circle{stroke:#ddd;fill:none}</style><g id="f"><g id="e"><g id="d"><g id="c"><circle cx="500" cy="500" r="500" style="fill:#777"/><circle cx="500" cy="500" r="475" stroke-width="50" stroke-dasharray="64.88,64.88"/><circle cx="500" cy="500" r="225" stroke-width="450" stroke-dasharray="30.73,30.73" stroke-dashoffset="30.73"/></g><use href="#c" transform="matrix(.81,0,0,.81,95,95)"/></g><use href="#d" transform="translate(171.95,171.95)scale(.6561)"/></g><use href="#e" transform="translate(284.77,284.77)scale(.4305)"/></g><use href="#f" transform="translate(407.35,407.35)scale(.1853)"/><use href="#e" transform="matrix(.04,0,0,.04,480,480)"/></svg>

Posts: 667
Joined: Wed Jan 13, 2010 4:36 am

Re: Vector Art Optimization Challenge #2

Postby v1nce » Wed Dec 13, 2017 8:39 am

Mc- wrote:style="fill:#777"

Nice one.

style="fill:#777" would work while fill="#777" won't because it superseded with the declaration in style. This surprized me ; this is not what you'd expect if you compare with html.

Return to “Competitions”

Who is online

Users browsing this forum: No registered users and 1 guest