June
26
0 likes
0 comments
0 shares

Using SVG Images on Your Site: The Good and Not so Great

Introduction to using SVG images on your website

Introduction to using SVG images on your website

 

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?

Thumbs up image for the benefits of using SVG images
 
No pixelation

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.

Animated graphics

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

You can easily format SVG images with HTML, CSS and JavaScript.

 

What should I know before using SVG?

Image for section on possible downsides to using SVG images

 

Be selective

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

Since it’s possible to embed content in this file type, for instance using JavaScript, there’s the possibility for hackers to infect SVG files with viruses. If someone opens the infected files on their computer, then their whole system can become infected. This could lead to all the files in your computer could being encrypted and the hacker will require that you pay them a ransom for them to decrypt your information (ransomware – see the Facebook incident below). Bleeping Computer’s Security News Editor, Catalin Cimpanu, explains this more in detail here.

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

Covering face - representing the SVG malware incident that happened on Facebook

 

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.

The hackers included malicious JavaScript code in the files, which was an external link. When clicked, it would redirect you to a website that looked like YouTube. Once you got to the site, a pop up would prompt you to install a certain extension on Google Chrome to view the video.

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.

 

Conclusion

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.

Share:

LEAVE A COMMENT


This site uses Akismet to reduce spam. Learn how your comment data is processed.