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 the article on vectors, see Using Vectors.
An example of Vector Graphics in Scratch 3.0.

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 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.

Vector graphics are commonly miscalled simple graphics[citation needed] due to the inability of taking photos in vector format.

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

Advantages of Vector Graphics

Vector graphics make drawings look much smoother. Vector graphics use splines (mathematical curves) 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.

The only major disadvantage of vector graphics is that it is hard to convert photographs to splines. While a Vector Image can have bitmap elements, it is inefficient. A high-resolution bitmap image might be better suited for this.

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 vector says what shapes the program should draw instead of pixels. Vector files do have resolution. The control points on the shapes can only have so much precision, but when zoomed in a lot it can use math to make very high resolution shapes. Scratch smooths the edges of vector files so they look better on low resolution screens. It does not for bitmap, but most software does do that.

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 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 vector graphics.

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 thay offer more options such as opacity or exact positioning. One of them is Inkscape, which is free and has many features. There is also Adobe Illustrator, which is paid and some Scratchers use it.

See Also

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