Raster and Vector graphic – differences

April 18th, 2018 / Graphics Basics

Computer graphics are divided into vector and raster graphics. In this post I will try to capture the basic differences and examples of the use of both types. It’s good to get to know each of them and be aware of the possibilities and limitations they have.

Vector – features

Scaling vector graphics is done without losing information (images are not pixelated) – this is because a vector drawing is really a set of information about objects, lines, curves, etc. located in a mathematically defined coordinate system. Another name is object graphics, from objects saved in this system. It sounds complicated, but it is not, because all the calculations of these coordinates are answered by the program. The drawings scale great. The only drawback is the weight of files when we add too many gradients in them – tonal transitions, effects, etc.

Vector images have smaller photorealism than raster graphics. It is an ideal type of graphics for the preparation of logotype designs and prints that are to be scaled from very small to huge sizes. It works great when you want to get a specific vector look – smooth transitions, clean lines. Using tracing, i.e. transforming, for example, photos into a vector (remember that it consumes RAM – the computer’s memory), we will get interesting photorealistic effects. You can also convert into a vector, for example, watercolor stains and with their help create among others pictures resembling those painted with water paints. When it comes to graphics, and not only vector, it’s only our imagination that limits us. Finally, the work can be exported as a raster graphic, eg after rescaling to the desired size.

vector graphic view

Vector file formats
  • EPS: (Encapsulated PostScript) – Adobe programs,
  • SVG: (Scalable Vector Graphics) – standard W3C format, best suited for use on websites,
  • PDF: (Portable Document Format) – exported from a graphics processing program, it retains all information about vector graphics and is suitable for reprocessing,
  • AI: native Adobe Illustrator format (Adobe Illustrator Artwork),
  • DXF: (Drawing eXchange Format) It comes from the Autodesk CAD program – I did not use it, because I do not use this program, it is useful for more architects.
Sample programs for processing vector graphics:

I use both paid and free options, and both work very well for me. At the beginning I recommend Inkcsape, because with a limited budget it will work great.

In both programs, in addition to the basic shapes and tools typical of all graphics programs, we can use Bézier curves, which are typical for vector graphics (although they can also be used as a selection tool in raster graphics processing programs). The curves are a river theme, so I will not discuss technical issues. For us, the most important is that with their help you can create all shapes very precisely and quickly. Many people (including me) had a problem with getting used to the tool at first, however, after getting familiar with it, it turns out to be very useful.

bezier curve sample

Raster

Similarly, raster graphics perfectly reproduce reality, have smooth gradient transitions, but unfortunately poor scaling. Rasters are also simply photos. If we need a big image, we must have a high resolution file (a large number of dots, pixels). If we are to scale a low resolution image / photo, the program will simplify the details, and if it can not do it well, we will achieve high granularity and thus poor quality of the final effect.

In Photoshop in the Creative Cloud version (I do not know how with older ones) you can compact the number of pixels which gives quite decent results. In practice, however, it is best to work on a good image. There is nothing worse than to get a raster version of the logo from the customer, which should be placed, for example, on a billboard.

In raster image processing programs we have many possibilities, such as: photo retouching and correction (eg cutting – selection tools, photo montages, healing spot, red eye reduction, color changes, contrast, etc.). We can also paint (so-called Digital Painting) with the help of these programs. It is impossible to save the finished raster file in a vector format, but you can – as I wrote above – use tracing (transformation) in a vector program.

vectorization process

Raster file formats:
  • JPEG / JPG – (Joint Photographers’ Expert Group) one of the most commonly used formats – compression (reduction in size in KB) is quite large, which results in a greater loss of quality of the saved file than eg in PNG,
  • PNG – (Portable Network Graphics) the best file format when it comes to the lack of quality loss. however, these files are slightly larger than JPG,
  • BMP – Bitmap (BitMaP) is a quite large file, I personally never use it.

Sample programs for working with rasters:

Photoshop – the flagship product of Adobe. When it comes to photo processing, it’s second to none. It also very well supports digital painting, but it is not its main purpose – it does not have the function of smoothing the line. A special graphics tablet will be useful because the lines drawn with the mouse may be slightly unstable. In addition, it is paid software, which is why not everyone will decide.

Free alternatives to Adobe Photoshop

GIMP – The GNU program is decent when it comes to image processing – it’s definitely enough to start with, you can also create graphics or images. Its suitability in digital painting is, in my opinion, not the best.

Medibang and Fire Alpaca – two products from one manufacturer. The first was enriched with online functions. Both equipped with smoothing of the drawn line. It is not useful to work with photos. I will write a separate article about the Medibang program from the “Budget Graphic” series.

Paint – quoting Wikipedia: a free raster graphics processing program created by Washington State University students under the supervision of Microsoft – is useful for quick and uncomplicated fixes. It is relatively easy to use and starts up quickly. It is useful when sometimes it is only necessary to move something. Paint 3D, which was to replace it on computers with the latest Windows, I have not had the opportunity to use.

Find your favorite, work efficiently

I regularly use the above programs and I’m really happy with them. They have an intuitive interface and it’s easy to get to them – with the help of numerous tutorials that we can find on the web.From other free options, we have a choice of Krita and Pinta, but in my case I did not have any sympathy for any of them. If you have different feelings, let me know in the comment below this post.

Each program as well as the type of graphics have their pros and cons, and the choice of a particular solution depends on the purpose and the effect we want to achieve.

As I wrote above, only our imagination limits us. Personally, I am a supporter of testing different methods, because it stimulates creativity, allows you to leave the comfort zone and find your own path. Especially that some programs are free and we do not have to stress that they will burden our budget.