Problem/Motivation

When a user uploads an icon for a button, especially if it is an SVG without explicit width/height or with big width/height attributes, the lack of a size limit might break the design of the table.

Note that uploading SVGs is something that might become more and more common as CKE5 will force us to only accept SVGs.

Steps to reproduce

- Upload a SVG without widht/height attributes or with a big value. Examples used for testing, obtained from a popular SVG icon library.

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" fill="#000000" viewBox="0 0 256 256"></svg>

<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="0 0 256 256"></svg>

- The table will suffer as the <img> will be sized by the SVG attributes (or lack of them) and the icon will be completely out of proportion.

Without explicit attributes:

Oversized icon

With large atribute values (600px), something not so unusual when getting SVG files.

Oversized icon

Proposed resolution

Cap the heigth of the image, using max-height to avoid enlarging of smaller icons while keeping larger icons controlled.

For example, using max-height: 2rem results on this:

Evenly sized icons

The first icon is a big svg capped at 2rem, the other icons are smaller pngs that don't get enlarged.

CommentFileSizeAuthor
Screenshot_20221122_170313.png23.64 KBidiaz.roncero
Screenshot_20221122_170846.png12.64 KBidiaz.roncero
Screenshot_20221122_170431.png46.59 KBidiaz.roncero

Issue fork embed-3323180

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

idiaz.roncero created an issue. See original summary.

idiaz.roncero opened merge request !9

idiaz.roncero’s picture

idiaz.roncero
he/him
Primary language Spanish
Location Madrid
commented

Submitted a pretty basic MR that uses inline CSS to solve this.

Using height attributes directly on the <img> tag won't work as they are normally overriden via css for responsive images;

img {
    max-width: 100%;
    height: auto;
}

I think for such a tiny fix CSS inline is not bad, but if needed this could be solved more "drupally" just by attaching a small library with the CSS tweak.

dave reid’s picture

dave reid
he/him
Primary language English
Location Nebraska USA
commented
Status: Active » Closed (duplicate)
Related issues: +#3310328: When CKEditor5 is installed, only allow SVGs for button icons

Since this is related to SVGs I'm going to merge this into #3310328: When CKEditor5 is installed, only allow SVGs for button icons where I'm just setting a height and width *both* of 32px by default in the listing and the edit form preview.

Dave Reid closed merge request !9