Hacker News Reader

Comment by softgrow | Hacker News Reader

Convert to svg maybe?

For OpenStreetMap 136 bytes

View on HN

The png is only 103 bytes though. Btw your svg can be decreased by changing viewBox to 0 0 1 1, and also by changing the path to a circle (implicitly positioned at 0, 0)

  <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 1 1"><circle r="2" fill="#aad3df"/></svg>

Depending on how you're loading the svg in the page the xmlns attribute may not be needed as well.

The SVG could also be served with gzip compression.

  >>> len('<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path d="M0 0h256v256H0z" fill="#aad3df"/></svg>'.encode('zip'))
  122

Gzipping doesn't save much.

brotli helps:

  $ echo '<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 1 1"><circle r="2" fill="#aad3df"/></svg>' | brotli -9 - | wc -c
  93

Couldn't resist trying to go further. We can use an implicit viewBox.

  $ echo '<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256"><circle r="1000" fill="#aad3df"/></svg>' | brotli -9 - | wc -c
  83

r="1000" hits brotlis built-in dictionary, but if you target zlib then r="2566" is better.

You can also drop the new line character by using echo -n, which gives 82 bytes :)

Can you use a short closing tag "</>" or implicit closure?

Those are both sgml (as opposed to xml) things. Neither validates.

Doesn't the SVG scale better? I sure hope so.

For a single color? I don't think it really matters. It's all inherently lossless.

For a solid color block it doesn't really matter. For the rest of the map sure, Google Maps in normal mode (instead of classic as in the article) is vector rendering based.

But the PNG provided was 103 bytes :3

Also - pardon my ignorance, this may be a dumb question, is SVG universally supported in browsers these days? I’m not big up on image standards.

While yes, you could use SVG today, for performance reasons (not obviously for water, but more complicated stuff like an actual city) raster files are both more efficient in terms of computation time and more consistent in rendering with the only disadvantage of file size tradeoffs. Not quite a concern for computers and dedicated navi systems (in fact Google Earth and the Google Maps apps for iOS and Android* uses vectors, probably not SVG though), but other embedded systems don't really have the luxury of including a proper 3D or even 2D-accelerated drawing (there's a basic chip for raster rendering and relatively fast path drawing but city maps usually contains many geometric paths that overwhelm the graphics processor).

* If you know Android Go (not Android Auto), the Maps there are raster due to hardware constraints.

Yes

https://caniuse.com/?search=svg

Yes, it's everywhere.

An inline svg in the parent page would trim it down to 87 bytes and replace <img> code, so even less than 87 in practice.

That looks like a very low entropy series of bytes to me.

That string gzips to 82 bytes. I thought it would be a lot smaller.

Every editor adds their own xml namespace to SVG. Inkscape’s being probably the most famous one.

Reply on news.ycombinator.com