NATION

PASSWORD

[resolved] SVG nation flag sizing (again)

Bug reports, general help, ideas for improvements, and questions about how things are meant to work.
User avatar
SherpDaWerp
Ambassador
 
Posts: 1412
Founded: Mar 02, 2016
Libertarian Police State

[resolved] SVG nation flag sizing (again)

Postby SherpDaWerp » Tue Aug 09, 2022 8:11 pm

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.
Last edited by SherpDaWerp on Tue Aug 16, 2022 10:44 pm, edited 1 time in total.

User avatar
Trotterdam
Powerbroker
 
Posts: 9899
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Wed Aug 10, 2022 3:31 am

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

User avatar
SherpDaWerp
Ambassador
 
Posts: 1412
Founded: Mar 02, 2016
Libertarian Police State

Postby SherpDaWerp » Wed Aug 10, 2022 4:48 pm

Trotterdam wrote: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.
Last edited by SherpDaWerp on Wed Aug 10, 2022 4:49 pm, edited 1 time in total.

User avatar
Trotterdam
Powerbroker
 
Posts: 9899
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Wed Aug 10, 2022 10:31 pm

SherpDaWerp wrote: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.

SherpDaWerp wrote:I still consider this somewhat strange behaviour, especially considering it means users can submit deliberately broken content,
Fair enough.

User avatar
SherpDaWerp
Ambassador
 
Posts: 1412
Founded: Mar 02, 2016
Libertarian Police State

Postby SherpDaWerp » Fri Aug 12, 2022 11:55 pm

Trotterdam wrote: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.

User avatar
Trotterdam
Powerbroker
 
Posts: 9899
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Sat Aug 13, 2022 3:19 am

SherpDaWerp wrote: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>


SherpDaWerp wrote: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.

User avatar
[violet]
Site Admin
 
Posts: 15785
Founded: Antiquity

Postby [violet] » Mon Aug 15, 2022 4:51 pm

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.


Advertisement

Remove ads

Return to Technical

Who is online

Users browsing this forum: Chacapoya

Advertisement

Remove ads