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
Afsharid Persia
Lobbyist
 
Posts: 13
Founded: Dec 04, 2014
Inoffensive Centrist Democracy

Postby Afsharid Persia » Mon Oct 25, 2021 10:22 pm

So how do we actually upload the svg file? I tried changing my flag and it said:

The flag you're uploading does not appear to be a valid image format (JPEG/JPG, PNG, or GIF).

My flag file is an svg and it shows up fine in the preview

User avatar
Ispravlennaja Tsekovija
Diplomat
 
Posts: 526
Founded: Oct 21, 2021
Ex-Nation

Postby Ispravlennaja Tsekovija » Tue Oct 26, 2021 11:04 am

Afsharid Persia wrote:So how do we actually upload the svg file? I tried changing my flag and it said:

The flag you're uploading does not appear to be a valid image format (JPEG/JPG, PNG, or GIF).

My flag file is an svg and it shows up fine in the preview

violet said it's pretty harsh about potential security issues. if you link a pastebin of the file contents i (or others) would be able to look for potential causes
""nsg is dumb" —barack obama" —plato

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

Postby [violet] » Wed Oct 27, 2021 9:20 pm

Raccoon Creek wrote:Since I have begun using an .svg file for my national flag, I have noticed that the search suggestions when logging into the website and on the 'World' page only display my nation's name and no longer my nation's name plus the national flag. Below is an image of what I am mentioning.

https://i.imgur.com/vMPZ58v.png

Now fixed. Thanks for the report & screenshot!

User avatar
Window Land
Envoy
 
Posts: 258
Founded: Nov 02, 2016
Left-wing Utopia

Postby Window Land » Wed Oct 27, 2021 10:11 pm

The upload flag page still says you can only upload JPEG, PNG, and GIF files, you probably should update the description to include SVGs.
Bored college student who is probably supposed to be doing something important.
Woodie Flowers wrote:If you’re anti-science, you’re pro-stupid.

Evelyn Beatrice Hall wrote:I disapprove of what you say, but I will defend to the death your right to say it.

Randall Munroe wrote: I can't remember where I heard this, but someone once said that defending a position by citing free speech is sort of the ultimate concession; you're saying that the most compelling thing you can say for your position is that it's not literally illegal to express.
Free Speech

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

Postby [violet] » Thu Oct 28, 2021 9:33 pm

Window Land wrote:The upload flag page still says you can only upload JPEG, PNG, and GIF files, you probably should update the description to include SVGs.

The feature is still in testing and not officially supported (although it will be). I need to add better error messages for unsupported flags and fix a couple of other things before updating the docs.

User avatar
USS Juneau
Lobbyist
 
Posts: 14
Founded: Jun 23, 2021
Left-Leaning College State

Postby USS Juneau » Mon Nov 01, 2021 3:44 am

When I attempt to upload a .svg flag, I immediately get kicked over to Cloudflare checking my browser. After the check is complete, it then fails the upload as it has no file attached. I have tried on both Chrome and Firefox.

Browser: Google Chrome 95.0.4638.54, Firefox 93.0 (64 bit)
Device: Windows 10 20H2, build 19042
Aav
Doer of things
Discord Tag: Aav#7546



My Projects: Chaylia | some code things on github that I'm too lazy to link rn

User avatar
Afsharid Persia
Lobbyist
 
Posts: 13
Founded: Dec 04, 2014
Inoffensive Centrist Democracy

Postby Afsharid Persia » Mon Nov 01, 2021 9:43 pm

Ispravlennaja Tsekovija wrote:
Afsharid Persia wrote:So how do we actually upload the svg file? I tried changing my flag and it said:

The flag you're uploading does not appear to be a valid image format (JPEG/JPG, PNG, or GIF).

My flag file is an svg and it shows up fine in the preview

violet said it's pretty harsh about potential security issues. if you link a pastebin of the file contents i (or others) would be able to look for potential causes


Sure, here it is:

https://filebin.net/7tawfgruz4j9qq6b

User avatar
Trotterdam
Powerbroker
 
