How does a .svg work?

I want to create a code that allows you to download an image you have saved as a save-code to your computer as a gif, png, or something else supported, but not as a snap! save code for a specific project,
so it can be an actual file on your computer,
but I don't know how any of these work.

Can someone tell me how any standard image file works so I can convert it into binary or whatever, but in the right way?

Add it to my costumes, and then right click on it and export it.

No, can you tell me what sort of binary notation to use to represent each pixel?
Not how to personally get a picture of the screen - I could take a screenshot.
I want to make the the save-code itself a downloadable raw data gif (or other).

For gifs, ask @cymplecy - he knows about this

Alright - @cymplecy, can you help?

So what is it you want to do?

Do you want to create a costume image using Snap! to directly create the pixels?

Or do you want to save a costume as a .gif or .png?

When you say "save-code" do you mean a Snap! script?

No, you don't need to do that. There is a way in JavaScript to save a Canvas as an image, and Snap! costumes are internally HTML canvases.


If you want to save it as a GIF, go inside the block, replace "image/png" with "image/gif", and replace where it says ".png" with ".gif"

Unfortunately, I do not know if JavaScript can create animated gifs.

Chrome@Win10 : canvas.toDataURL handles only PNG, JPG and WEBP. Look at the internals of the image saved with "image/gif". It is encoded as PNG, not GIF.

Those formats are pretty complicated to generate, because they use compression techniques with a lot of options. I'm not an expert, but I know that gif includes a choice of how many bytes per pixel, which implies the range of colors included. For less than four bytes per pixel, they don't just round colors to a fixed palette; they go through all the pixels to compute the most-used colors and include a palette key. The png algorithm includes half a dozen different compression techniques, and a particular png image can use different techniques in different regions, depending on the range of colors, etc. Wikipedia will tell you some of the gory details.

If you want to learn how to write a costume to a picture file without letting the browser do it for you, I would suggest that you start by saving it as a bmp (bitmap) file. These files are uncompressed and include all the pixels at full 4-byte color. Once you have that down, then you can start thinking about compressed formats.

Ok, I mean how do I convert a vector array with every vector described as something like:
the first two being the position,
the second three being the color,
and the last one being the pen size,

to a bitmap format to save to your computer?

Ah, if what you have is a vector costume, you should just save it as an svg, which is basically equivalent to what's in your array.

And your vector will have four numbers for the positions of the two endpoints.

But if you want to create a bitmap, start by making a big empty one (an array of all transparent pixels, or white if you prefer) and then for each vector you change the colors of the pixels covered by the vector.

How much detail do you want? Should we talk about slopes of lines, or is that something you already understand? For starters, don't try to do antialiasing; let there be jaggies in the result.

Oh, it's fine to save it as an svg, how many pixels isit by how many?
Do i literally do
[ [0, 0, 5, 10], [5, 10, -15, -3]... ]

If you have a vector picture, it can be displayed at any size.

I really don't know anything about the svg file format. I would start with Wikipedia, which should point to the official standard. If you come across things you don't understand, I could look at them with you and try to help.

Ok, I will do.

What do You want to do?
Do you have some image data in the form of a list containing
(x,y,red,green,blue, size) and want to save a GIF/PNG/SVG file on a computer? And what is most important - getting the image file or learn how images are encoded?
Either way, you need to split work into smaller steps.
E.g. paint your data on stage with
RenderList script pic
then export as PNG with right-click.
Example project

I'd convert it into Base64, so they can then simply paste the code into their browser and right-click, download.

The builtin javascript function window.saveAs is good for saving text files, including svg files. However, if you want something more complicated like a png you should let the browser do it, using canvas as base64 data url.