During your web design projects and graphic design, you will definitely have come across jpeg and png image files. You should know by now that a jpeg image is generally the smallest of them all in terms of size however is of less quality. Png images on the other hand come a little bigger but allow part of the image to have a transparent background. A file type you may be less familiar with is the SVG file type.
What is an SVG?
A Scalable Vector Graphic (SVG) uses a text based format to render an image. This is different to raster images like jpeg or png and means they can scale. Since SVG images are calculated mathematically on the fly, they scale much better and do not become pixelated like png or jpeg images. Regardless of screen size or print dimensions, your SVG images will remain crisp and clear.
Why would you use an SVG?
Since SVG images scale perfectly, they are perfect for a number of situations. On the web, they are often used for logos and other graphics because regardless of how big or small the screen size, there will never be any blurring or pixelation. They are also a good choice for print media – you’ll have print quality resolution whether you are designing a massive banner or a business card. SVG images support transparent backgrounds too so make a great alternative to png images if you’re creating graphics as file size is often smaller.
This doesn’t make SVG images perfect for every instance though. Whilst shapes and colours work really well, any photographic element within the SVG image still won’t scale correctly and will also make the file size larger. If your image is a photograph or involves more than shapes, lines and colours, then SVG is probably not the way to go.
How do I create SVG images?
SVG images can be created using pretty much any creative software. Adobe Illustrator, GIMP and many others allow you to create them. Just remember to save your file as an .svg (obviously).
How can you use SVG with WordPress?
As a standalone product, WordPress doesn’t support SVG images. This is due to the fact that SVG images aren’t actually images at all. What? SVG files are actually document based formats and there are multiple known vulnerabilities due to it’s flexibility. In fact, a quick search will demonstrate well over 8000 security issues relating to the use of SVG images when they are implemented incorrectly.
Fortunately for us there are a number of WordPress plugins that allow us to enable SVG uploads to the media folder. Many of these do not take into account the vulnerabilities we mention above and so we have to choose wisely. Our favourite enables us to upload SVG files as well as protect ourselves from known security issues. You can download it here, activate it and then you’ll be able to use SVG files within your website.
Liam is a website designer and digital marketer based in Leeds, West Yorkshire. He spent a decade working within the charity sector before moving into the marketing space a number of years ago. Liam always strives to do something slightly different with every project and always designs to deliver results, not just pretty websites.