Hacker News new | ask | show | jobs
by softgrow 1526 days ago
Convert to svg maybe?

For OpenStreetMap 136 bytes

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><path d="M0 0h256v256H0z" fill="#aad3df"/></svg>

4 comments

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?
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, 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.

<svg width="256" height="256"><rect width="100%" height="100%" fill="#aad3df" /></svg>

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.
<svg xmlns="dear user agent, if you happen to run into a problem resolving ambiguities with any of the following tags, please use the namespace for Scalable Vector Graphics and not, say, one of the zero other contexts that xml ninjas will no doubt create over the next two decades of what I can only surmise will be a glorious outpouring of richness and complexity. I mean, we went to the trouble of creating a dang URL for the thing, so it's the least you could do. That is, aside from doing nothing, in which case Hixie will probably write a parser to just handle it. Best wishes, W3C. P.S. Cannot wait to see all the Javascript-driven SVG content that users will upload to social media. Look out, animated gif-- your days are numbered!"><path d="animateYourSVGArcFlagsFTW" /></svg>
Every editor adds their own xml namespace to SVG. Inkscape’s being probably the most famous one.