SVG images: using dpr alongside rect from sanity schema returns incorrectly cropped image
#60
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
SVGs Only:
dprandrectproduce incorrectly cropped imageThis may be a duplicate of #32 but I have found this when trying to transform SVGs, which I understand are untouched unless exported as a different format. I'm outputting the SVG as
"webp"via.format('webp').✅ Original Image
You can test this with any SVG using the query parameters in the URL but here is an SVG that is
608wide and320wide:✅ Apply
rectIf I apply
rect, the image is cropped. Great!Below, I've added
&rect=0,0,608,320that essentially does nothing.To ensure that cropping is actually working, let's update the
rectparameter to actually crop the image. Below, I've moved the starting point of the crop to200pixels in from theleftand thetop(rect=200,200,408,120). This isn't necessary, but to keep the same size ratio, I've also subtracted200pixels from the width property (w=408).✅ Remove
rect, applydprIf I remove the
rectparameter and append&dpr=2to the end, I get a scaled version of the original image. Fantastic!🚫 Apply
dprandrectIf I apply any
dpralongsiderectthe image is jacked up. Below, I've added&dpr=2&rect=0,0,608,320that should increase the resolution of the image but essentially do no cropping. Alas, it incorrectly crops the image. Ratfarts!For sanity's sake (pun intended), let's update the
rectandwidthparameters to actually crop the image like we did before (rect=200,200,408,120,w=408).This issue does not present itself for
pngimages. I only tested againstsvgbut I suspect it may be present forgif, as well.The text was updated successfully, but these errors were encountered: