7. Vector graphics

Idea

In a simple raster image, created, for example, using Paint, everything is saved in it in a graphical way, e.g. as colours of subsequent pixels. Therefore, if you would like to modify anything, e.g. text, colour of an arrow, anything, you will need to create again at least a whole fragment of your image.

Therefore, usually it is better to use vector graphics. Here all objects are saved as objects and can be easily modified afterwards. We will use Libre Office Draw — one of the simplest applications for vector images.

Styles

Similarly as in the text processor we can use styles. Using toolbar create a circle (hold shift while drawing an elipse). Open a stylelist (F11) and create a new style. Name it My object. In Line tab set orange colour and dotted thick line. In the Area tab I choose yellow colour. In the Font effects tab choose red colour. Now I can set this style for my circle.

In the circle using the toolbar we add a text “circle”.

Now we can add further objects, e.g. a star and also set its style to the created style.

Texts

I can also add also self standing text-fields and set styles for them. Add text “Test image” and set style Title for it. Modify this style and set bold font and red colour.

Arrows and lines

Easily, I can add an arrow connecting objects (it is convenient to use a connector) and create a style “My arrow”. I decide that objects in this styles will have blue lines ending with arrows with no fill and size of 2cm. I set this style to my connector-arrow.

External images

Obviously, we can also use an external image. Click Insert->Image, to insert an image.

Saving and exporting

An Libre Draw image is saved in the .odg format — and this is the editable form. We need this file to change our image in the future.

If I would like to use this image, e.g. on my web page, I have to generate raster image. To achieve this click File->Export and choose a corresponding format, e.g. .png.

For ambitious — Inkscape

Inkscape is yet another application for vector graphics, which offers much more features and is free and can be downloaded. You can have a try and see how many things can be done in this application.

Assignment

Create using LibreDraw an image depicting your (simplified) curriculum vitae using a block diagram.

To achieve this:

  • Define and use at least one style of a block element.
  • Define and use at leat one style of a line or arrow connecting objects.
  • Define and use style Title.
  • Insert at least one external image.
  • Source file should be sent me by e-mail.
  • Export your image to an .png and use it in the previously created web page.