Adding SVG graphics to your WordPress website is a great way to improve the visual appeal and usability of your site. SVG graphics are vector-based, which means they can be scaled to any size without losing image quality. Additionally, they can be animated and interactive, making them a great choice for header images, infographics, and other types of visual content.
By default, WordPress includes only the most popular image, audio, and video file formats when uploading files, but SVG doesn’t make this list. This article will show you how to add your SVG files to WordPress, easily and securely.
What are SVG graphics and why would you want to use them on your WordPress website?
SVG is short for Scalable Vector Graphics. As the name suggests, SVG graphics are scalable, meaning they can be enlarged or reduced in size without any loss in quality. This means that no matter what screen resolution or device your website is viewed on, the SVG graphic will always look sharp and crisp. This is a huge advantage over bitmap graphics which can become pixelated when scaled.
How do SVG's work
SVG’s are an XML-based vector graphic format that allow you to create drawings and illustrations for the web that are lightweight and high quality. They work by defining the shape, color, and other properties of objects using code, rather than pixels like a traditional image. This makes them resolution-independent, meaning they will look good no matter what size they are viewed at.
SVG files are made up of shapes that are defined by mathematical equations. JPEG (Joint Photographic Experts Group) is a type of compressed image file. JPEGs are common on the web, as they can be displayed quickly and use relatively little bandwidth. They are also used in digital cameras, video editing, and other graphic-intensive applications. JPEGs are lossy files, which means that some data is lost each time the file is compressed. This can often result in degraded image quality, particularly when images are edited and re-compressed multiple times.
JPEGs are raster graphics, meaning that they are made up of a grid of pixels. When you enlarge a JPEG, the individual pixels become more visible and the image quality suffers.
We like to use SVGs when building our websites on vector parts including logos, icons, favicons etc. By using an SVG we can be sure that wherever our graphic is placed and whatever scale it is seen at responsively it is nice and small in file size but very crisp. More and more people are opting for ultra HD or Retina monitors these days so don’t underestimate how important it is for the graphics and images on your site to be built for high resolution devices.
SVG security issues have been around for a while, but they seem to be getting more attention as SVG gains in popularity. There are several reasons for this: SVG is an XML file format, and as such, is vulnerable to many of the same attacks that can target XML documents. SVG files can also include script, which makes them potentially vulnerable to cross-site scripting (XSS) attacks. In addition, because SVG files can be embedded in HTML documents, they can be used to exploit vulnerabilities in browsers or browser plug-ins.
It’s because of these security reasons that if you try to upload an SVG to WordPress you’ll get the ‘lovely’ error message which goes something like “Sorry, this file is not permitted for security reasons”.
Adding an SVG to Your WordPress Website
Adding SVGs to WordPress can be a bit tricky. By default, WordPress doesn’t support SVG files. However, there are a few ways to add them to your website. One way is by using a plugin. There are a few plugins that allow you to add SVGs to your websites, such as SVG Support and WP SVGs. Another way is by adding the code manually. This can be a little more complicated, but it’s still possible.
Because we are always conscious of safety, we find the best way to upload SVGs is via a plugin like SVG Support. Using a plugin like this offers you complete support for SVG files in WordPress and also gives you the added benefit of being able to restrict who can upload an SVG to your website (which we highly recommend you do).
Using the SVG Support Plugin to Upload Files to Your WordPress Website
To use the SVG Support plugin, first install and activate it on your WordPress site. Once the plugin is activated, you will see a new “SVG Files” menu item in the WordPress admin menu. This menu contains all of the functionality of the SVG Support plugin, including options for uploading new files, managing existing files, and previewing SVGs.
The SVG Support plugin also includes several helpful features for optimizing and troubleshooting your SVGs. For example, the plugin includes an option to optimize SVGs when they are uploaded automatically.
Next you’ll need to open up the setting pages of the SVG Support Plugin by going to Settings > SVG Support. On the settings page click the check box next to Restrict to Administrators?. This will allow only an administrator to upload SVG files to your WordPress site.