search

weserv / images

Source code of wsrv.nl (formerly images.weserv.nl), to be used on your own server(s).
https://wsrv.nl/
BSD 3-Clause "New" or "Revised" License
1.84k stars 188 forks source link

weserv makes SVGs blurry #377

Closed Andre601 closed 11 months ago

Andre601 commented 1 year ago

A site I'm on uses weserv for reasons unknown to me (Most likely image optimization and/or proxying).

The issue I encounter right now is, that SVGs added to the page become extremely blurry when served through weserv. Removing the domain and recreating the original URL gets rid of the blurryness the SVG has.

I cannot say if that is due to a general lack of SVG support, or if something the SVG uses may cause this issue.

Either way, here are screenshots of the same SVGs. First used on the site with weserv: grafik

And here used on my GitHub Repository with the direct link (Which is a jsdelivr URL): grafik

All SVGs use the same <img> tag structure, which is something similar to this:

<img src="https://cdn.jsdelivr.net/npm/@intergrav/devins-badges@3/assets/compact-minimal/supported/velocity_vector.svg" width="64" alt="platform-velocity" title="Tested on Velocity">

I've also opened an issue on the site's Issue tracker in case this can be fixed on their end. Link: https://github.com/modrinth/knossos/issues/1131

kleisauke commented 1 year ago

SVG images are rasterized to PNG by default. To avoid possible upsizing within your browser, it's recommended to specify the &w= and/or &h= parameters when loading them. If these parameters are not set, the image will be rendered using the width and/or height attribute from the toplevel <svg> element (or the viewBox attribute for responsive SVGs).

velocity_vector.svg is a 41x40 SVG image. So, if you do:

<img
  src="https://wsrv.nl/?url=https://github.com/intergrav/devins-badges/raw/v3/assets/compact-minimal/supported/velocity_vector.svg"
  width="64">

The browser will enlarge the PNG image, making the image blurry. If you want the image to be 64 pixels wide, you could do:

 <img
-  src="https://wsrv.nl/?url=https://github.com/intergrav/devins-badges/raw/v3/assets/compact-minimal/supported/velocity_vector.svg"
-  width="64">
+  src="https://wsrv.nl/?url=https://github.com/intergrav/devins-badges/raw/v3/assets/compact-minimal/supported/velocity_vector.svg&w=64">

This ensures the SVG image is rendered in a 64x62 canvas while preventing the browser from resizing it, either up or down.

Andre601 commented 1 year ago

Okay, thanks.

I'm not sure if I can use this tho. As mentioned is it not my choice of using weserv here. The site I'm using the SVG on decided to convert provided links into weserv URLs, so I'm not sure if it is worth it to apply a wsrv.nl URL here to make it work, or if that wouldn't just end up in a duplicated domain for no benefit.