How vector graphics (SVG) improve the appearance and speed of your utility website
Incorporating graphics into your web site is an important part of the online identity for your utility organization. It helps make the website more powerful visually, as well as creates a more humanized web experience by allowing visitors to quickly recognize and identify information.
There is an emerging trend amongst web designers using SVG files (scalable vector graphic) for icons instead of JPGs, PNGs or vectors, and there is a good reason why. While a raster image (photograph) made up of pixels has a set resolution, it tends to lose quality when scaled up. On the other hand, a vector is made up of points, shapes, and lines and scales up better, but ultimately is limited by the amount of detail it represents. These are both important reasons why web designers are more frequently using SVGs. A SVG offers the same benefits of a vector file but uses shapes, numbers and coordinates rather than pixels, making it resolution independent and infinitely scalable without sacrificing quality, no matter a screens size. Therefore, it is an excellent choice for accessible web design.
Some benefits of using SVG files are their unique ability to be easily edited in graphic design programs, such as Adobe Illustrator or Sketch, which then can be exported as an SVG. Or you can directly adjust the styles and properties such as fill color, stroke color, sizing, and more with JavaScript, DOM, HTML, and CSS. This is incredibly handy if you are wanting to add hover effects to an image it can help reduce the amount of service requests and saves on bandwidth instead of creating an image sprite, which is a collection of images put into a single image.
Another great benefit of using SVGs is a smaller file size compared to other file types. This is a bonus when dealing with higher resolution screens, as you don’t have to pre-create larger sized images like you do if using raster images. By eliminating the HTTP to load an image file onto your site, it will result in faster load times for pages and the site overall, therefore improving a visitor’s user experience.
After everything I’ve said, you might find yourself thinking “I can use SVGs for everything!!” However, that is not the case for photos and videos. JPG and PNG formats are recommended for photos, and MP4 and WEBM are best for browser compatibility. Anything else such as graphic icons, logos, or illustrations would be best utilizing the SVG format.
In conclusion, SVGs are a fast and high-quality option that proves to be beneficial when considering vector-based images for your graphic icons, or if you are looking for ways to help improve your sites speed.
Just another friendly tip from your trusted web experts.
