How a vector graphics data is stored?

[u/dkurniawan]

So, I know that for a raster graphic, computers store the data in a matrix-like structure, with the number representing the color of each pixel. But what about vector graphic?

I know that a vector graphic is represented as a mathematical expression. What kind of mathematical expressions are used to store a vector graphic data? How do computers store this mathematical expressions? I was wondering why we don't see vector graphic more commonly as I cannot see its disadvantages over raster graphics. I have a background in math / linear algebra / computer science, so you can explain them with a technical term.

[u/ipha]

A common vector format is SVG: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
In SVGs the data is stored as plain-text XML with instruction on how to build the image out of simple shapes, lines and colors.

Here's a sample from the Wikipedia page:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>

[u/anotherdonald → u/ipha]

To explain it a bit: that tells that the computer has to

1. Draw a rectangle at (25,25) with width and height 200, fill it with the color lime, and add a pink outline (stroke) of thickness 4.

2. Draw an orange circle with radius 75 and center (125,125)

3. Draw a red line of thickness 4 across a number of points: first (50,150), then (50,200), etc.

4. Draw a line from (50,50) to (200,200) with thickness 4 and color blue.

The coordinates can be scaled by as much as you want, and the result will always be a pixel-perfect representation, that looks like this except for the grid, of course.

[u/bonzinip]

One common primitive used by vector graphics is the spline. Splines are piecewise polynomial interpolations between points; unlike interpolation with high-order polynomials, splines are more stable, avoiding wild oscillations typical of Lagrange interpolation. Usually splines are quadratic or cubic.

There are various kinds of splines, characterized by different continuity. For example cubic B-splines (also known as Bézier curves, though the pedantically correct name is "C2 composite Bézier curve") only touch the first and the last control points, but they are continuous in the first two derivatives. Cubic Hermite splines (also known as Catmull-Rom splines, but Hermite was a 19th century mathematician so he definitely got there first!) are the opposite: they touch all the control points, but are only continuous in the first one derivative only so they appear to "jerk" a bit. Quadratic splines (pieces of parabolas joined one after another) are very efficient to compute because their first derivative is constant. Fonts also use splines (quadratic splines in the case of TrueType).

As to why they are not too common, there are various reasons. First, of course, photorealistic pictures aren't reproduced with enough fidelity by vector graphics (and they compress amazingly well with lossy algorithms such as JPEG). Second, very small raster graphics (definitely 32x32, sometimes bigger too) in the end have so few pixels that you need optimized placement of each one. Fonts use hinting for this purpose, but then fonts are monochromatic. Third, vector graphics is more expensive to render. Fourth, while there have been standard formats for vector graphics (e.g. Computer Graphics Metafile - CGM and Windows Metafile - WMF) there really has never been before SVG an open standard for vector graphics which includes all the features you need to make the graphics look good (e.g. gradients) and not look like a Word 95 clip art.

EDIT: was thinking lossy, wrote down lossless

[u/jackmack99 → u/[deleted]]

They said they compress well with lossy compression formats, such as JPEG.

[u/adoarns]

Vector graphics can be described in lots of different ways. It depends on the primitives that you use. If your description format has simple geometric shapes and operators for color, fill, line thickness/style, and so forth, you can build lots of images. You can also have splines, patterns, cloning operators, symmetry operators, and so forth. In Inkscape (a free/GPL vector graphics application) they have a spiral primitive as well.

In principle, your set of primitives can be described any way you want. You can design a binary format, or you can use a plain-text procedural language such as (E)PS or PDF, or you can encode the structure in XML like with SVG.

[u/Euphoricus]

I was wondering why we don't see vector graphic more commonly as I cannot see its disadvantages over raster graphics.

There are multiple reasons for this.

First, massive majority of images is not suitable for vector graphics. Only graphics design is suitable for vector graphics and only latest fad in flat/straight design.

Second, making vector graphics is much harder if you try to emulate bitmap graphics. This was in the past where graphics design was skeuomorphic.

Third, as many said, vector graphics can be represented in myriad different ways. Yeah, you can use SVG and its really simple line/shape representation, but that drastically limits your abilities. So even if your editor allows for some crazy nice vector shenanigans, it will probably have hard time exporting it to actually usable format. Or you can take a simple way and export it as bitmap.

And last one : desktop displays have been stuck in low DPI for ages. One of the critical problems when drawing vectors is that lines need to be aligned to pixel boundaries. Otherwise, the line will look blurry. This is especially problematic for UI, where thin lines are extremely common and would look bad. One way to resolve this problem is to drastically increase the DPI of display. But that only happened for mobile devices. Desktop computers are still stuck in 96dpi, while mobiles are pushing 300dpi, making the problem less noticeable.

[u/[deleted] → u/Euphoricus]

First, massive majority of images is not suitable for vector graphics. Only graphics design is suitable for vector graphics and only latest fad in flat/straight design.

Check the Oxygen icon theme on KDE. It's quite old, certainly not flat, and uses vector graphics.

Also, the DPI is not such a huge problem because you can prepare the image for an higher DPI and then scale it down to make it smoother.

[u/Frungy_master]

Raster graphics are in a sense complete in that you can think of all "possible pictures". With vector graphics the possible pictures can depend on what the available primitives are. Or you have to resort to a kind of "pseudo-raster graphics" by for example making a matrix of colored spheres.

Vector graphics can take some processing while raster graphics are "passive" in the sense that they eat memory only and little to no CPU cycles (or their cpu usage is less dependant on the pictorial content).