SVG is an XML-based vector image commonly used by websites and brands to display logos and symbols on their websites. The main reason they are especially popular with developers and designers is that they are a scalable (expandable) image format, usually smaller in file weight (sometimes much smaller), and do not look pixelated on retina screens.
WordPress by default does not allow you to upload the SVG file format, mainly due to security concerns. In the article I will present you one way to safely enable SVG support in WordPress, we will discuss how to support the browser, as well as some warnings if you have decided that you want to switch to vector image format.
I hope one day SVG will be a supported part of the WordPress core, but we are not there yet.
If you want to skip directly to the solution, click on the following links. (Although it is recommended to read the full guide)
What is SVG?
According to Wikipedia, SVG (Dynamic Vector Graphics) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
You can even manipulate them using your code or text editor. The SVG specification is an open standard and has been defined by the World Wide Web consortium since 1999.
SVG is currently used by 30% of all websites, but its usage rate is growing rapidly.
Popular sites like Google, Reddit, Dropbox, ESPN, and even our site here use SVG.
SVG browser support
SVG is currently supported by all major browsers and browsers on mobile devices. The only problem you will encounter is in IE8 browsers, and we hope not. IE8 has only a market share of less than half a percent and has long been unsupported and will disappear from the world. Here’s a great article by Lubos Kmetko on why developers should stop supporting IE8, IE9, and IE10.
From a business standpoint, this is not always possible, but it does raise some good points. If for some desperate reason you still need IE8 support, you can set up a backup image (PNG or JPG) for your SVG, but we will not go into that today.
The following is a list of supported browsers:
- Internet Explorer 9, 10, 11+ and Edge
- Firefox 3+
- Chrome 4+
- Safari 3.2+
- Opera 10+
- iOS Safari 3.2+
- Opera Mini (all)
- Android Browser 4.4+
Advantages of SVG
SVG files are a vector format, meaning they can be automatically expanded in both browsers and image editing tools. This is a great benefit for both graphic designers and web designers. Usually, when you try to edit PNG or JPG in a tool like Photoshop, Sketch, or Paint, you will not be able to enlarge them without pixelation. With SVG, you can increase them to infinite size and they will look perfect at the pixel level (or rather a perfect vector) every time. This is why they are a great image format for use on screens and in the particular retina.
Google indexes SVG files, which is great news for SEO. SVG content linked to the file itself has been indexed and will appear in Google Image Search. Note: Inline SVGs, or rather those consisting of code only, will not usually appear in the index.
SVGs are usually (not always) much smaller in weight than PNG or JPG files. With SVG, you can actually speed up your WordPress site as this will reduce the overall page weight. Genki wrote a great article in which he compares the size of SVG vs PNG vs JPEG. Among other things, it presents various comparisons and demonstrates how it is possible to reduce the weight of images by about 90% by choosing SVG from these formats.
Among other things, it presents various comparisons and demonstrates how it is possible to reduce the weight of images by about 90% by choosing SVG from these formats. But it is important to note that this is not always the case, as the image is more graphic, tangible, and detailed, the larger the size of the SVG file and even exceeds the corresponding formats.
This is why many sites use SVG for less detailed images such as logos, icons, etc. because they show a significant decrease in file sizes. On the other hand, for large images that are very detailed, for example, project photos, it may be better to stick with PNG or JPG, which can still be reduced and optimized for browsers. Many sites use a hybrid approach and use both file types together where each excels.
It is also important to note that social media networks like Facebook and Twitter do not support SVG sharing. So if you used SVG for your displayed images, you will need to use Yoast’s SEO plugin and upload PNG or JPG to the OG and meta tags.
Why SVG Security is Important
The reason SVG is not part of the WordPress core yet is that there are security issues with it. You can follow the active discussion about SVGs in the core of WordPress (# 24251) which started back in 2013. SVG is an XML file, which as such opens it up to vulnerabilities and security that the regular formats are not affected by. These include external attacks by malicious entities such as XML (XXE), bomb nested entities, and XSS attacks.
Mario Heiderich has released a presentation of insights about security risks due to injecting active content with SVG files. One example given was that JavaScript was embedded in SVG and she was able to call Mario on Skype. That’s pretty scary! SecuPress, developers of the WordPress security plugin, also touched on the issue of caution when adding SVG to WordPress, and the importance of doing it the right way.
Many SVG plugins in the repository and other web directories use the following code, which allows the MIME type to upload SVG to the WordPress media library. This is not the safest way to do it! So do not go and just download the first free SVG plugin you see or be sure not to copy the code on your site and just forget about it.
function func_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'func_mime_types');The solution is to clean SVG (Sanitization) images. Disinfection is basically cleaning code or input to prevent security issues (such as code injection), code conflicts, and errors. This can include things like data encoding, filtering and validating strings, etc.
This is where Daryll Doyles SVG-Sanitizer library comes into play, which he calls “his attempt to build decent SVG disinfection in PHP”.
It is also important that you consider who on your site has access to upload SVG. For example, if you are on a multi-editor site, you have no idea what type of SVG someone else might upload to reveal your site. It is advisable to limit SVG uploads to administrators and those who understand security concerns.
How to securely enable SVG support in WordPress site
Daryl has developed a plugin, WP SVG (also known as Safe SVG), which uses the SVG-Sanitizer library with every upload of an SVG image to your WordPress media library. The plugin also allows you to view SVG as regular images in the media library. You can download Safe SVG for free from the WordPress repository or by searching the WordPress control panel under the “Add New” plugins. And within 2 clicks be ready for safe work.
It also has a premium version, at wpsvg.com, that allows certain users to be restricted from uploading SVG.
Before you upload your SVG, it is important to understand that they behave slightly differently from the rest of the images. When exporting SVG from your image editing tools, you will want to export the text as curves (or create an outline), otherwise, it may appear slightly different in different browsers.
Once the plugin is installed, there are no additional settings, the SVG images are automatically “sinned” with the upload.
There is only one small adjustment to be made. If you want to enable support for IE9-11 browsers that do not yet properly fit SVG files. Adding height and width solves this problem. This may vary depending on the design template in WordPress. Although in most cases, a simple change in adding dimensions to the WordPress control panel will do the job. If your design template uses CSS to resize, which is not ideal for performance, you will need to add additional code to fix the IE problem.
and that’s it! You have now safely enabled SVG support in WordPress.
This plugin and method are not officially approved or supported by WordPress, use is at your own risk.
However, if you have already uploaded SVG with only the MIME code snippet, then, my recommendation is, please do it this way.
If you have never used SVG before, make sure you have GZIP enabled on your server for the “image / SVG + XML” file type.
This will ensure that they are compressed and loaded as quickly as possible. Sometimes network administrators only allow the more standard file types. Note: GZIP is enabled (Read more about Gzip Compression On Websites) on all storage servers we provide and already supports SVG.
In conclusion
SVGs are a great way to enhance the look of your site. We recommend using SVG, PNG, and JPG together to get the best performance. It is important to remember that very detailed images will not yield good performance in SVG format.
SVG files are great for your logo. To ensure it looks perfect at the pixel level on any screen, as well as icons and icons.
If you enjoyed this article, you will love the rest of our guides. Keep browsing the site and learn more about our services in the digital world. We are at your disposal in any matter. Contact us and we will be happy to talk.