SVG nation flags

[[violet]]

My SVG flag shows up way too big

You're using a custom flag, so its size is up to you: we just force it into an acceptable size range. Your image is 1800x1000, which is very large, so it's displaying at the maximum allowable size.

[[violet]]

My SVG flag, on this nation, doesn't show up at all in the title/name header on my nation page. However, it displays elsewhere.

Fixed: SVG images with no default size should now display on nation page headers.

[Erynia and Draconia]

My SVG flag shows up way too big

You're using a custom flag, so its size is up to you: we just force it into an acceptable size range. Your image is 1800x1000, which is very large, so it's displaying at the maximum allowable size.

Ok, thank you, I'll try using a smaller file.

[Tinhampton]

The forumside flag of The republic of Jackalopetopia is still Default.png, not Default.svg. Is this deliberate?

[Big Boyz]

My SVG flag shows up way too big

You're using a custom flag, so its size is up to you: we just force it into an acceptable size range. Your image is 1800x1000, which is very large, so it's displaying at the maximum allowable size.

I'm not using a custom flag, yet the size of my flag on stats is still way to big (and also bigger than normal on the home page)

[Gandoor]

I'm not using an SVG flag (obviously) but my flag gameside is now displaying in the wrong aspect ratio and is distorted.

[Diarcesia]

Based. I've been waiting for this for a very long time! Thank you so much.

Edit: I've already resized the entire thing to be one pixel high, and the message shows "We attempted to resize and compress your flag, but it was still too large. If possible, please try uploading a smaller or less detailed version."? The filesize is 36kb

[Minoa]

The resultant source code of my flag is strange: the character encoding is missing and simple rotations have been replaced by weird matrix transformations.

The original source code of my flag:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="600" viewBox="-37.5 -25 75 50">
   <path d="m-37.5-25h75v50h-75z" fill="#00A4E0"/>
   <g fill="#FFD000">
      <circle r="4"/>
      <g id="r8"><g id="r4"><g id="r2">
         <circle r="1" cy="6"/><path d="M-0.9974,6.0714H0.9974L0,20Z"/>
         <g transform="rotate(22.5)"><circle r="1" cy="7"/><path d="M-0.9970,7.0769H0.9970L0,20Z"/></g>
      </g><use xlink:href="#r2" transform="rotate(45)"/>
      </g><use xlink:href="#r4" transform="rotate(90)"/>
      </g><use xlink:href="#r8" transform="rotate(180)"/>
   </g>
</svg>

The resultant code:

Code: Select all

<svg height="600" viewBox="-37.5 -25 75 50" width="900" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <path d="m-37.5-25h75v50h-75z" fill="#00a4e0"/>
   <g fill="#ffd000">
      <circle r="4"/>
      <g id="a"><g id="b"><g id="c">
         <circle cy="6" r="1"/>
         <path d="m-1 6.1h2l-1 13.9z"/>
         <g transform="matrix(.92387953 .38268343 -.38268343 .92387953 0 0)"><circle cy="7" r="1"/><path d="m-1 7.1h2l-1 12.9z"/></g>
      </g><use transform="matrix(.70710678 .70710678 -.70710678 .70710678 0 0)" xlink:href="#c"/>
      </g><use transform="rotate(90)" xlink:href="#b"/>
      </g><use transform="scale(-1)" xlink:href="#a"/>
   </g>
</svg>

I do not think that the code needed to be modified: I thought I coded the flag to be as efficient in file size as possible, and I checked that there was no embedded code.

My SVG flag shows up way too big

You're using a custom flag, so its size is up to you: we just force it into an acceptable size range. Your image is 1800x1000, which is very large, so it's displaying at the maximum allowable size.

I believe the user is referring to the flag being very large on the graph itself, as in: https://www.nationstates.net/nation=min ... ensusid=15. The issue also applies to the default flags: https://www.nationstates.net/nation=gre ... ensusid=15. The graph should be able to resize them to the maximum size of 20 pixels wide and 13 pixels high.

Firefox 93.0
Safari 14.1.1

[Refuge Isle]

as well as a given page's no-template pages. I presume this is undesired operation.

When you request a page with "no-template", you're asking for content with no styling at all. The default size of SVG images can be huge, so that's what you get. "no-template" is generally intended for consumption by bots -- it wouldn't make sense to start styling it to make it more pleasant for humans, since that's what all the other themes are for.

