What is SVG?
You’re surely familiar with the image formats JPEG, GIF and PNG. But do you know about SVG? SVG stands for scalable vector graphics. Unlike some of the other more common image types that are defined by pixels, SVG files are vector based using XML syntax. They display perfectly no matter what resolution they’re being viewed at, which can make them an ideal image format for use on the web. However, there are also reasons you might want to think twice before using it.
How does it differ from PNG, JPEG?
PNG, JPEG and GIF are known as raster graphics. These graphic formats are pixel based. This means they’re composed by a grid of many colored boxes. For instance, if you have an image that is 5 pixels by 5 pixels, it means that it has 25 colored squares. This cannot be changed in any way. You can’t just go adding more colors to the squares. And you can’t add more detail to them or move them around.
If you decide to expand the image by more than 100%, the resulting effect will be pixelation and the image will appear blurred.
On the other hand, SVG images are vector images. So instead of consisting of colors, they consist of descriptions about your image. This description can be altered and changed to any size without affecting the quality of the image.
Why should I use SVG images?
You can display your SVG file at any size and the image won’t get pixelated. Even if you expand a small image and make it bigger, it’ll still maintain its sharpness and color… and maybe most importantly, not look blurred. This is because of the infinite amount of details that vector images can contain due to their vector shape.
Small image size
The image size of SVG files are smaller than that of other graphics, like JPEG or PNG files. So if you want dramatically smaller images, then choosing SVG images should easily help you achieve that.
For graphic images, the size of the file is influenced by the size of the resolution. But SVG image resolutions don’t change. Instead, it’s the number of details that are in the layer that matter, so the size of the file doesn’t increase as you increase the size of the image.
If you’re familiar with web development, you can even animate your SVG files. This is a great way to add life to your graphics and can also serve as an alternative to using flash on your website.
Best used on the web since SVG files are responsive
That means that the file will adjust in size according to the screen size, depending on whether it is being viewed from a desktop computer, tab or mobile phone.
Best used for complex illustrations
This includes when you are designing company logos, charts or graphs.
Can be easily formatted
What should I know before using SVG?
You should be aware that this image format shouldn’t be used to replace all image formats on your website. For instance, for images that require deep color, it’s probably better to stick with JPEG images.
Widely, but not completely supported
SVG files are widely recognized in most of the most common browsers. However, some older browsers, such as older versions of Internet Explorer, might not support this image format.
Know about possible security risks
This same tactic can be employed on a company’s website. SVG files can be infected and anyone who visits the site may also have their computer infected. By the time a company realizes the problem, the situation will likely have already gotten out of hand. This can seriously damage the credibility of your company.
The Facebook incident
Due to the susceptibility that such images have on social media sites, hackers used Facebook messenger to conduct a social media campaign to infect users with Locky ransomware.
When someone received an infected SVG file on messenger and clicked on it, their entire PC became infected with Locky Ransomware. The file contained Nemucod, which is a malware downloader in the form of SVG files.
Once you installed the extension, the hackers would then gain access to your Facebook account and secretly message all your friends with the same infected file. As Steve Ragan reported, Facebook claimed the problem was associated with Chrome extensions and that Locky wasn’t the problem… but others apparently verified Locky was in fact being delivered.
How to reduce risk
Be alert and proactive
One of the best ways that companies can safeguard their websites from infection is to always keep an eye on any graphical changes that are made on the website. Also checking the code used on the site regularly.
Get suitable antivirus
It might be better for to hold off on using SVG images on your site until you have an antivirus that is strong enough to detect when there is a problem on your site.
If you use social media sites (hopefully you are!), consider blocking SVG files if you don’t have controls in place to protect yourself from infected files. Also, try not to click on any SVG files that have been sent by one of your friends on social media.
How do I create SVG images?
In order to use SVG file format, you’ll need to have a good drawing program. There are many programs that can be found online or installed on your computer. If you have the budget and know-how, one traditional go to is Adobe Illustrator. You can also use Inkscape, which is a free open source program, to create SVG graphics. If neither of these seem like the right fit for you, Colorlib has a nice list of programs you can use here.
SVG files have many advantages that are drawing designers/developers into using them. But you should be aware of the possible risks and be able to prevent and detect them should they arise.
Have you already started using SVG images? Do you have any other tips to share with our readers regarding the use of them?
Would you like to see a post with tips on creating, using and editing SVG images?
If you’ve found this helpful, please share.