Posts: 9560
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Tue Nov 02, 2021 12:46 am

Umm...
Code: Select all
viewBox="0 0 400 NaN"
I don't know if that's the source of the problem, but I don't think NaN is supposed to be there.

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

Postby [violet] » Tue Nov 02, 2021 4:53 pm

Trotterdam wrote:Umm...
Code: Select all
viewBox="0 0 400 NaN"
I don't know if that's the source of the problem, but I don't think NaN is supposed to be there.

Yep, that's the problem. It works if you fix or remove that.

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

Postby [violet] » Tue Nov 02, 2021 4:54 pm

USS Juneau wrote:When I attempt to upload a .svg flag, I immediately get kicked over to Cloudflare checking my browser. After the check is complete, it then fails the upload as it has no file attached. I have tried on both Chrome and Firefox.

Browser: Google Chrome 95.0.4638.54, Firefox 93.0 (64 bit)
Device: Windows 10 20H2, build 19042

Can you share the image you're trying to upload? It might let me trigger a CloudFlare check so I can see what's happening.

User avatar
USS Juneau
Lobbyist
 
Posts: 14
Founded: Jun 23, 2021
Left-Leaning College State

Postby USS Juneau » Tue Nov 02, 2021 10:54 pm

[violet] wrote:
USS Juneau wrote:When I attempt to upload a .svg flag, I immediately get kicked over to Cloudflare checking my browser. After the check is complete, it then fails the upload as it has no file attached. I have tried on both Chrome and Firefox.

Browser: Google Chrome 95.0.4638.54, Firefox 93.0 (64 bit)
Device: Windows 10 20H2, build 19042

Can you share the image you're trying to upload? It might let me trigger a CloudFlare check so I can see what's happening.


Sure, no problem. http://img.chaylia.net/chaylia.svg
Aav
Doer of things
Discord Tag: Aav#7546



My Projects: Chaylia | some code things on github that I'm too lazy to link rn

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

Postby [violet] » Wed Nov 03, 2021 12:09 am

Thanks, that does indeed trigger the problem for me, too. I will investigate.

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

Postby [violet] » Wed Nov 03, 2021 12:28 am

FYI that image, while technically an SVG, is actually made up of large embedded PNGs. Even if CloudFlare stops blocking it, it won't be accepted by our server as it's over 1MB.

User avatar
Ispravlennaja Tsekovija
Diplomat
 
Posts: 526
Founded: Oct 21, 2021
Ex-Nation

Postby Ispravlennaja Tsekovija » Wed Nov 03, 2021 7:31 am

USS Juneau wrote:
[violet] wrote:Can you share the image you're trying to upload? It might let me trigger a CloudFlare check so I can see what's happening.


Sure, no problem. http://img.chaylia.net/chaylia.svg

here is a replacement that actually does what SVG is designed to do and fits within the file size limits https://pastebin.com/edS9rbep
""nsg is dumb" —barack obama" —plato

User avatar
USS Juneau
Lobbyist
 
Posts: 14
Founded: Jun 23, 2021
Left-Leaning College State

Postby USS Juneau » Wed Nov 03, 2021 11:17 am

[violet] wrote:FYI that image, while technically an SVG, is actually made up of large embedded PNGs. Even if CloudFlare stops blocking it, it won't be accepted by our server as it's over 1MB.

Oops, good to know. I've never designed a SVG before, so that's something I didn't consider. I'll see whether or not changing the PNGs to bitmaps fixes anything there.
Aav
Doer of things
Discord Tag: Aav#7546



My Projects: Chaylia | some code things on github that I'm too lazy to link rn

User avatar
Ispravlennaja Tsekovija
Diplomat
 
Posts: 526
Founded: Oct 21, 2021
Ex-Nation

Postby Ispravlennaja Tsekovija » Wed Nov 03, 2021 11:31 am

USS Juneau wrote:
[violet] wrote:FYI that image, while technically an SVG, is actually made up of large embedded PNGs. Even if CloudFlare stops blocking it, it won't be accepted by our server as it's over 1MB.

