An SVG file (Scalable Vector Graphic) is a graphic image that can be enlarged and reduced indefinitely without loss of quality.
This is because the image is made up of vectors instead of pixels. Vectors are paths that consist of a beginning and an end point with in between a line, wave, circle or other shape. The image below shows the difference between a pixel file (left) and an SVG file (right).
If an SVG is enlarged then the distance between the paths is recalculated and then adjusted to the correct ratio. Finally, the paths are filled again with the corresponding colors. In this way an SVG file can be infinitely enlarged without reducing the quality of the image.
Counterpart of SVG file: pixel file
A pixel file (such as a JPG or PNG) is the counterpart of an SVG. The main difference between the two is that a pixel file becomes blocky when enlarged, while an SVG file can be enlarged indefinitely without loss of quality. Many files you find on the internet are pixel files. And therefore (often) not suitable for printing.
What to use SVG for?
SVG files are mainly used on websites. For example, to display logos, icons, simple graphics and animations.
This choice is often made because:
- An SVG is the only vector file format that can be used on websites. Other vector files, such as an EPS, AI or PDF, are not suitable for this purpose.
- The file size of a SVG file is often small. This keeps your site fast.
I have an SVG, but it is still not sharp, how is this possible?
This is because it is actually a pixel file, which is saved as an SVG. In this way only the file type changes (from PNG to SVG for example). The most important thing does not change; the structure of the file. This remains in pixels instead of vectors.
The solution is simple: the pixels in the file must be converted to vectors. Don’t feel like doing this yourself? We can help you with this.
