NATION

PASSWORD

SVG nation flags

Bug reports, general help, ideas for improvements, and questions about how things are meant to work.

Advertisement

Remove ads

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

Postby [violet] » Wed Oct 13, 2021 5:48 pm

Erynia and Draconia wrote: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.

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

Postby [violet] » Wed Oct 13, 2021 5:50 pm

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

User avatar
Erynia and Draconia
Bureaucrat
 
Posts: 62
Founded: Nov 09, 2017
Left-wing Utopia

Postby Erynia and Draconia » Wed Oct 13, 2021 5:52 pm

[violet] wrote:
Erynia and Draconia wrote: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.
The Democratic States of Erynia and Draconia
"Pax, libyre, ed ègālya"

Overview | Political Parties | My puppets

Minister of Immigration of The Social Liberal Union
Pronouns: he/they
Pro and Anti:
For: Socialism, eco-socialism, LGBTQ+ rights, Marxism
Neutral: Social democracy
Against: Fascism, racism, homophobia, etc.; capitalism; TERFs; totalitarianism; imperialism
President: Lukas Daniels
Prime Minister: Léslye Smydt
Capital city: Erynsitte

Member of LITA

User avatar
Tinhampton
Powerbroker
 
Posts: 9202
Founded: Oct 05, 2016
Anarchy

Postby Tinhampton » Wed Oct 13, 2021 5:58 pm

The forumside flag of The republic of Jackalopetopia is still Default.png, not Default.svg. Is this deliberate?
The Self-Administrative City of TINHAMPTON (pop. 319,372): Saffron Howard, Mayor (UCP); Alexander Smith, WA Delegate-Ambassador

Authorships & co-authorships: SC#250, SC#251, Issue #1115, SC#267, GA#484, GA#491, GA#533, GA#540, GA#549, SC#356, GA#559, GA#562, GA#567, GA#578
Other achievements: Cup of Harmony 73 champions; Philosopher-Queen of Sophia; possibly very controversial; "Tinhampton? the man's literally god"
Who am I, really? 46yo Tory woman w/Asperger's; Cambridge graduate; currently reading National Populism by Roger Eatwell and Matthew Goodwin

User avatar
Big Boyz
Spokesperson
 
Posts: 109
Founded: Apr 27, 2017
Psychotic Dictatorship

Postby Big Boyz » Wed Oct 13, 2021 6:34 pm

[violet] wrote:
Erynia and Draconia wrote: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)
I'm not psychotic, the voices tell me I'm sane!
Pretending to give my citizens freedom
Actually giving my citizens freedom

User avatar
Gandoor
Powerbroker
 
Posts: 9740
Founded: Sep 23, 2008
Civil Rights Lovefest

Postby Gandoor » Wed Oct 13, 2021 6:58 pm

I'm not using an SVG flag (obviously) but my flag gameside is now displaying in the wrong aspect ratio and is distorted.
OOC - Call me Viola
IC Flag|Gandoor Wiki|Q&A|National Currency Database
Reminder that true left-wing politics are incompatible with authoritarianism, totalitarianism, and dictatorship in all forms.
Flag is currently Phantom Thief Jeanne from Kamikaze Kaitou Jeanne.
I'm female.
She/They
OOC Info
Twitter: @Sailor_Viola
Steam: Princess Viola
TGs are welcome

User avatar
Diarcesia
Senator
 
Posts: 4508
Founded: Aug 21, 2016
Democratic Socialists

Postby Diarcesia » Wed Oct 13, 2021 7:07 pm

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
Last edited by Diarcesia on Wed Oct 13, 2021 7:14 pm, edited 2 times in total.

User avatar
Minoa
Senator
 
Posts: 4905
Founded: Oct 05, 2011
Civil Rights Lovefest

Postby Minoa » Wed Oct 13, 2021 8:07 pm

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.

[violet] wrote:
Erynia and Draconia wrote: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
Mme A. d'Oiseau, B.A. (State of Minoa)

User avatar
Refuge Isle
Diplomat
 
Posts: 865
Founded: Dec 14, 2018
Left-wing Utopia

Postby Refuge Isle » Wed Oct 13, 2021 8:12 pm

