[openstreetmap/openstreetmap-website] Optimize escaping of data uri svgs (PR #4419)

[Anton Khorev]

Now data uri svgs are used throughout the map key, and they affect the generated file size.

The default `url_encode` function %-encodes too many characters. There's a question which ones have to be encoded. `#` certainly is one of them, unencoded `#` will break the uri. If you strictly follow [the rfc from 1998](https://www.ietf.org/rfc/rfc2397.txt), spaces need to be encoded, yet nobody does that with svgs. For example [this library here](https://github.com/tigt/mini-svg-data-uri/blob/00dc78c8f77eb7b47299a9e3d564749105810c9c/index.js#L31) deliberately unencodes them. `<>` are commonly encoded by svg data uri libraries, yet the example in Wikipedia [contains them unencoded](https://en.wikipedia.org/wiki/Data_URI_scheme) and it seems to work fine.

I'm %-encoding [these chars](https://github.com/yoksel/url-encoder/blob/2c31ea619932c61f418bb8dfb945ddc95f9927fd/src/js/script.js#L15C44-L15C44) as used in [this tool](https://yoksel.github.io/url-encoder/).

Before:

    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2752%27%20height%3D%271%27%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27%23787878%27%20%2F%3E%3C%2Fsvg%3E" />

After:

    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='1'%3E%3Crect width='100%25' height='100%25' fill='%23787878' /%3E%3C/svg%3E">
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/4419

-- Commit Summary --

  * Add solid svg image helper
  * Do less %-encoding of data uri svgs
  * Don't html-escape single quotes in data uri svgs

-- File Changes --

    A app/helpers/svg_helper.rb (9)
    M app/views/site/key.html.erb (2)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/4419.patch
https://github.com/openstreetmap/openstreetmap-website/pull/4419.diff

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4419
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4419 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20231218/a54dae1f/attachment.htm>