(Redirected from Vector)

SandCastleIcon.png This article has links to websites or programs outside of Scratch and Wikipedia. Remember to stay safe while using the internet, as we cannot guarantee the safety of other websites.

Wikipedia-logo.svg  For more information, see Vector Graphics on Wikipedia.

"Vector" redirects here. For an article on mathematical vectors, see Using Vectors.
An example of Vector Graphics in Scratch 3.0.

Vector graphics are graphics stored and drawn using a sequence of instructions that display geometric shapes, rather than grids of pixels like Raster Graphics. This results in very precise images with very high and theoretically infinite resolution. They are most commonly stored in the SVG file format which uses XML as its base, just like HTML. The styling (fill, stroke, opacity, ...) is done with CSS. SVGs can also use JavaScript, but Scratch does not support it. That means SVG files can be viewed in a web browser without need of tons of extra code because code can be shared between functions.

SVG also supports more features than Scratch shows, including shadows, opacity, color filters and text styling.

In the Scratch 3.0 costume editor, the default editor is Vector, unlike Scratch 2.0 which used Bitmap as its default editor. Both Scratch 2.0 and 3.0 use the SVG file format for vector graphics.

Advantages of Vector Graphics

Vector graphics are inherently much more precise than Raster Graphics, which helps make drawings look much smoother. Additionally, because shapes which make up Vector graphics are defined from control points, they can easily be precisely modified without needing to modify the color of potentially hundreds of pixels (as is the case with Raster Graphics). Objects can also be individually transformed, so an element (or multiple elements when grouped together) can easily be stretched and rotated separately from the rest of the image.

A major disadvantage of vector graphics is that photographs taken in real life cannot be automatically converted to a vector format, and requires the photograph to be manually re-created. As such, high-resolution raster images are usually much more suited for photographs.

Why Vector Graphics Appear Smoother

Even though they are being displayed on a screen of the same resolution and pixel density, vector graphics can look much smoother than bitmap. This is because raster image files are made from a grid of pixels which have a set resolution, while vector images only says what shapes the program should draw. While the shapes which make up a vector file can only be displayed at so much precision, they can be rendered at a higher resolution when zoomed in. Scratch smooths the edges of vector files so they look better on low resolution screens. This is not the case for bitmap, but most software does do this.

Note Note: Some bitmap paint editors 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 creation and manipulation of 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 and Scratch 3.0 supports the use of vector graphics, with the inclusion of a built-in vector image editor in which one can create and edit vector images.

Tips for Using the Vector Editor

Vector art can be quite simple after learning the basics. To start, the user must set the editor to vector mode, which is usually not needed because in 3.0 the default editor is the Vector editor. 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, to make a door, one 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.

Other Vector Editors

There are several other vector editors besides the Paint Editor. Some Scratchers use them because they offer more options such as opacity or precise positioning. One of them is Inkscape, a free and open-source vector editor which includes many features. There is also Adobe Illustrator, which is a paid editor used by some Scratchers.

See Also

Cookies help us deliver our services. By using our services, you agree to our use of cookies.