SVG nation flags

[Republic Of Ludwigsburg]

Pretty buggy, changes the ratio of the flag, makes it buggy in the activity page, and the preview in the "create your own flag" page is broken.

Sadly I'm unable to reproduce any of these issues. Please supply more detail / examples, as it's difficult to know what you mean by "buggy" and "broken." If it happens with particular images, please upload a copy of that image somewhere. Please also supply your browser+device+theme.

Browser: Mozilla Firefox
Device: HP Laptop with Intel I5 and Windows 10
Theme: Liberal

Basically, it doesn't show the preview properly. I tried converting the same flag I have right now to .SVG and it created this abomination.



It also reproduces this image in the nation page:


It seems the activity page bug is "fixed".

These issues probably happen because the code is used to only 2:3 flags not 2:4 like my flag.

[Vyharka]

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.

Yeah. And why this one looks like right proper shite at forum size as an SVG. xD

Regardless: neat addition.

[Tinhampton]

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.

The description at the top of the Create a National Flag page neither reflects the fact that you can now upload an SVG flag nor that such a flag can be no larger than 12kb.

[Valentine Z]

I got an early bird special with my flag. That is, it is 58.7 KB huge.

Nope, never mind. It was shrunk down now. But I was able to upload that 58.7 KB file, now I can't.

[Disgraces]

I like more this stats screen that doesn't show the flag so it doesn't cover the latest updates

[Neo Mida Gals]

I dont know how put Image of trend,but when I click my flag doesnt appear.
I tried with my puppets and the same happend,Is this a bug or Is part of the update?

[Neo Mida Gals]

I dont know how put Image of trend,but when I click my flag doesnt appear.
I tried with my puppets and the same happend,Is this a bug or Is part of the update?

Instead of this only my name appears.

[Disgraces]

I dont know how put Image of trend,but when I click my flag doesnt appear.
I tried with my puppets and the same happend,Is this a bug or Is part of the update?

Instead of this only my name appears.

This is what I meant

[Neo Mida Gals]

Instead of this only my name appears.

This is what I meant

Strange,I expect [Violet] Resolve this.

[Merni]

This is what I meant

Strange,I expect [Violet] Resolve this.

They did it on purpose:

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.

[Disgraces]

Strange,I expect [Violet] Resolve this.

They did it on purpose:

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

I hope it stays like this

[[violet]]

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.

Would you mind starting a new Technical thread for this? There's a lot of work through there.

[[violet]]

Sadly I'm unable to reproduce any of these issues. Please supply more detail / examples, as it's difficult to know what you mean by "buggy" and "broken." If it happens with particular images, please upload a copy of that image somewhere. Please also supply your browser+device+theme.

Browser: Mozilla Firefox
Device: HP Laptop with Intel I5 and Windows 10
Theme: Liberal

Basically, it doesn't show the preview properly. I tried converting the same flag I have right now to .SVG and it created this abomination.

Thanks for the new info. Unfortunately I still can't reproduce those issues on Firefox with Liberal theme. Which version of Firefox do you use (menu -> Help -> About Firefox)... is it up to date? And do you use any browser plugins or custom styling that might be interfering with the display? Also please upload a copy of the SVG image somewhere -- currently you have a PNG flag, so I can't investigate whether there's any issue with that particular image.

[Great Algerstonia]

Damn, the new real world flags look pretty sleek compared to the old ones.

[SherpDaWerp]

I've no idea how I'd implement it; I've never played with SVG before. My question was moreso testing the waters so I don't go down a rabbit-hole of making, say, a JS-animated flag only to find out that no JS works.

I did a quick test of a few different methods, and I don't think any of them will work, because our SVG sanitizer can't confidently assess them. I tried script tags, style tags with @keyframes, and the animate tag.

Well that's certainly above and beyond what I expected; thanks [v]! Shame it doesn't work, but that's fine. I would have thought it would be pretty easy to confidently assess CSS, but I guess there's better things to do than re-make a sanitiser if it already does the job.

[Betelgeuse Alliance]

It's very nice that SVG support is being worked on. I just remade my flag in SVG and tried to upload it, but as I've read from this thread, I'm not the only one who gets an error saying ''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.'' I refreshed my flag in PNG for the time being.

I've also read that there's a 12 kB ceiling for SVG filesize as of now, though I'm not sure if that means you can currently only upload a file that's 12 kB max, or if you can upload a file that's any size after which it gets compressed to 12 kB or under (I think I kind of read that from this thread, but there's a high chance I'm wrong). If it is the latter of the two, then I wonder if that means that it tried to compress my 32 kB SVG to 12 kB or under, but failed to do so and was therefore only able to get it to something above 12 kB (can't know for sure as of the time I'm typing this, given that I'm a total noob when it comes to this).

