A Simple Guide To Understanding SVG

December 4, 2023

Images used on the web are split into two types – Vector or Raster. Both have benefits and drawbacks. Let’s look at how each type of image work and when to use them.

Quick Overview

Difference between Vector and Raster images.

Vector Image Character v1

Vector Images

Vector uses paths, lines, and text to create an image. Vector images only make up a smaller portion of the web.

Vector File Types

.svg (Scalable Vector Graphic)

.eps (Encapsulated PostScript)

.ai (Adobe Illustrator)

tamara bellis small v1

Raster Images

Raster images create detailed images using pixels. Most of the images you find on the web are Raster images.

Raster File Types

.tiff (Tagged Image File Format)

.jpg (Joint Photographics Expert Group)

.png (Portable Network Graphic)

.gif (Graphics Interchange Format)

SVG Explained

SVG (Scalable Vector Graphics) is a file type that allows graphics to be created and used on web pages.

SVG is written in XML language and it describes paths, lines, and text to create an image. This makes SVG images look great on small screens (mobile phones) or large high-resolution screens (4K, 5K, 8K monitors, televisions, etc).

Small or Large Vector v1

As indicated in its name, SVG (Scalable Vector Graphics) is a Vector file type and it is one of many vector file types.

Vector File Types

Here are some of the Vector file types commonly used.

.svg (Scalable Vector Graphic)

.eps (Encapsulated PostScript)

.ai (Adobe Illustrator)

Vector vs Raster

While SVG is a Vector file type that uses paths and lines to create an image, Raster images create detailed images using pixels.

A pixel is the smallest unit on a screen. Raster images are created by putting together thousands of pixels to create a larger image.

Raster Image Comparison v2

The issue with raster images is that they have a fixed dimension (example: 4000px by 3000px). Which means you can make them smaller and maintain sharpness and clarity.

However, if you make the image larger, it will lose details and appear fuzzy. This is often referred to as a pixelated image.

When To Use Vector & Raster

While most of the images featured on websites are Raster images, both Vector and Raster images have their place. Let’s take a closer look at when to use Vector and Raster images.

Vector Images

The best use of Vector images is in the following applications.


While illustrations can be either raster or vector, it’s preferred to be in vector format for scalability.


Allows it to be viewed sharp on all screen sizes and resolutions.


Fonts must be scalable on all screen sizes and resolutions.

Raster Images

These are some of the common uses of Raster images.


Images that come out of your phones and cameras are all raster images.

Print Materials

Images used for print material such as magazines, postcards, catalogues, etc tend to be raster images.

Short Moving Pictures

GIF files consist of images strung together to create a short looping video.

Software to Create SVG

Adobe Illustrator is the industry standard for creating and working with vector images. Unfortunately, this software has a steep price point of $19.99/month and might not be worth it for some people who work with software occasionally.

Affinity Designer logo

I personally use Affinity Designer 2 for creating all of the illustrations. I made a one-time payment of $56.99 and all I can say is that it’s an incredible software.

If you are looking to get started with this software, check out the Quick Start tutorial by Kezz Bracey. She does an EXCEPTIONAL job going through step-by-step key functions of the software and how to use it.

Vectornator Logo v2

Alternatively, Vectornator is a free software which offers many premium features. It’s an intuitive vector graphic design software with all the key functionalities of premium software.

Converting Image Types

You can easily convert a Vector image into a Raster image (pixels). It’s simple as opening the SVG file using vector software and exporting it as a JPG or PNG.

Vector To Raster v3

However, converting a Raster image to Vector is more challenging. The process of converting Raster to Vector is called vectorization and it can take more time.

If the Raster image is fairly simple and you are looking to

Raster To Vector v1

Photography images cannot be converted into vector images that would be an accurate representation of the original image.

Simpler images such as 2D can be converted into vector images using tools like Photoshop.

Using SVG With WordPress

WordPress by default doesn’t offer support for SVG images, but there are a couple of ways to use them on your site.

SVG Support Plugin

A plugin like SVG Support needs to be installed which allows the safe uploading of SVG files to your media library and using them like any other image.

Featured Image SVG v1

Use HTML Code

Doodle Line Icons or more popular sites like Bootstrap Icons allow for the HTML code of the icon to be copied.

Download or HTML v1

Once the code has been copied, insert a new Headline block in your post/page. This allows for HTML code to be placed and size, colour, and background can be adjusted accordingly.

Icon Displayed v1

Want To Learn More?

Here are some other resources if you are looking to learn more about SVG.

A 40-part series on everything you would want to know about SVG including how to use SVG files to animate it.

A technical tutorial on SVGs and how they look under the surface. They will go through the source code of a few SVGs to cover the foundations.

A detailed breakdown of the difference between raster images and vector images.


Designer, photographer, and all-around tech enthusiast.

He enjoys sharing what he learns with others and you can find him creating helpful resources, articles, and how-to guides for Doodle House.
Doodle House - Logo-v4
We create illustrations, icons, photos, and other digital resources to help you make something awesome!
Doodle Line Icons
Free SVG icons that you can download directly.
© 2023 Doodle House. All rights reserved.