Making an attractive website is important when you’re trying to gain attention on the internet. An eye-catching website helps in getting more people to notice it and get their attention. A big part of designing the website is using images. Images add character and also help in getting a message across. When adding images to a website, there are two types of images used- raster images and vector images.
A raster image is a photo formed by pixels and has a defined resolution. It doesn’t work well when it is scaled up and loses its quality, which makes the image look grainy. A vector image is an image formed by points, lines, and shapes. It holds up even when scaled up and doesn’t lose its quality when sized up or down. Images need to be used in different ways depending on the purpose, so you may have to use them in various dimensions for various screen sizes. SVGs allow you to adapt to resolutions easily.
What is an SVG?
Scalable Vector Graphics (SVG) is a file format that can be displayed on a website. This vector graphic is based on extensive markup language for the Web. The benefit offered by the usage of an SVG is that you can control the image however you want to without losing the quality of the image. You can size it up or down and still have good quality graphics. If you are designing a responsive webpage, SVGs are the right kind of graphics.
Let’s say you want to use a butterfly SVG on your website. There are a few things you can do here; either create it yourself using XML, or you can search for butterfly SVGs online for sale so you can buy it and use it for your website. Some websites also offer SVGs for free.
Benefits of using SVGs:
● Scalable: A huge benefit of SVG is that they are not resolution-dependent. This means that, unlike a JPG or PNG, SVGs can have good quality graphics in any resolution.
● File size: SVGs are usually smaller size files when optimized. If you are using SVGs on your website, it helps your images load faster due to the small file size.
● Customization: SVG files are unique in terms of editing. SVGs can be edited in editing programs like Illustrator and can also be edited in a text editor where you can adjust the markup directly. They are dynamic when it comes to editing options.
● Freedom of style: Another benefit of using inline SVG is that it allows you to control the styles in your image. You can use an editing program compatible with SVGs to change the vector shapes, colours, text and add visual effects like colour gradients and shadow.