- "Vector" redirects here. For the article on vectors, see Using Vectors.
Vector graphics are graphics stored and drawn with instructions rather than grids of pixels. This not only results in very high and theoretically infinite resolution images, but it also reduces the file size dramatically. They are commonly stored in the SVG file format which resembles XML. You can view SVG files in your web browser, and SVGs are used in Adobe Flash.
Those graphics are commonly miscalled simple graphics due to the lack of effects which are only able to be used in regular bitmap images (blur, shadows...) and the inability of taking photos in vector format.
Advantages of Vector Graphics
The vector graphics make drawings look much smoother but can be more difficult to draw. Vector graphics use splines (mathematical curve) through a set of control points instead of pen marks on a region. The control points can be dragged later on to modify a shape, so getting a complex organic shape to look perfect is simpler. Objects can be manipulated individually, too, so one can stretch and rotate one element separately (or group multiple elements to do these; operations collectively). Vector graphics also have greater clarity and resolution, and usually, have smaller file sizes.
Why Vector Graphics Appear Smoother
Even though they're being displayed on a screen of the same resolution and pixel density, vector graphics look much smoother than bitmap. Why is this? It's because in vector the edges of lines and objects gradually become more transparent, fading into the background or layer behind. For example, if one draws a black circle on a white background in bitmap, the edges will look very bumpy. However, in vector, they appear smooth because the edges of the circle fade out into the white background, or in this case gradually become lighter colored. One can visualize close up the difference in a vector and bitmap circle by doing the following steps:
- Draw a circle in the vector paint editor
- Right-click on the costume logo in the pane
- Save the costume to a local file
- Open up a bitmap paint editor outside of Scratch (ex. MS Paint)
- Import the circle into it
- Draw a circle in bitmap
- Zoom in to view the difference
|Note:||Some bitmap paint editors, like the Scratch 2.0 one, create figures that look almost as smooth as vector graphics; however, when zoomed in they will not stay smooth looking but pixelated.|
Splines are mathematical curves through a set of control points. The paint editor is highly dependent on a spline tool, which allows you to create and modify splines. This allows for smoother drawing and easier editing, but disallows bitmap editing capabilities. There is an option to convert to bitmap.
Use in Scratch
Scratch 2.0 is the first Scratch update that currently supports the use of vector graphics, and it even has its own custom vector image editor in which one can create and edit vector images. In addition, the user interface itself is comprised of vectors.
Tips For Using The Vector Editor
Vector art can be quite simple after you get the hang of it. To start, the user must set the editor to vector mode. It is best to start with an outline and fill it in later. The user can create a simple shape, such as a circle or a square, and use the reshape tool. The user can then move around the different points to create the shape they desire, and fill it in with the color they want using the fill tool. For example, if you wanted to make a door, you could make a black rectangular outline, and fill it with brown.
After these steps are completed, the user may add in smaller shapes using the same method for details, and layer them with the layering tools.
- Paint Editor
- Raster Graphics
- Raster graphics on Wikipedia
- Vector Graphics on Wikipedia
- Video Tutorials/Transcriptions/Erasing in Vector Mode