[violet] wrote:
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.

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.

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

Postby [violet] » Wed Oct 13, 2021 8:15 pm

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

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

Postby [violet] » Wed Oct 13, 2021 8:22 pm

Refuge Isle wrote: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.

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

Fixed, thanks.

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

Postby [violet] » Wed Oct 13, 2021 8:24 pm

Minoa wrote: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?

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

Postby [violet] » Wed Oct 13, 2021 8:26 pm

Valentine Z wrote: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.

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

Postby [violet] » Wed Oct 13, 2021 8:28 pm

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

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

Postby [violet] » Wed Oct 13, 2021 8:31 pm

Big Boyz wrote: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.

User avatar
Fhaengshia
Secretary
 
Posts: 40
Founded: Apr 30, 2020
Anarchy

Postby Fhaengshia » Wed Oct 13, 2021 8:35 pm

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
Last edited by Fhaengshia on Wed Oct 13, 2021 8:39 pm, edited 1 time in total.

User avatar
Flanderlion
Minister
 
Posts: 2018
Founded: Nov 25, 2013
Iron Fist Consumerists

Postby Flanderlion » Wed Oct 13, 2021 8:45 pm

[violet] wrote:
Valentine Z wrote: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.
As always, I'm representing myself.
Information
Wishlist

User avatar
Vincent Drake
Envoy
 
Posts: 344
Founded: Dec 08, 2016
Inoffensive Centrist Democracy

Postby Vincent Drake » Wed Oct 13, 2021 8:48 pm

[violet] wrote:
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.


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.
Commander in The Order of the Grey Wardens
Founder of European Union

Need to talk? Vincent Drake#3952

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

Postby [violet] » Wed Oct 13, 2021 8:56 pm

Vincent Drake wrote: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.

User avatar
Valentine Z
Postmaster-General
 
Posts: 10902
Founded: Nov 08, 2015
Scandinavian Liberal Paradise

Postby Valentine Z » Wed Oct 13, 2021 9:01 pm

Gandoor wrote: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.
Val's Stuff. ♡ ^_^ ♡ For You
Independent & Proud.
Project: Save F7.


Photography Stuff Issues Thread 4th in Gen Sec

The Sixty! Opinions Deposit! Valentian Stories! Gwen's Adventures! Cat Anthem! Valentian News.
If you are reading my sig, I want you to have the best day ever ! You are worth it, do not let anyone get you down !
Glory to De Geweldige Sierlijke Katachtige Utopia en Zijne Autonome Machten ov Valentine Z !
Q & A Here! | Heights of NS! | F7 Etiquette

Clarissa mistaken for Smurf/Avatar: 14
Valentijn Misgendered: 59
Valentijn now a She!

• Never trouble trouble until trouble troubles you.
• As a wise man once said: 我等は砲兵 皇国の護り (We are Artillery Guardians of the Empire).
• World Map is a cat playing with Australia.

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

Postby [violet] » Wed Oct 13, 2021 9:17 pm

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

User avatar
Vyharka
Political Columnist
 
Posts: 2
Founded: Feb 22, 2020
Psychotic Dictatorship

Postby Vyharka » Wed Oct 13, 2021 9:31 pm

[violet] wrote:
Minoa wrote: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:

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.

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

User avatar
Minoa
Senator
 
Posts: 4905
Founded: Oct 05, 2011
Civil Rights Lovefest

Postby Minoa » Wed Oct 13, 2021 9:46 pm

[violet] wrote:
Minoa wrote: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.
Mme A. d'Oiseau, B.A. (State of Minoa)

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

Postby [violet] » Wed Oct 13, 2021 10:24 pm

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

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

User avatar
Vincent Drake
Envoy
 
Posts: 344
Founded: Dec 08, 2016
Inoffensive Centrist Democracy

Postby Vincent Drake » Wed Oct 13, 2021 11:10 pm

[violet] wrote:
Vincent Drake wrote: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.
Commander in The Order of the Grey Wardens
Founder of European Union

Need to talk? Vincent Drake#3952

PreviousNext

Advertisement

Remove ads

Return to Technical

Who is online

Users browsing this forum: Ebonnium, Kingdoom of Romania

Advertisement

Remove ads