The logo of your website is (obviously) very important. It makes sense to use a good logo.
The impact of SVGs on the web is increasing day by day. And it has all the reasons to be so. Crystal-clear vector images bring the visual appeal to a totally new level. Once you get the taste of SVGs, you just can't live without it !
The best part of SVG is that is that it brings high quality at a small file size. You cannot even argue that it would take more time to load a SVG as compared to a normal image.
Why Use SVG Logos ?
- SVG format will ensure that your logo looks sharp
A logo on website is supposed to be small in size (width / height). When you try to export a JPEG/PNG at small sizes, quality detoriates. There is no way you can stop this.
A SVG does not suffer from this problem. As an example compare the below logos - the left one is a maximum quality JPEG, right one is an SVG :
- SVGs are light in file size
The JPEG logo on the left is 9.6 Kb in size, while the SVG logo on the right is just 3.1 Kb.
- An SVG logo can handle responsiveness easily
You might want to change the size of your logo at various screen sizes. In the case of JPEG/PNG, you will have to use multiple logo images, of different sizes. Or if you use only a single image and change the CSS width of the image for different screen sizes, the logo will look blurred.
There is no such problem in SVG. Just use a single SVG image, and change the CSS width of the <img> element accordingly to the screen size. There will be no loss in quality anywhere.
For example look at the same SVG image as above, but resized to 500px in width using CSS :
How to use SVG Images in HTML
Using SVG images works in the same way as a normal image.
<img src="logo.svg" id="logo" />#logo {
width: 250px;
}
/* Handling responsiveness with CSS media queries */
@media screen and (min-width:320px) and (max-width:1023px) {
#logo {
width: 450px;
}
}
Converting a Logo to SVG
Converting a JPEG/PNG image to a SVG is not very simple scenaio.
There is a Image Trace feature in Adobe Illustrator that can do vector tracing, but the quality of the output vector will depend on the detailing of the original image. If the original image is composed of simple figures and lines, you can get an exact vector output. But in a detailed logo, it will depend.
There are also online converters available, but the quality of the final SVG will depend. Basically there is no guarantee that a software will convert an image to a vector one with 100% success. It will probably need the final touches of a human hand.
In such a case, Fiverr is a good place to hire a freelancer. There are numerous freelancers on Fiverr who can do vector tracing for as low as $5.
Alexdon on Fiverr seems to be pretty good at converting a logo to vector. He has over 10,000 positive reviews and charges $5.