And perhaps a weird question, but the program I use to make SVG's (which I literally installed yesterday right after I read this thread, lol) also allows me to export to .svgz, which apparently is some kind of compressed SVG file. However, both browsers I tried (Chrome and Edge) don't seem to support .svgz properly since both threw the same encoding error when trying to open it. I'm assuming this means that NationStates can't show them either, right?

That's all. (I didn't really feel like quoting others because I felt kinda lazy to be honest )

EDIT: Quickly wanted to add that when I was on the upload page and chose my SVG file, the preview worked flawlessly. Don't know if that's relevant info, but I wanted to point this out in case it is.

[[violet]]

Well that's certainly above and beyond what I expected; thanks [v]! Shame it doesn't work, but that's fine. I would have thought it would be pretty easy to confidently assess CSS, but I guess there's better things to do than re-make a sanitiser if it already does the job.

Yeah, because it's a security thing, we really need to use a tried & tested library, rather than rely on anything I pull together in between Squid Game episodes.

[[violet]]

It's very nice that SVG support is being worked on. I just remade my flag in SVG and tried to upload it, but as I've read from this thread, I'm not the only one who gets an error saying ''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.'' I refreshed my flag in PNG for the time being.

I've also read that there's a 12 kB ceiling for SVG filesize as of now, though I'm not sure if that means you can currently only upload a file that's 12 kB max, or if you can upload a file that's any size after which it gets compressed to 12 kB or under (I think I kind of read that from this thread, but there's a high chance I'm wrong). If it is the latter of the two, then I wonder if that means that it tried to compress my 32 kB SVG to 12 kB or under, but failed to do so and was therefore only able to get it to something above 12 kB (can't know for sure as of the time I'm typing this, given that I'm a total noob when it comes to this).

That's correct. We try to compress the image, and then that compressed version has to be under the limit.

I plan to double the 12kb limit pretty shortly, once I've checked out more of the SVG flags that have been uploaded so far, and then we might go higher again.

And perhaps a weird question, but the program I use to make SVG's (which I literally installed yesterday right after I read this thread, lol) also allows me to export to .svgz, which apparently is some kind of compressed SVG file. However, both browsers I tried (Chrome and Edge) don't seem to support .svgz properly since both threw the same encoding error when trying to open it. I'm assuming this means that NationStates can't show them either, right?

Right, because we need to parse them to perform a security check & compression, we probably can't read that format unless I write in support for it.

I'm not sure if there's any value to an SVGZ... I assume SVGs get gzipped when transmitted from our CDN anyway. I should check that out.

[[violet]]

SVG post-compression filesize limit has been raised from 12KB to 60KB.

I also confirmed that they're served over the network with gzip / brotli compression, when your browser supports it, so in terms of network bandwidth they arrive at somewhere around 30% of this size. So that's pretty great.

[Diarcesia]

Nice + 1

My SVG flag now works! Any plans on introducing ripple for the vector flags?

[Valentine Z]

SVG post-compression filesize limit has been raised from 12KB to 60KB.

I also confirmed that they're served over the network with gzip / brotli compression, when your browser supports it, so in terms of network bandwidth they arrive at somewhere around 30% of this size. So that's pretty great.

Ahh, just when I'm at work, you tease!

I'm kidding, thanks a lot for the ceiling raised! Can't wait to try this later! ❤️

[Courelli]

My flag doesn't show up as either a preview on the "Create a National Flag" page or on the Settings page. Could this have something to do with the SVG having a default display of 0x0 like the previous issue on the Nation page header?

I'm on Google Chrome, Windows 11 Dell laptop, SVG created in Adobe Illustrator.

EDIT for update: in the Illustrator SVG export menu, there is a "Responsive" checkbox -- checked by default, this button erases SVG intrinsic size and sets it to be rescalable by CSS, as I understand it. Unchecking this box and re-exporting the SVG solved the above issue.

[[violet]]

Any plans on introducing ripple for the vector flags?

No ripple, sadly. AFAIK you can't merge a transparent PNG with an SVG to get another SVG.

[[violet]]

My flag doesn't show up as either a preview on the "Create a National Flag" page or on the Settings page. Could this have something to do with the SVG having a default display of 0x0 like the previous issue on the Nation page header?

Very likely, yes. Can you please upload an image that triggers this problem? As your current flag is a version you made that works.

[Diarcesia]

Any plans on introducing ripple for the vector flags?

No ripple, sadly. AFAIK you can't merge a transparent PNG with an SVG to get another SVG.

Although theoretically, if we somehow convert the NS ripple PNG to an SVG overlay, would the feature be possible?