When it comes to adding imagery to your website, there are two basic image types to choose from: raster images and vector images.
A raster image—typically a photograph—is made up of pixels and has a set resolution. When scaled up, it will lose quality and can appear pixelated or grainy.
A vector image is created using points, lines, and shapes. You can scale vector images to any size without losing quality. Vectors images are limited in how much detail they can represent, so they are best used for elements like typography, logos, icons, or illustrations.
Scalable Vector Graphics (SVGs) are a format of vector graphic. This is a file comprised of a series of 2D points, connected by lines and curves to form shapes. This is as opposed to a format like JPG or PNG which are comprised of a fixed number of pixels.
SVG images are more like a mathematical formula than a grid of colored squares. Practically speaking, this limits SVGs to simpler shapes, like those you might find in a logo or an icon. What is lost in complexity is made up for in performance and scalability.
The benefit of this structure, as opposed to a grid of pixels, is that the resultant file size can be very small and the careful use of SVG can significantly lower the amount of data being loaded on our web pages.
This is great for performance, which is in turn great for the user experience, because it helps our websites rank well in search engines. This is why digital marketing needs to be tightly integrated with web design and web development.
BENEFITS OF SVG
One the major benefits of SVGs is that they are resolution-independent. This means that unlike file types such as JPG or PNG, SVGs retain the same quality no matter what screen resolution or size they are. So, on a retina display where a JPG might appear blurry if the file size is too small, an SVG will still look high-quality.
Using SVGs can result in smaller file sizes than other file types when optimized properly. This is helpful when dealing with higher resolution screens, since SVGs don’t need to be created at larger sizes to accommodate the difference like raster images do. If you are using SVG files on your website, smaller file sizes mean your images will load faster.
SVG files are unique in that they can be edited in graphic editing programs (such as Illustrator or Sketch) like other images, but also in a content management system text editor where the mark-up can be adjusted directly.
Using inline SVGs is beneficial to the performance of a website because it eliminates the HTTP request that needs to load in an image file. Since no file needs to download, this results in smaller loading times for a page, improving the user experience.
Another benefit of using the inline SVG method is that it allows you to control the styles within your image. You can control properties such as fill color, stroke color, sizing, and more through CSS. This is especially useful for adding hover effects to an image, eliminating the need for image sprites.
PRODUCING SVG IMAGES
SVG images can be produced by the use of a vector graphics editor, such as Inkscape, Adobe Illustrator, Adobe Animate, or CorelDRAW and rendered to common raster image formats such as PNG using the same software.
Software can be programmed to render SVG images by using a library such as librsvg used by GNOME since 2000 or Batik.
SVG images can also be rendered to any desired popular image format by using ImageMagick, a free command-line utility (which also uses librsvg under the hood).
With page loading times being a critical part of every website’s success, lightening the load of your pages using SVG images could make a difference.