Why Don't Vector Images Distort When Scaled?

[fog37]

Hello,

I am trying to understand how vector images are formed and manage to be scaled up or down without distortion. Bitmap images are easy: they are a grid of pixels and each pixel has a certain color. Scaling a bitmap image of 10x10 pixels implies adding new extra pixels and using interpolation to assign color to each new pixel. Scaling down implies removing pixels.

A vector image is formed by primitives that are points, lines, curves and polygons. But why vector images don't suffer distortions when we enlarge them? Scaling is a transformation. How is information manipulated and stored in a vector image?

When we draw a line in microsoft Paint we are actually coloring a series of pixels in a grid. What are we coloring when we draw a line in a vector graphics program?

Thanks!

 

[fog37]

Also, no matter if the image is bitmap or vector, it will eventually be presented on a physical screen which is composed of many pixels. So even a vector image should look fuzzy since it is presented on a screen subdivided into individual pixels.

 

[Nidum]

A vector image is drawn afresh from basic data when it is scaled .

What is actually stored in the computer for a vector image is just a list of operators and parameters .

For instance : Draw circle ( centre coordinates , diameter ) . It is a separate graphics engine that actually draws the circle shape using that information .

So when you change the centre coordinates or change the diameter the graphics engine just erases the old circle and draws a new one .

The number of pixels per unit length in any line is sensibly constant so if (for example) you double the length of any line then you double the number of pixels used to display it .

A complication arises when the line is scaled in width as well as length . In that case the number of pixels needed to show the width also has to be multiplied by the scale factor . This does not always work out very well and you sometimes get that hit and miss definition of line edge that older CAD systems suffered from . Modern graphics engines do a more intelligent scaling so that the visual appearance of the lines is usually more acceptable ..

 

[Nidum]

Image data on screen is not usually presented true size so one needs to be careful in defining what scaling actually means in CAD systems .

When you change the actual dimensions of a feature the parameters of the various operators that define it are scaled in memory .

These parameters usually then need to be scaled again in the graphics engine so as to generate the actual display image . This may be to present a complete drawing at reduced size on screen or to zoom in on a detail area .

 

[sysprog]

Suggest you check out inkscape -- It's free open source svg software -- it's very well documented, has a highly sophisticated active user community, and is continually being improved.

 

[jim mcnamara]

@sysprog https://inkscape.org is the corrected link. Good application. Thanks for the information.

 

[fog37]

Thank you everyone. Let me summarize a few points to make sure I am clear:

• A vector image can be scaled without distortions because every new scaled version of the image is not drawn from the previous data but from the mathematical recipe in memory for that shape. All vector images are built from elementary primitive shapes (which I guess are small lines, correct?). When presented on a physical screen (which is always a grid of elements, the pixels) the vector image could still look pixelated if the screen resolution is not high enough, correct?

• I have downloaded inkscape. Thanks for the suggestoion. Inkscape is a vector graphic program that is great for drawing 2D shapes (for 3D, I guess there are better programs like AI, solidworks, Autocad, etc.). We can always import in Inkscape any type of image (like a bitmap) and convert into a vector image in a few steps. What if I had an equation that, given a range of values, plots a well defined pattern? Is it possible to have Inkscape draw an image from an input equation? If not, how would you proceed? Would you create the image in a different software (like what? Matlab?), store the image and then import it into Inkscape?

Thanks!

 

[Nidum]

(1) Almost all cad systems have an associated programming language and most have the options to drive the cad system either using commands typed into a command line on screen or pulled in from a file .

Files are just basically text files and you can generate these in any way that suits your purpose .

Some cad systems can also link in spread sheet programmes and DIY special purpose software modules written in languages like C or Python .

It is also possible to implement your own front ends for some cad programmes . So you could have a screen with simple data entry boxes and pull down option lists which when activated generates a finished drawing of a required component or assembly .

(2) You may find this interesting : NURBS

 

[DrGreg]

Would you create the image in a different software (like what? Matlab?), store the image and then import it into Inkscape?

You can use MATLAB to plot a graph and then export the figure to SVG format. You can then edit using Inkscape if you want to.

I believe recent versions of MATLAB have SVG support built in. If you have an older version, there's a free script plot2svg that can perform the export.

 

[DavidSnider]

You'll also notice that vector images are usually much smaller than bitmaps.

If I draw a 1024x768 red circle the uncompressed bitmap format will be something like 1024*768*32 bits or 3.14 megabytes because for bitmaps every single pixel has to be encoded with a color.

Now, the equivalent vector representation will be something like 32 bits (width) + 32 bits (height) + 32 bits (radius) + 32bits (origin) + 32bits (color) or 20 bytes. (This could further be compressed to just the radius and color, but most vector formats will assume there is more than one object being represented on a canvas of some sort)

You can think of vector images as a form of compression. At some point this information gets decompressed into actual pixels.

Now try converting a photograph into a vector format -- you'll notice that either one of two things will happen: The quality will become very bad or the file size will become very large. Only certain types of data are well represented by this format.

Look at 3D Models: The object geometry is usually in vector format, but the textures are usually in some sort of compressed bitmap format.

 

[sysprog]

To me it's exciting and rewarding, even if at times laborious, to continue to learn and grow with SVG technology.

http://goinkscape.com/using-perspective-for-3d-in-inkscape/
https://inkscapetutorials.org/2015/...xport-to-create-inkscape-editable-3d-lineart/
http://libriegraphicsworld.org/blog/entry/drawing-3d-objects-in-inkscape

What if I had an equation that, given a range of values, plots a well defined pattern? Is it possible to have Inkscape draw an image from an input equation? If not, how would you proceed? Would you create the image in a different software (like what? Matlab?), store the image and then import it into Inkscape?
Thanks!

There's plenty of discussion out there on related topics -- for example:
https://www.johndcook.com/blog/2009/12/21/function-plots-inkscape/

http://wiki.inkscape.org/wiki/index.php/LaTeX

Hope you enjoy finding out more of what you can do.

 

[Jamison Lahman]

A vector image is formed by primitives that are points, lines, curves and polygons. But why vector images don't suffer distortions when we enlarge them? Scaling is a transformation. How is information manipulated and stored in a vector image?

When we draw a line in microsoft Paint we are actually coloring a series of pixels in a grid. What are we coloring when we draw a line in a vector graphics program?

Thanks!

I personally think of them as math functions. Say there is a black diagonal line. The color is saved the same as a raster pixel. The shape of the curve is then saved as y=x. The shape of the graph of y=x is the same whether the domain is [-5,5] or [-20,20]. It's a principle similar to that.