It looks like you dropped the first half of my message so, to be clear, is this also your position on the ajax2 reports pages?

On an unrelated note, long banner flags currently appear squished to square on Rift, as seen on Lucabaduka.

[[violet]]

I've already resized the entire thing to be one pixel high, and the message shows "We attempted to resize and compress your flag, but it was still too large. If possible, please try uploading a smaller or less detailed version."? The filesize is 36kb

In the case of SVG images, this error message refers to the filesize, which is capped at 12kb for SVG (after compression). That's a pretty low ceiling, and it may be raised after further testing.

[[violet]]

is this also your position on the ajax2 reports pages?

It is for a direct manual request to an ajax page, which is likewise served with no styling. That content is to be loaded by some other page, which should properly style it before it's viewed by a human, or else it's a bug.

On an unrelated note, long banner flags currently appear squished to square on Rift, as seen on Lucabaduka.

Fixed, thanks.

[[violet]]

The resultant source code of my flag is strange: the character encoding is missing and simple rotations have been replaced by weird matrix transformations.

I do not think that the code needed to be modified: I thought I coded the flag to be as efficient in file size as possible, and I checked that there was no embedded code.

Our SVG sanitizer applies aggressive compression to uploaded images. There will probably be cases where it doesn't do an optimum job, as it's a general-purpose tool. Is there a problem with the resulting image?

[[violet]]

I think I found the very first glitch / quirk / issue: https://www.nationstates.net/nation=val ... ensusid=34

Flags are prohibitively big for stat graphs. On Chrome, both on my phone and on my laptop.

This is now fixed, in the sense that flag images on Trend charts have been replaced with text labels.

[[violet]]

The forumside flag of The republic of Jackalopetopia is still Default.png, not Default.svg. Is this deliberate?

Built-in flags (like Default.png and Australia.png) won't be auto-replaced in the forums, so will continue to display as PNGs here until the nation decides to change its flag.

[[violet]]

I'm not using a custom flag, yet the size of my flag on stats is still way to big (and also bigger than normal on the home page)

Built-in flags will appear larger on nation pages now, because we've replaced a set of quite small PNGs with SVGs that auto-scale up to the largest permitted resolution.

[Fhaengshia]

The Saint Pierre and Miquelon flag has changed to a French flag, example: Tape dipesnir
edit, the New Caledonia flag also shows the French flag

[Flanderlion]

I think I found the very first glitch / quirk / issue: https://www.nationstates.net/nation=val ... ensusid=34

Flags are prohibitively big for stat graphs. On Chrome, both on my phone and on my laptop.

This is now fixed, in the sense that flag images on Trend charts have been replaced with text labels.

Nice, something we've wanted for a while due to the flags covering the most recent data. Thanks.

[Vincent Drake]

as well as a given page's no-template pages. I presume this is undesired operation.

When you request a page with "no-template", you're asking for content with no styling at all. The default size of SVG images can be huge, so that's what you get. "no-template" is generally intended for consumption by bots -- it wouldn't make sense to start styling it to make it more pleasant for humans, since that's what all the other themes are for.

Military gameplayers heavily utilize no-template and reports pages for R/D (more so on the defending side than raiding, since page loads have a much more significant effect on the viability of defending). It can be, depending on the speed of one's internet, impossible to defend using templated pages. They load very slowly and I'm quite frankly shocked that an admin doesn't know this!

We can of course re-style the images on the user end and it looks like that's what I'll have to do for Breeze, but it would be nice for there to be a default or max size for them even on no-template pages. It would also be nice for "no-template" to be its own template that a user could select to apply to all pages. Currently, this is done one page at a time via URL and is a CSS nightmare. Again, not only bots use these pages, many R/Ders use them for very routine actions.

[[violet]]

Military gameplayers heavily utilize no-template and reports pages for R/D (more so on the defending side than raiding, since page loads have a much more significant effect on the viability of defending). It can be, depending on the speed of one's internet, impossible to defend using templated pages. They load very slowly and I'm quite frankly shocked that an admin doesn't know this!

We can of course re-style the images on the user end and it looks like that's what I'll have to do for Breeze, but it would be nice for there to be a default or max size for them even on no-template pages. It would also be nice for "no-template" to be its own template that a user could select to apply to all pages. Currently, this is done one page at a time via URL and is a CSS nightmare. Again, not only bots use these pages, many R/Ders use them for very routine actions.

