A prospective client came to me recently asking if we could create some vector images to be used on their website, specifically in the SVG format. They saw our Bugcrowd Badges V1, which were all created to be used as vectors on the company website. I thought this might be a good opportunity to discuss what they are, the benefits (and disadvantages) and what they can be used for.
So What Is An SVG?
The image format known as Scalable Vector Graphics or SVG has been around for a long time. It actually came around in the dotcom bubble, but it wasn’t until the past decade that most browsers started supporting them on the web (namely Internet Explorer). They’re a great tool to use in mobile responsiveness due to how they’re built – in vector.
Vectors are image files that are based off of formulas to display the intended graphic. Usually a vector is created using shapes, points, and lines. Each point, once connected, can create a custom shape that is scalable to be both incredibly small or absolutely massive. Imagine drawing a square: you draw a line from point to point, connecting each corner. After connecting them all, you’ve created a shape that can stretch and shrink without losing its quality.
More familiar to most people are raster files such as JPGs and PNGs. Rasters have a set amount of pixels and can not be scaled upwards without losing quality due to the addition of new pixels. Imagine a photograph that is enlarged until the quality of the image is compromised. This is a problem that vectors can solve, given the right image or design. For instance, you can’t properly create a photograph using vectors and keep it at a manageable file size, but you can create your logo in a vector format. Common formats are PDF, AI, EPS, and SVG.
The spaceship on the left is an SVG while the one on the right is a JPG. Since it is larger than it’s original resolution, it is pixelated.
Now, don’t assume if you save a JPG or PNG as PDF or SVG, it’ll automatically become a vector. Unfortunately, that isn’t how it works. Embedding raster images only further complicates the file and still doesn’t allow for proper scalability.
So back to SVGs. They are not only created via vectors, but the file format is built on an XML-based language. Essentially what that means is that the SVG can be written in HTML and CSS, allowing for you to create it without an image being uploaded, and be fully editable using code as well.
See the CodePen example below. It is all being rendered through HTML and CSS, none of it is from an uploaded image or actual text. Try hovering and clicking on the shapes to see the colors change. All of this is being done through code, not through changing images.
What are the benefits of an SVG file?
There are a few benefits to having work done as an SVG file (namely your logo). The same file can be used for both web and print (although the colors may be inaccurate, but that’s a blog post for another time). If you weren’t using an SVG, you’d need to have two separate logo files, one set up at a 72dpi resolution (web) and another set to 300dpi (print). Alternatively, you can also use the SVG file for website responsiveness between resolution sizes, including desktop and mobile devices. If you’re looking to use it simply as an image to scale along with your website, then great! But as shown earlier, you can take it one step further and change elements using HTML or CSS.
What are the downsides of using an SVG file?
When it comes using an SVG, size does matter. The more complicated the design, the larger the file is likely to be. If you are using a photo realistic image, such as one of a car or portrait, a JPG or PNG just makes sense. While some people can create some pretty photo realistic work in vector, it will take a lot of paths and rendering time to create it as an SVG.
The wolf on the left is full of custom shapes that are in some cases only slightly opaque. Even so, it is three times smaller in file size than the JPG on the right and is completely scalable.
Also keep in mind, older browsers do not support SVG the same way updated ones do. Luckily the further away we get from Internet Explorer, the better off we’ll all be. Some content management systems, like WordPress, also don’t support SVG because of possible security risks due to their XML-based nature. It’s best to talk to your web developer about these concerns if you’re unsure.
When should you use an SVG file?
There’s certainly a time and a place for using these vector files. Think about the uses of the image, how it’ll be interacted with, and how responsive it will need to be in order to determine if SVG is the right choice. We’ve had clients use SVG files so that they can be altered via code (CSS, Javascript, etc.) for more flexibility and variation. Scalability is also a huge factor as sites are typically built to prioritize resolution responsiveness. With that in mind, a high resolution image with longer loading times wouldn’t be necessary if you use an SVG.
While JPG, PNG, and even GIF images are the typical, standard choices when adding images to a website, SVG files are becoming more commonplace due to their ability to be edited via code and scaled to any size without loss of quality. Discuss with your designer and/or web developer about utilizing these types of images on your next project.