Like, Vector images are made of separate shapes instead of pixels, but how does it produce an image on a screen if the screen is covered in pixels?
In: Technology
Vector images are like a recipe for a pie. If you follow the recipe and change the amount of ingredients the same amount, you can make the pie as big as you want and it will be the exact same kind of pie, just bigger.
By lossless we mean you can scale them infinitely, since they are defined as shapes you can make them as big as you want without losing quality, a jpeg for example will become pixelated
On display they are indeed converted to pixels, and any screenshot you’d take would still be raster. That screenshot you’d zoom in and get blurriness and everything associated with regular raster images.
But a vector image you can ask it to draw on a 4K screen and it will be as precise as that screen allows. You can zoom in and it will redo the drawing as precise as the screen can at the zoomed level. Kinda like how if you’re asked to draw a 5” square vs a 20” square, the 20” square drawing won’t have the imperfections 4x the size of the imperfections of the 5” square, but the same size instead.
Isn’t that more expensive to compute? Yes, yes it is, though the image is only recomputed as you pan it around and zoom into it, and that’s not happening at 60 or 240 frames a second or whatever. Plus even if it were modern GPUs are blazingly fast and a SVG is typically not even that big, perhaps 1-2MBs containing a few tens to hundreds of thousands of drawing instructions that are extremely simple.
Most images are bitmaps. Aka, instructions to “put a pixel of x colour here, then a pixel of x colour here”, until the entire image has been built. A map of bits.
You compress this by “allowing” similar coloured pixels to use the same colour, with higher compression leading to a wider definition of “similar”. This causes that “blocky” look in highly compressed images.
Vector images don’t do any of the above. They don’t specify specific pixels at all.
Instead, vector images contain math geometry data telling computers what shape to draw when they see it.
This means vectors can only do relatively simple shapes with limited colours, but means the file size is extremely small and the image can be scaled to any size you like, because the instructions remain the same.
There is no concept of compression in vector graphics, because “draw a 2:1 ration rectangle in the image area” is not compressible.
Some good explanations here already, but I thought I’d mention that the technical term for doing this is https://en.m.wikipedia.org/wiki/Rasterisation.
Like other commenters explained, the vector “image” basically contains mathematical instructions for how to ‘draw’ the image. To display it on a 2D pixel display, you run a rasterization algorithm that takes those mathematical instructions and decides which pixels on the screen should be filled with which colors from the instructions. Kinda like making one of those color-by-number grid coloring pages. Then a pixel display knows how to take a color-by-number grid and display it — because that’s really simple, you just set each pixel in the grid to the color it says to use.
Try to draw a line with a pencil on some graphing paper. Then fill in all those boxes which the pencil crossed. If you hold the paper at a distance, you can see something like a crooked line formed by the filled-in squares. That would be a low-resolution line made up of boxes(“pixels”).
If the squares were tiny enough (i.e. there were enough pixels) then the crooked line would look smooth enough.
Even better if you shade the boxes differently, shading each box darker if more of the pencil crossed it. This technique is called anti-aliasing and it makes the line look smoother because the varying shading approximates how the line would look like if each piece of “line” per pixel was averaged out with the background in that pixel.
Raster images like jpg and png basically describe each pixel in an image. For example, the first pixel is black, the second is blue, the third is red, etc.
Vector images are closer to mathematical equations. Draw a blue circle with a 2 unit circumference, 5 units to the right, a yellow rectangle with the height of 10 units and the width of 4 units, etc.
When your screen displays these shapes, it has to solve these equations and convert them to pixels since that’s how your monitor can display them. But as you zoom in, your computer will solve them again and again, so no matter how close you zoom in, the image will have the same quality.
Raster images are great for things like pictures and digital painting, while vector images are usually used with logos, icons, illustrations, and user interfaces.
Latest Answers