Maximize SEO with SVG Images: A Guide

In this article, we’ll look at using SVG files (Scalable Vector Graphics) on your website to improve page speed.

Article Contents:

• The Difference Between SVG to JPEG & PNG Files
• Decide Which Graphics To Change To SVG
• Difference in File Size – SVG vs. PNG
• How To Upload SVG Files to WordPress
• Security Risks Using SVG
• Software That Can Save or Convert Files to SVG
• Video Accompanying This Article

Search engines, including Google, use page load-speed as a major raking factor, they have done for a few years, this we know.

If you are running a website on WordPress or any other CMS, you want to reduce the load speed by reducing the page size, but without compromising the quality of the onscreen graphics.

What if there was a way to improve scalability of your images by using images that were a fraction of the file size? The answer is SVG.

The Difference Between SVG to JPEG & PNG Files

SVG is a vector-based format rather than a raster-based format.

• A PNG or JPEG file will be larger because it saves the image as a grid of pixels, and the file size will increase as the number of pixels increases.

• An SVG file, on the other hand, will be smaller because it saves the image as a set of mathematical equations that describe the shapes, paths, and fills of the image.

SVG files are scalable, which means they can be resized without losing quality or sharpness. Whereas PNG files will pixelate as you zoom in or scale up.

SVG files are generally smaller in file size than JPEGs or PNG’s.

In short, SVG is a piece of digital information that means – no matter how far you zoom in or out, it wont pixelate.

Here are 2 examples. The same image, created on a canvas of 350px X 350px.

Below we have stretched the images. You can zoom in on your browser to see the difference between them. The SVG will not pixelate when scaled up, whereas the PNG starts to loose sharpness and quality.

350 x 350

350 x 350 stretched

Example of PNG pixelating. — 350 x 350 PNG stretched – starting to pixelate.

What SVG Files Look Like To A Computer

What PNG Files Look Like To A Computer

PNG (raster images) is a grid of pixels.

Decide Which Graphics To Change To SVG

Some files on your website will benefit the site by switching to SVG, others are best left as PNG.

PNG is best used for graphics with many colours and complex details, such as photographs, while SVG is better for logos, icons, and illustrations with simple shapes and fewer colour shadings.

Leave As PNG

Photos
Complex Artwork
Graphics with Complex Colour Effects

Change To SVG

Logos
Icons
Banners
Background Shapes

What is the File Size Difference Between SVG & PNG

The answer to this is totally dependant on the actual file. In the attached video to this article, we compare an image with the dimesions of 1280px X 800px. The JPEG file size was around 60kb. The very same image saved as SVG was 12kb.

SVG file sizes all depend on the complexity of the image. A graphic design with a simple box layered on top of a background colour will be tiny, about 2kb. Whereas a more complex design with multiple shapes, colours and effects will increase the file size.

This is because SVG uses mathematical data to compile the image for display.

How To Upload SVG Files to WordPress

By default – WordPress (and other CMS (content management systems) do not allow you to upload SVG files. This is because of security.

There are though safe ways to upload SVG files to your WordPress site. The best practice is to use a plugin such as SVG Support or Safe SVG.

Once these plugins are activated, you will be able to upload SVG files within the media upload section alongside other graphic types.

What Are The Security Risks Using SVG On WordPress

SVG files can pose security risks if not handled properly. Some of the potential risks include:

Cross-Site Scripting (XSS): SVG files can contain malicious scripts that can steal sensitive information from visitors or take over their browser.
Code Injection: SVG files can contain malicious code that can be used to inject malware or malicious scripts into a website.
Denial of Service (DoS) attacks: SVG files can contain code that can overload a server, causing a website to crash or become unavailable.
Phishing attacks: Hackers with malicious intent can create fake login pages or phishing pages using SVG files and trick users into entering their sensitive information.

So Let’s Make Sure It’s Safe

If your website allows users to upload files for any reason, (for example while placing an order within WooCommerce) never allow users to upload SVG as a file type. It is important to only give the site administrator privileges to upload SVG files.

Both of the plugins that we mentioned above have an option within their settings to control this.

Software That Can Save or Convert Files to SVG

Here are some popular software applications for saving files as SVG in Windows, Mac & Linux.

Premium Software Packages

CorelDRAW
Adobe Illustrator
Affinity Designer
Adobe Photoshop (although Photoshop is a raster graphics software, it also has the ability to save files as SVG).

Free Software Packages

Improve Your Website Load Speed

Where to start, simply go through your website and decide which files will load quicker as SVG. Using the guides and instructions in this article, you may be quite surprised at the improvement in page speed once you have corrected the applicable files.

Further Benefits Of Using SVG Files On Your Website

Scalability: SVG files can be scaled to any size without losing quality, making them ideal for logos, icons, and other graphics that need to be resized frequently.
Small file size: SVG files tend to be smaller in file size compared to other image formats, which can help to reduce the loading time of a website and improve performance.
High quality: SVG files offer high-quality graphics that can be zoomed in on without pixelation, making them ideal for detailed illustrations and maps.
Accessibility: SVG files can be easily made accessible by adding alternative text descriptions, which is helpful for visually impaired users.
Search engine optimization (SEO): Using SVG files can help to reduce the size of a website, which can improve its overall performance and search engine ranking.
Animation: SVG files can be animated, adding an extra layer of interaction to a website.
Style control: SVG files can be styled using CSS, making it easy to change the look and feel of graphics and icons on a website.
Text-based: Because SVG files are text-based, they can be edited and optimized with text editors, making it easy to make changes and improve their performance.

Additional Technical Aspects Of Using SVG Files On Websites

When using SVG images on your website, we should always remember to keep the technical aspects in mind to ensure that the images are served and displayed optimally.

For example, to minimize file size and improve website performance, you should use an SVG optimization tool to reduce the size of the images without sacrificing quality.

Additionally, you should ensure that the images are served in a format that is compatible with all major browsers, such as converting them to a web-friendly format like PNG or JPG.

To ensure that the images scale smoothly and maintain quality, you should design them with vector-based graphics that can be resized without losing resolution.

7 Technical Tips On Optimizing SVG Images for Search Engines

Use descriptive file names: Give your SVG images descriptive and keyword-rich file names to help search engines understand what the images are about.
Optimize file size: Optimize the file size of your SVG images to reduce their load time and improve website performance. You can use tools such as SVGO or online compression tools to reduce the file size of your images.
Add alt tags: Add descriptive alt tags to your SVG images to provide additional information to search engines and assistive technologies.
Use CSS to control size and placement: Use CSS to control the size and placement of your SVG images, rather than hard-coding their dimensions in the HTML code. This will help to ensure that the images can scale smoothly and maintain their quality.
Serve images in a web-friendly format: Ensure that your SVG images are served in a web-friendly format that is compatible with all major browsers, such as PNG or JPG.
Use vector-based graphics: Design your SVG images using vector-based graphics, which can be resized without losing quality. This will help to ensure that the images are scalable and maintain their quality on all devices.
Minimize the use of scripts: Minimize the use of scripts within your SVG images, as they can slow down the loading time and affect website performance.