Page 1 of 4

SVG nation flags

PostPosted: Tue Oct 12, 2021 11:56 pm
by [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

PostPosted: Wed Oct 13, 2021 12:02 am
by 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! ❤️

PostPosted: Wed Oct 13, 2021 12:06 am
by Cereskia 2
I would bring Scrontch's flag designer to the light for some testing.

PostPosted: Wed Oct 13, 2021 12:11 am
by 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.

PostPosted: Wed Oct 13, 2021 12:31 am
by SherpDaWerp
[violet] wrote: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?

PostPosted: Wed Oct 13, 2021 12:54 am
by [violet]
Valentine Z wrote: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.

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

PostPosted: Wed Oct 13, 2021 1:50 am
by 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

PostPosted: Wed Oct 13, 2021 3:06 am
by SherpDaWerp
[violet] wrote: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.

PostPosted: Wed Oct 13, 2021 3:18 am
by The Onox Legion
Works from my end
Can recommend Armoria dearly

PostPosted: Wed Oct 13, 2021 8:53 am
by 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.

PostPosted: Wed Oct 13, 2021 9:01 am
by 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.

WTFlag?

PostPosted: Wed Oct 13, 2021 9:31 am
by 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?

PostPosted: Wed Oct 13, 2021 9:48 am
by Merni
On "Antiquity" theme, nations pages for nations with SVG flags show massive flag images that take up the entire page width or more.

PostPosted: Wed Oct 13, 2021 10:35 am
by 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.

PostPosted: Wed Oct 13, 2021 2:52 pm
by Haganham
Does this mean there's hope for svg support elsewhere?

PostPosted: Wed Oct 13, 2021 3:12 pm
by 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.

PostPosted: Wed Oct 13, 2021 5:00 pm
by [violet]
Cain EL v1 wrote: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.

PostPosted: Wed Oct 13, 2021 5:02 pm
by [violet]
Durm wrote: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.

PostPosted: Wed Oct 13, 2021 5:07 pm
by [violet]
Merni wrote: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.

PostPosted: Wed Oct 13, 2021 5:08 pm
by [violet]
Broceliande wrote: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.

PostPosted: Wed Oct 13, 2021 5:10 pm
by [violet]
Republic Of Ludwigsburg wrote: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.

PostPosted: Wed Oct 13, 2021 5:15 pm
by [violet]
Refuge Isle wrote: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.

PostPosted: Wed Oct 13, 2021 5:16 pm
by 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.

PostPosted: Wed Oct 13, 2021 5:29 pm
by [violet]
SherpDaWerp wrote: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.

PostPosted: Wed Oct 13, 2021 5:34 pm
by 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).