max-width for svg

[vralle]

The theme settings are used to determine the maximum image width. Example from twenty-three theme.json:

"layout": {
    "contentSize": "650px",
    "wideSize": "1200px"
}

Now in editor:

An image that is 1920px wide is limited to 650 pixels.

The screenshot below is an example of an SVG image that is 1000px wide. Image goes out of view.

Is it possible to implement a max-width limit for SVG? It would be very convenient if the scaling of the SVG was as similar as possible to the scaling of bitmaps.

[erikyo]

Yes, you are right, a max width limit is necessary for the editor section, I will include it in the next plugin release. thank you!

To be honest in early versions of the plugin this property was there, but was removed later to make sure that svg image always reflected the width and height that was set by the user. However, from what you tell me it is not the wanted behaviour 😅, so I guess I will add to the wrapper a max-width: 100% as you suggest.

thank you for the feedback!

[vralle]

We can consider two cases.

If we use the SVG as an image, we expect the same behavior from the SVG as bitmaps. Then we have only the advantages of SVG: scaling without regeneration, tiny file size and vector clarity.

The twenty-three example: in frontend, the 1000px wide SVG image is limited by the theme settings (650px). Despite the strange styles of the SVG block)

What will give us a huge image in the editor? It won't be that huge in the frontend.

[erikyo]

Yes, exactly! I'm trying to solve the issue, but even I have identified two cases: the one where the image can be wider (like a background) and the one where the image has to be resized automatically! To solve this I was thinking to provide a checkbox that enables and disables svg's "auto-fit"

the issue of images is still different and maybe it is better to do a block variation of the core/image so that you have full compability with the rest of the gutenberg editor

ps. currently the plugin forces the width and height that were set in the gutenberg panel editor whatever it is

[vralle]

I'm trying to solve the issue, but even I have identified two cases: the one where the image can be wider (like a background) and the one where the image has to be resized automatically!

It works differently. By default, all blocks use contentSize.

If we want to use something else, we must use the container block where we define the width of this block and children

Here is another example: I added the group block and set it to full width. And I added SVG to the group

Now we can choose the wide for the SVG. This is inherited from the group. Again, the SVG looks very strange.

[erikyo]

hey @vralle i'm pretty close to the result we expect, i'm doing the final corrections for the new release (it will take a while because i'm taking the opportunity to fix/update some stuff).

Anyway thanks for pointing out this alignment flaw and I hope to fix it as best I can, but remember that images and svg behave slightly differently and it is not so easy to get the same result.

Also about the max-width it's kind strange because also with the original image component in Gutenberg there is a "hack" that fix the max-with ... also in this case i will replicate the same behaviour but the way it acts might be a little different does how you imagined it would be

[erikyo]

the way to get the layout sizes is:

/* the block editor sizes */
const defaultLayout = useSetting( 'layout' ) || {};

I'm fixing this issues by putting some limits on the max with resize when the align is "wide" and "full" while in the other cases I feel like it's unbounded.

I'm also using this sizes in order to limit the size after the upload whatever the svg size is larger than the content width

[erikyo]

I then later discovered while updating the block that there are many other interesting features to be added, and so I took the opportunity to make some updates.