SVG nation flags

[Afsharid Persia]

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

[Ispravlennaja Tsekovija]

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

[[violet]]

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!

[Window Land]

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

[[violet]]

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.

[USS Juneau]

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

[Afsharid Persia]

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

[Trotterdam]

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.

[[violet]]

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.

[[violet]]

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.

[USS Juneau]

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

[[violet]]

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

[[violet]]

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.

[Ispravlennaja Tsekovija]

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

[USS Juneau]

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.

[Ispravlennaja Tsekovija]

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.

[USS Juneau]

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?

[Ispravlennaja Tsekovija]

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.

[The Kingdom of the Three Isles]

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.

[Afsharid Persia]

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.

[[violet]]

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.

[Wymondham]

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

[Luna Amore]

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

Looks to be 60kb:

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.

[Wymondham]

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

Looks to be 60kb:

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?

[Trotterdam]

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.