Oops, good to know. I've never designed a SVG before, so that's something I didn't consider. I'll see whether or not changing the PNGs to bitmaps fixes anything there.

it won't. SVG is a vector file storage format. it is not designed to carry raster images and when it is used for such it will not take up less space (it might take more). changing the format the raster image is stored in will have zero effect whatsoever.

RIGHT above this post i posted an almost 100% precise conversion of the image you posted into actual vector format. you can use it if you want to use an SVG file. otherwise don't try to fit a square peg into a round hole by putting raster images into a vector format, just use a PNG.
""nsg is dumb" —barack obama" —plato

User avatar
USS Juneau
Lobbyist
 
Posts: 14
Founded: Jun 23, 2021
Left-Leaning College State

Postby USS Juneau » Wed Nov 03, 2021 11:58 am

Ispravlennaja Tsekovija wrote:
USS Juneau wrote:Oops, good to know. I've never designed a SVG before, so that's something I didn't consider. I'll see whether or not changing the PNGs to bitmaps fixes anything there.

it won't. SVG is a vector file storage format. it is not designed to carry raster images and when it is used for such it will not take up less space (it might take more). changing the format the raster image is stored in will have zero effect whatsoever.

RIGHT above this post i posted an almost 100% precise conversion of the image you posted into actual vector format. you can use it if you want to use an SVG file. otherwise don't try to fit a square peg into a round hole by putting raster images into a vector format, just use a PNG.


I used Path -> Trace Bitmap in Inkscape and cut the size down to 149kb, so... not sure what I'm doing wrong. Do you have a tutorial to link on this?
Aav
Doer of things
Discord Tag: Aav#7546



My Projects: Chaylia | some code things on github that I'm too lazy to link rn

User avatar
Ispravlennaja Tsekovija
Diplomat
 
Posts: 526
Founded: Oct 21, 2021
Ex-Nation

Postby Ispravlennaja Tsekovija » Wed Nov 03, 2021 12:37 pm

USS Juneau wrote:
Ispravlennaja Tsekovija wrote:it won't. SVG is a vector file storage format. it is not designed to carry raster images and when it is used for such it will not take up less space (it might take more). changing the format the raster image is stored in will have zero effect whatsoever.

RIGHT above this post i posted an almost 100% precise conversion of the image you posted into actual vector format. you can use it if you want to use an SVG file. otherwise don't try to fit a square peg into a round hole by putting raster images into a vector format, just use a PNG.


I used Path -> Trace Bitmap in Inkscape and cut the size down to 149kb, so... not sure what I'm doing wrong. Do you have a tutorial to link on this?

i don't have a tutorial for you, but i do suggest you use something called common sense, i.e., not trying to do the labor of converting raster graphics to vector graphics seemingly without a good reason and without basic background knowledge when somebody already did said labor for you.

inkscape's automated tracing is useful in maybe 0.01% of use cases that someone would have for a raster->vector conversion (yours is not in that 0.01%). the utility produces a large number of high-complexity but low-precision traces of the bitmap, which slows down operation and produces an image with at best slightly higher quality and scalability than the original raster. in order to convert a bitmap image to a small and maneuverable vector file, you cannot get around it, you have to manually recreate all of the primitives. which i did for you already. (if you want figures, the manually traced file i made was 19.1 kB, an 87% decrease in size from the equivalent one you produced with automated tracing. and that's without dedicated size-reduction measures.)

seriously, just use the one i gave you (new link because i fixed a tiny problem) instead of trying to do this weird crap. there is nothing wrong with it and it looks identical to the original. then read the wikipedia page for vector graphics, because i'm not sure you wholly grasp the concept. which is fine, but you probably should understand the fundamental concepts before you try to undertake a task involving them.
""nsg is dumb" —barack obama" —plato

User avatar
The Kingdom Of The Three Isles
Diplomat
 
Posts: 586
Founded: Jun 01, 2021
Democratic Socialists

