Your website includes lots of photos including ones for products, collections and icons, just like other sites, most of them are PNG or JPEG image formats. But you found that the more PNG or JPEG images are uploaded, the more slowly your website loads. If it's your case, it's time to think of image optimization for some image types like icons with SVG format.
Compared with PNG and JPEG, SVG files have the advantages to increase your loading speed while still keeping the high resolution of the images. Let's find out the best things about SVG files and why you should utilize them to increase your website's performance through this article.
On this page
What SVG file is
Unlike other popular image files such as PNG or JPEG, SVG (Scalable Vector Graphics) is a vector-based image format and can be scalable smaller or bigger without losing quality. To understand SVG files, maybe we will compare their characteristics with the widely used format PNG.
| SVG | PNG | |
|---|---|---|
| File type | Vector-based | Raster-based (or pixel-based) |
| File size | Far smaller than PNG | Large with high-res |
| How it works | Use XML programming language to communicate with the web browser or applications to display an image | Undergo the filtering, encoding and lossless compression process to display the compressed image as identically as the source image |
| Best used for | Website design, logo, icon | Photographs, editing, and logo |
Why you need to use the SVG files
SVG format has many outstanding advantages which turns it into the best choice for website and application design.
-
Unlimited scalability
Due to using vectors, SVG images are resolution-independent and scalable at any dimension without being quality-affected. Based on the mathematical algorithm to create the image, the web browser will read and display it on the screen. Just a small code and can adapt to various viewers such as display windows, devices, responsive designs, etc., SVG format is easier for your images to appear full-rendered on screen without quality loss.
This feature makes SVG superior to raster-based file types such as PNG or JPEG. As for raster images, the image information is stored in a grid of pixels. So, when we enlarge the image, each pixel has to expand beyond its original size and it causes the quality to decrease.
-
Easy customization
SVG files give lots of control for web designers to make modifications such as vector shapes, texts, colors with some popular design software such as Adobe Illustrator or CorelDraw, etc. The image file is edited in just a few minutes.
-
Small size
As mentioned, an SVG file is much lighter than a raster image and more than that, you don't have to trade off between the small size and image quality. The smaller images are, the faster your website loads. So, SVGs can improve your website loading speed overall.
-
SEO friendly
As SVG format is defined based on text, the search engine can read, crawl and index the images more quickly and easily. So, you can improve your page rank and search engine optimization. SVGs outweigh PNGs or JPEGs in this respect because search engines only recognize raster images according to their metadata such as title, keywords or ALT tag.
Now, most website theme providers want to prioritize factors such as speedy load, high-res images and high rank on search engines. Especially, some Shopify themes like Be Yours, will designate some sections or blocks where only SVGs are accepted. So it is recommended to choose SVGs over PNGs or JPEGs in this case.
Usage of SVG in Be Yours theme
A SVG file can be created by yourself with some common graphic design apps like Adobe Photoshop or Adobe Illustrator as per instructions in this article.
If it is kind of complicated to create SVGs on your own, we have a SVG icon provider, Remixicon.com, to make your life easier. Remixicon.com has a huge SVG icon library for your choices and you can easily get any icon as you want in just two clicks:
- On Remixicon.com, type a keyword to search for the icon you want.
- Click on the icon from the list and choose the Copy SVG button.
-
Access the section/block of your theme where you want to add an SVG icon and paste the SVG image code in the relevant containing field.
For example, in Be Yours theme, you have the Guarantee section which allows you to add custom SVG in the field Custom SVG icon.
- Click Save to confirm your change.
Thanks for your reading time. We hope that you find this article useful. Follow us today on Facebook, Twitter and website blog to get our latest updates!