Vector graphics refers to images that are made up of lines and shapes rather than a collection of pixels (referred to as raster graphics). Whilst these images can be slower to load, they're excellent for drawing perfect images at any scale. As computer screens and smart phones have continued to increase their pixel density, measured in Dots Per Inch (DPI), it has become more difficult to produce raster graphics that look good on all devices. Platforms such as iOS have historically approached this by requiring multiple files of the same content at different resolutions—such as Icon.png, [email protected], and [email protected] (which could be, for example, 60 x 60, 120 x 120, or 180 x 180 pixels, respectively)—so that the closest match image for the screen can be used. With a vector icon, you would provide a single image, Icon.svg (Scalable Vector Graphics), that can be drawn at exactly the resolution required for a sharp image.
The Fyne toolkit uses vector graphics throughout so that applications built using it can scale appropriately for any computer screen. When an application starts, it calculates the pixel density (DPI) of the current screen and sets an appropriate scale for the application. Additionally, when a Fyne window is moved to a screen with a different resolution, the content (and window containing it) will re-size accordingly. This means that when an application running on a laptop (typically, a high-resolution screen) moves to an external monitor (usually a lower resolution), the window will be resized to a smaller number of pixels to try and maintain a consistent size for the user. If you wish to override the scale that's auto detected, then it is possible to set a FYNE_SCALE environment variable before launching the application.
An example of setting scale values—notice the crisp text and icons:
In some situations, it may be appropriate to use a raster image instead of a vector. This is usually helpful if you want to draw exactly as many pixels as are visible in the space available. An example of this may be found in image manipulation programs or when drawing the result of a complex calculation. For these situations, there is a type of image within the Fyne API (created with canvas.NewRaster()) that provides this functionality. One of the examples provided by Fyne is a fractal viewer, where each pixel is calculated and drawn using the raster image feature:
