SVG nation flags

[[violet]]

Hello Technical,

Because Internet Explorer died and the internet became a better place, we are now testing SVG flags. Please use this thread to report any hijinks or weirdness.

The main changes are:

(1) Most old tiny inbuilt PNG flags have been replaced with sleek SVG alternatives, which look much better at larger sizes.

(2) You can upload SVG flags -- although this doesn't support all SVG images, because we aggressively screen out images that contain potentially dangerous code, or really even anything that looks a bit like it might have potentially dangerous embedded code if you squint.

As usual, please supply as much detail as you can in bug reports, including your browser/device type, as well as whether you're using a non-default NS theme. If there is a particular image that the server is choking on and you want me to investigate, please upload a copy of it somewhere.

--v

[Valentine Z]

Ooooh, neat! I can't wait to try this out with my flags, hehe.

Thanks, Violet!

Edit: It works! Ohhh, boy, it's so clear! ❤️

[Cereskia 2]

I would bring Scrontch's flag designer to the light for some testing.

[Valentine Z]

Without sounding like I'm trying to pry open a rule or trying to find a loophole, I have to ask...

By dangerous SVG, does that mean images with hidden / offensive / illegal codes hidden inside, or are we also including technically dangerous ones (for example, tracing an image into a SVG can lead to a very huge sets of lines and points that might take a while to load or render).

Thanks in advance!

Edit: For those (including me, actually) who didn't know about the dangers of SVG: https://blog.online-convert.com/svg-fil ... ts-danger/. Disclaimer that I am not here to show how, nor do I know how to embed such a thing.

Edit 2: 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.

[SherpDaWerp]

we aggressively screen out images that contain potentially dangerous code, or really even anything that looks a bit like it might have potentially dangerous embedded code if you squint.

Without revealing anything about how you conduct said screening, how much animation is going to pass this filter?

For instance, I'd consider "upgrading" my current flag to a SVG file if color-changing (see the flag) is going to be fine, but I'd rather not waste 2-3 hours creating a SVG only to find out it doesn't work.

EDIT: Although, now I look at it - I really wouldn't mind playing with event handlers, but I understand they've got about a snowball's chance of hell in passing the screening. Will any events like onclick or onmouseover work?

[[violet]]

By dangerous SVG, does that mean images with hidden / offensive / illegal codes hidden inside, or are we also including technically dangerous ones (for example, tracing an image into a SVG can lead to a very huge sets of lines and points that might take a while to load or render).

We check for file size, and deny anything with script tags. We also compress pretty aggressively.

EDIT: Although, now I look at it - I really wouldn't mind playing with event handlers, but I understand they've got about a snowball's chance of hell in passing the screening. Will any events like onclick or onmouseover work?

No JavaScript is supported. Animation, I'm not sure... how would you implement it? If it's a style tag, it might work.

[Allinburg]

svg lookin' sharp!!

tho the large flag bug persists on chrome (94.0.4606.81), firefox (93.0) and safari (15.0) on my computer

also safari (both desktop and phone) displays svg flags as a compressed and pixelated preview, instead of outright showing the svg

[SherpDaWerp]

No JavaScript is supported. Animation, I'm not sure... how would you implement it? If it's a style tag, it might work.

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.

At a 5-minute guess, my first thing to try would be a "base frame" of my current design, in white, with a CSS-based changing color filter applied to it. Example code copied from wikipedia:

Code: Select all

<style type="text/css">
    @keyframes animate_color {
        0%   {background-color: red;}
        25%  {background-color: yellow;}
        50%  {background-color: blue;}
        100% {background-color: green;}
    }
    .animated { animation: animate_color 1s linear infinite; }
</style>

I don't have a lot of free time to experiment atm, so unless I really want to procrastinate my work I won't be able to get much more concrete than that for a few weeks or so. I don't expect the system to be changed around animation, my flag is fine as-is, so as long as there's support for style tags I'll try and figure something out - and if nothing works, so be it.

[The Onox Legion]

Works from my end
Can recommend Armoria dearly

[Refuge Isle]

Greetings,

It appears as though this change has caused the SVG flags to display at a default 900x600 on the reports page, as well as a given page's no-template pages. I presume this is undesired operation. Certainly it causes an amount of inconvenience between the hours of update.

[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.

[Broceliande]

Just yesterday, my Flag suddenly became huge and fills up the whole page, requiring to scroll down most of a page to get to the content on the main page.

WTF? Is there a way I can manage this appearance?
Was there some site change, or is this some kind of error or glitch?
I use one of the default supplied flags, btw.

edit:
I've also noticed that the flag indicator on the trend page is also embiggened. So this really can't be intentional, because this renders that chart non-functional.

Can we please fix this?

[Merni]

On "Antiquity" theme, nations pages for nations with SVG flags show massive flag images that take up the entire page width or more.

[Durm]

When you haven't chosen a flag yet, the nation creation page shows the default flag like it always has done, but the selection thing says Aaland Islands. When you create a nation without choosing a flag, it has the Aaland Islands flag.

[Haganham]

Does this mean there's hope for svg support elsewhere?

[Cain EL v1]

This nation's flag, the flag of Sweden, seems to be invisible on my front page. Under Settings, it displays, but in the old smaller size.

Windows 10, behavior the same under all of Edge, Firefox and Chrome.

[[violet]]

This nation's flag, the flag of Sweden, seems to be invisible on my front page. Under Settings, it displays, but in the old smaller size.

Windows 10, behavior the same under all of Edge, Firefox and Chrome.

This should be fixed now. That particular image had no default size, so could be displayed at size 0x0.

[[violet]]

When you haven't chosen a flag yet, the nation creation page shows the default flag like it always has done, but the selection thing says Aaland Islands. When you create a nation without choosing a flag, it has the Aaland Islands flag.

Great catch. Now fixed, thanks.

[[violet]]

On "Antiquity" theme, nations pages for nations with SVG flags show massive flag images that take up the entire page width or more.

Ah, I always forget about poor Antiquity theme. Should be fixed now, thanks.

[[violet]]

Just yesterday, my Flag suddenly became huge and fills up the whole page, requiring to scroll down most of a page to get to the content on the main page.

WTF? Is there a way I can manage this appearance?
Was there some site change, or is this some kind of error or glitch?
I use one of the default supplied flags, btw.

I'm going to assume this was an Antiquity theme bug; if not, please specify your browser+device+theme.

[[violet]]

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.

[[violet]]

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.

[Courelli]

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.

Edit: I'm using Google Chrome on a Dell laptop, if that makes a difference, and I created the SVG mere minutes ago in Adobe Illustrator.

[[violet]]

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.

[Erynia and Draconia]

My SVG flag shows up way too big and on the NS stat trends the flag is extremely big (as some people have already said).