SVG handling changes in 4.9.1

gaekwad · Yesterday 21:16:47

I’m dev’ing a site that started life on 4.8.8 and was upgraded to 4.9.0. Upgrading to 4.9.1 appears to have changed the way SVG files are handled in <txp:image> and the previously-correct layout I had has been thrown off. Before I post some background, are there any specific changes to SVG handling that have been included in 4.9.1 that are different to 4.9.0?

Thank you.

phiw13 · Yesterday 23:22:40

There were some changes to the handling of thumbnail generation, but I don’t think that should have any effect on SVG images as those are excluded from the thumbnail generation. And I haven’t noticed anything different here.

Out of curiosity, what is the issue you are seeing?

Bloke · Today 07:25:15

Hmm, I thought SVG were always excluded so the image sizes in your template should remain.

BUT in 4.9.1, now that width and height are excluded by default unless you ask for them, there’s a chance your SVGs are displaying at their native/max resolution as defined in the image’s SVG code, rather than being constrained by the width/height in the database.

A solution for SVG is to always supply at least one dimension, which arguably should be mandatory anyway since they scale to any size and – depending on CSS – will stretch to fill all available space unless told otherwise.

gaekwad · Today 11:33:31

Bloke wrote #342653:

BUT in 4.9.1, now that width and height are excluded by default unless you ask for them, there’s a chance your SVGs are displaying at their native/max resolution as defined in the image’s SVG code, rather than being constrained by the width/height in the database.

That’s what’s happening – it fills the containing / parent div.

phiw13 wrote #342650:

Out of curiosity, what is the issue you are seeing?

I’ll write it up in this thread, but it sounds like the width and height is the trigger.

gaekwad · Today 12:04:49

gaekwad wrote #342656:

I’ll write it up in this thread, but it sounds like the width and height is the trigger.

The short version follows. Spare time and brainmeat cycles are at a low ebb today, so please excuse any terseness…it’s not intended.

I’m using SVGs and links in this case. CSS classes are from Tailwind 4. I’m essentially building an unordered list:

                    <ul class="list-none" id="supplemental_a_socials">
                      <txp:linklist break="li" category="socials" form="socials" />
                    </ul>

I use the link description to assign the link ID, and the following (socials) link form:

<span class="flex">
  <txp:image class="pr-2" id='<txp:link_description />' />
  <txp:link rel="external nofollow" />
</span>

The SVG has a native size of 24×24 according to the images panel. It seemed to work fine in 4.9.0 by virtue of 1em being ~24px, but 4.9.1 has undone that. No worries – now I know it’s intentional I can work around it: I think my route forward from here is to get the image URL and get Tailwind to do some of the lifting in its flex layout.

Last edited by gaekwad (Today 12:07:11)

Bloke · Today 12:07:01

Yes, constrain the container dimensions in CSS or use width="24" in your tag.

Edit: It was arguably a bug(ish) in older versions that just persisted even when the world had moved on from fixed dimensions. I should have fixed it in 4.9.0 but it got overlooked in the excitement.

Last edited by Bloke (Today 12:09:50)

gaekwad · Today 12:08:14

Bloke wrote #342659:

Yes, constrain the container dimensions in CSS or use width="24" in your tag.

Thanks, Bloke. The responsive stuff will mean the px values vary, but containing with the…erm…container is the sanest route.

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 21:16:47