Postby The Kingdom Of The Three Isles » Thu Nov 04, 2021 12:02 am

Ispravlennaja Tsekovija wrote:
USS Juneau wrote:
I used Path -> Trace Bitmap in Inkscape and cut the size down to 149kb, so... not sure what I'm doing wrong. Do you have a tutorial to link on this?

i don't have a tutorial for you, but i do suggest you use something called common sense, i.e., not trying to do the labor of converting raster graphics to vector graphics seemingly without a good reason and without basic background knowledge when somebody already did said labor for you.

That's not very nice.
Gender: Male
Religion: Christianity
Political Compass: LibRight
Moral Alignment: Lawful Good
Supports LGBTQ+ Groups
No, this is not the Iron Cross, and no I ain’t a N@zi.
Third time's the charm they say...

User avatar
Afsharid Persia
Lobbyist
 
Posts: 13
Founded: Dec 04, 2014
Inoffensive Centrist Democracy

Postby Afsharid Persia » Mon Nov 08, 2021 5:34 pm

Trotterdam wrote:Umm...
Code: Select all
viewBox="0 0 400 NaN"
I don't know if that's the source of the problem, but I don't think NaN is supposed to be there.


I tried that and it worked, but the flag wouldn't display properly once uploaded. It looked fine when the file itself was viewed on Chrome, but once it was applied to the nation on NS, it had some weird lines around it, almost like an outline.

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

Postby [violet] » Mon Nov 08, 2021 7:08 pm

Afsharid Persia wrote:It looked fine when the file itself was viewed on Chrome, but once it was applied to the nation on NS, it had some weird lines around it, almost like an outline.

Where are you seeing an outline? I uploaded it to Testlandia and it looks correct to me.

User avatar
Wymondham
Envoy
 
Posts: 259
Founded: Apr 03, 2017
Libertarian Police State

Postby Wymondham » Wed Nov 10, 2021 5:17 am

What is the current maximum upload size for a SVG flag?
Doer of the things and the stuffs.
That British dude who does the charity fundraiser.

User avatar
Luna Amore
Issues Moderator
 
Posts: 12932
Founded: Antiquity
Benevolent Dictatorship

Postby Luna Amore » Wed Nov 10, 2021 7:31 am

Wymondham wrote:What is the current maximum upload size for a SVG flag?

Looks to be 60kb:
[violet] wrote: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.

User avatar
Wymondham
Envoy
 
Posts: 259
Founded: Apr 03, 2017
Libertarian Police State

Postby Wymondham » Wed Nov 10, 2021 7:49 am

Luna Amore wrote:
Wymondham wrote:What is the current maximum upload size for a SVG flag?

Looks to be 60kb:
[violet] wrote: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.

How much compression does the site usually manage in terms of getting it down to size, obviously it varies from case to case, but is there a theoretical maximum raw size beyond which the site cannot compress it down enough?
Doer of the things and the stuffs.
That British dude who does the charity fundraiser.

User avatar
Trotterdam
Powerbroker
 
Posts: 9560
Founded: Jan 12, 2012
Left-Leaning College State

Postby Trotterdam » Wed Nov 10, 2021 1:40 pm

Wymondham wrote:How much compression does the site usually manage in terms of getting it down to size, obviously it varies from case to case, but is there a theoretical maximum raw size beyond which the site cannot compress it down enough?
Not technically. SVG allows comments and arbitrary whitespace and such, so if you wanted you could easily create a totally-valid conforms-to-all-standards one-terabyte SVG file that describes an image that could have been encoded in only a few hundred bytes.

Of course, I doubt the NationStates server will actually accept that one-terabyte SVG file as an upload. If it does, we probably want to fix that.

If your SVG file was already very efficient with little wasted space, then the site won't be able to compress it much. Sometimes it might even increase the size a little, due to its "santizing" procedures prioritizing a standardized format over the most efficient one.

PreviousNext

Advertisement

Remove ads

Return to Technical

Who is online

Users browsing this forum: Erynia and Draconia, Tocan Republic

Advertisement

Remove ads