[resolved] SVG nation flag sizing (again)

[SherpDaWerp]

This nation's SVG flag appears to cover part of the nation's name and pretitle: https://www.nationstates.net/nation=ann ... herpdawerp

It appears to be caused by missing size attributes from the <img> tag on the nation page (adding "height=200" to the <img> tag fixed the problem; this "height" is available in the actual image file.

I'm using Firefox 103.0 on Windows 11.

[Trotterdam]

Have you tried putting in a width as well as a height?

[SherpDaWerp]

Have you tried putting in a width as well as a height?

Alright, submitting a SVG with width instead of height works. You shouldn't need both; as that's what viewBoxes are for.

I still consider this somewhat strange behaviour, especially considering it means users can submit deliberately broken content, but it's no longer actively broken.

[Trotterdam]

Alright, submitting a SVG with width instead of height works. You shouldn't need both; as that's what viewBoxes are for.

No, they're really for different purpoes.

The width and height are for setting the size the image is intented to take up on the screen (by default, since HTML can override this).

The viewBox is for setting the internal coordinate system used within the SVG file. It doesn't really have anything to do with how the image is actually displayed, it's just for if you want to use a nonstandard coordinate system, such as with (0,0) referring to the center of the image (as is common in mathematics) rather than the top-left corner (as is typical in computer graphics).

Both are technically optional, but width and height are expected to almost always be present (the default behavior, according to the official specification, is "take up as much space as possible", which is almost never what you want), while viewBox is completely optional (the default behavior is pretty decent).

If the two have a different aspect ratio (which is perfectly legal), the preserveAspectRatio attribute determines how the viewBox is actually rendered into the image's available space, which is still determined by the width and height attributes.

I still consider this somewhat strange behaviour, especially considering it means users can submit deliberately broken content,

Fair enough.

[SherpDaWerp]

width and height are expected to almost always be present (the default behavior, according to the official specification, is "take up as much space as possible", which is almost never what you want), while viewBox is completely optional (the default behavior is pretty decent)

True, but if you specify a viewBox, then the default value of preserveAspectRatio will render the image scaled up/down to the maximum value of the dimension you provide, which effectively removes the need for the other measurement (unless you want it to display in a non-aspect-ratio-sized area).

If it's non-web-standard behaviour to only specify one dimension, then I'd just recommend requiring the sanitiser/parser to enforce the existence of both width and height on the SVG at upload, if possible.

[Trotterdam]

True, but if you specify a viewBox, then the default value of preserveAspectRatio will render the image scaled up/down to the maximum value of the dimension you provide, which effectively removes the need for the other measurement (unless you want it to display in a non-aspect-ratio-sized area).

Try out the following SVG file:

Code: Select all

<svg width="300px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" stroke-width="4">
 <rect x="0" y="0" width="100" height="100" fill="#F00" stroke="none"/>
 <circle cx="50" cy="50" r="45" stroke="#00F"/>
 <line x1="0" y1="25" x2="100" y2="25"/>
 <line x1="-100" y1="50" x2="200" y2="50"/>
 <line x1="-200" y1="75" x2="300" y2="75"/>
</svg>

The red box exactly covers the viewBox, but note the three black lines. The top line lies entirely inside the viewBox. The bottom line overflows beyond the viewBox to the extend of the actual width of the image, and is still visible because this is still a valid part of the image according to the image size attributes. The bottom line has coordinates that overflow even farther beyond this, but is cropped so you don't see this overflow, because it would have extended beyond the supposed size of the image. If you embedded this image in an HTML file, it would take up extra space to the left and right of the main picture even if you omitted the black lines.

The viewBox is never used to determine the final image's displayed size or aspect ratio, even if it apparently does so due to everything outside the viewBox being blank. Whether you like this design choice or not, the SVG standard is at least consistent about it, and it is an official part of the SVG standard.

Now compare the following SVG file, which is the same, but with preserveAspectRatio="none":

Code: Select all

<svg width="300px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" stroke-width="4">
 <rect x="0" y="0" width="100" height="100" fill="#F00" stroke="none"/>
 <circle cx="50" cy="50" r="45" stroke="#00F"/>
 <line x1="0" y1="25" x2="100" y2="25"/>
 <line x1="-100" y1="50" x2="200" y2="50"/>
 <line x1="-200" y1="75" x2="300" y2="75"/>
</svg>

If it's non-web-standard behaviour to only specify one dimension, then I'd just recommend requiring the sanitiser/parser to enforce the existence of both width and height on the SVG at upload, if possible.

Yeah, simply rejecting the upload of files that don't have both a width and a height (with valid values) seems perfectly reasonable.

[[violet]]

We use a library for SVG sanitization that doesn't support width/height checking. We could use a different library to do that, but it would choke on many more SVGs.