If you want a view with minimal styling, I can give you a view with minimal styling. But I can't style a view with no styling.

[Valentine Z]

I'm not using an SVG flag (obviously) but my flag gameside is now displaying in the wrong aspect ratio and is distorted.

99 bugs on the NS Gameside,
99 bugs on the NS Gameside,
You take one down, add one feature,
32,684 bugs on the NS Gameside.

-----

Which is not to discredit the efforts, so I'm actually quite surprised that both the Gameside and the Forumside can do this relatively well while just needing minor changes, considering the code this game is possibly running on.

[[violet]]

The Saint Pierre and Miquelon flag has changed to a French flag, example: Tape dipesnir
edit, the New Caledonia flag also shows the French flag

Thanks, these should now match the previous versions.

[Vyharka]

The resultant source code of my flag is strange: the character encoding is missing and simple rotations have been replaced by weird matrix transformations.

I do not think that the code needed to be modified: I thought I coded the flag to be as efficient in file size as possible, and I checked that there was no embedded code.

Our SVG sanitizer applies aggressive compression to uploaded images. There will probably be cases where it doesn't do an optimum job, as it's a general-purpose tool. Is there a problem with the resulting image?

Not a huge issue; understandable why this is so, but more as an example that seems to be caused by this:

Recognizing that the image is blown up, and I am one of the few people persnickety enough to notice (and care) about stuff this minor, but still.

Also I presume the compression and security concerns are why the <metadata> tag (for embedding copyright information and similar, per the standard) gets scrubbed.

[Minoa]

The resultant source code of my flag is strange: the character encoding is missing and simple rotations have been replaced by weird matrix transformations.

I do not think that the code needed to be modified: I thought I coded the flag to be as efficient in file size as possible, and I checked that there was no embedded code.

Our SVG sanitizer applies aggressive compression to uploaded images. There will probably be cases where it doesn't do an optimum job, as it's a general-purpose tool. Is there a problem with the resulting image?

Not visually, but I felt it was important to report how my SVG flag adoption experience went in case you find something that can be improved in terms of optimisation.

[[violet]]

Not a huge issue; understandable why this is so, but more as an example that seems to be caused by this:

(Image)
Recognizing that the image is blown up, and I am one of the few people persnickety enough to notice (and care) about stuff this minor, but still.

Yes, as I'm sure you're aware, the more complicated the image, the more the SVG size starts to blow out, until you reach a point where PNG makes more sense. Flags get used all over the place on NationStates, often in tiny sizes, so it's important to keep filesize low.

Also I presume the compression and security concerns are why the <metadata> tag (for embedding copyright information and similar, per the standard) gets scrubbed.

After some investigation, I've figured out I can prevent the SVG sanitizer from removing the <metadata> tag, but it still seems to purge everything inside it. Which is no better. I'm not totally sure why, but I think it's because elements like <rdf:RDF> and <cc:Work> aren't in this list.

[Vincent Drake]

Military gameplayers heavily utilize no-template and reports pages for R/D (more so on the defending side than raiding, since page loads have a much more significant effect on the viability of defending). It can be, depending on the speed of one's internet, impossible to defend using templated pages. They load very slowly and I'm quite frankly shocked that an admin doesn't know this!

We can of course re-style the images on the user end and it looks like that's what I'll have to do for Breeze, but it would be nice for there to be a default or max size for them even on no-template pages. It would also be nice for "no-template" to be its own template that a user could select to apply to all pages. Currently, this is done one page at a time via URL and is a CSS nightmare. Again, not only bots use these pages, many R/Ders use them for very routine actions.

If you want a view with minimal styling, I can give you a view with minimal styling. But I can't style a view with no styling.

A minimal template would be greatly appreciated, even for non R/D players. If you've ever tried to check NS stuff on mobile in areas with shaky cell service, you know the pain of the site hanging on images/graphics and failing to load. Same thing happens on laptops/desktops with shaky wifi. It would be a win-win-win situation - users have a fast way to view the site, the site doesn't need to serve resources to users who actively don't want to see them, and script authors get a more consistent CSS environment (styling no-template and template pages in the same script is truly a mess). Some actions like endorsing force a template page even if the user started on no-template and the transitions are jarring. They are really jarring for me, with an incomplete dark mode, I get flashing dark and light pages which can't be good for my eyes and can't complete it with the way template pages are currently.