From Test-Scratch-Wiki
- "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 [citation needed] 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 nicer but tend to 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 Scratch 1.4, 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. You 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. |
Spline-Based Shapes
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 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.