What Is an SVG File (And How

do You Upload SVGs to

WordPress)?

Downloaded on: 04 February 2022

The main reason SVG files are especially popular among developers and designers is that
they are a scalable image format, generally smaller in file size (sometimes by quite a bit), and
don’t pixelate on retina screens. WordPress by default though doesn’t allow you to
upload the SVG file format, mainly due to security concerns.

Today we are going to dive into what SVGs are, how they can be beneficial, and how you
can safely enable WordPress SVG support. We will also discuss browser support, as well as
some caveats if you decide you want to switch to the vector image format.

Hopefully one day we will have SVG as part of WordPress core, but we are not quite there
yet.

What Is an SVG File?

SVG (Scalable Vector Graphics) is an XML-based vector image that is commonly used by
websites and brands to display logos and icons on their websites. Wikipedia defines SVG as:

An SVG (scalable vector graphics) is an XML-based vector image format for two-
dimensional graphics with support for interactivity and animation. The SVG
specification is an open standard developed by the World Wide Web Consortium
(W3C) since 1999.

You can even manipulate SVG files with code or your text editor. SVGs are currently utilized
by 33% of all websites and as you can see below, the adoption rate is growing rapidly.
Popular sites such as Google, Reddit, Dropbox, ESPN, and even our own website here at
Kinsta use SVGs.
 — SVG usage statistics April 2020 – April 2021

SVG File Browser Support

SVG files are currently supported by all major browsers including mobile browsers. The only
issue you might run into is if you still need support for IE8, which we hope you don’t. IE8 only
has around a 0.36% browser market share and is no longer supported. Here is a great article
by Lubos on why developers should stop supporting IE8, IE9, and IE10. From a business
perspective, this might not always be possible, but he brings up some good points. If for
some desperate reason you still need IE8 support, you could define a fallback image (PNG
or JPG) for your SVG images, but we won’t be going into that today. Below is a list of
supported browsers:

Internet Explorer 9, 10, 11+ and Edge

Firefox 2+
Chrome 4+
Safari 3.1+
Opera 10+
iOS Safari 3.2+
Android Browser 3+
Firefox for Android 86+
Opera Mini (all)
Opera Mobile 12+
Chrome for Android 89+
UC Browser for Android 12.12+
Samsung Internet 4+
QQ Browser 10.4
Baidu Browser 7.12
KaiOS Browser 2.5

— SVG browser support

Benefits of Using SVG Files

SVG files are a vector format, meaning they are automatically scalable in both browsers
and photo editing tools. This makes them great for both graphic and web designers. Normally
when you try to edit a PNG or JPG in a tool like Photoshop, Sketch, or Paint, you can’t
upscale them without pixelation. With SVGs, you can upscale them to an infinite amount and
they will look pixel perfect (or should we say vector perfect) every time. This is why they are a
great image format to use for retina screens.

Google indexes SVGs, which is great news for SEO purposes. SVG content that is linked to
a file itself will be indexed and show up in Google image search. You can see this first-hand
with the SVG illustrations we use on Kinsta by doing an advanced image search. Note: Inline
SVGs, or rather those composed of just code, are typically not indexed.

SVGs are traditionally (not always) smaller in file size than PNGs or JPGs. By using SVGs,
you can actually speed up your WordPress site as you will decrease your overall page
size. Genki wrote a great article where he compares the size of SVG vs PNG vs JPEG and
here’s our JPG vs JPEG comparison. Below are a few takeaways from his testing in which
he compared the three different image types.
JPG (optimized size: 81.4 KB)

— JPG image
PNG (optimized size: 85.1 KB)

— PNG image
SVG (optimized size: 6.1 KB)

— SVG image

As you can see above, the SVG is a decrease in file size of 92.51% when compared to the
JPG. And when compared to the PNG, 92.83%. Those are pretty impressive file size
differences. However, there is one caveat, as he tested more detailed images, the SVGs
eventually actually became larger in size than the JPG or PNG.

That is why many sites use SVGs for less detailed images such as logos, icons, etc. as they
will see a significant decrease in file sizes. But for more images with great detail, like perhaps
your blog post “featured images,” you might want to stick with a PNG or JPG but you can still
optimize them. Many websites use a hybrid approach, using both file types together where it
makes sense.

Also, it is important to note that social media networks like Facebook and Twitter don’t
support SVGs for sharing. So if you used SVGs for your featured images, you would have to
utilize the Yoast SEO feature and upload a PNG or JPG for the OG and meta tags, otherwise
you could risk your featured image not showing up at all.
Why SVG Security is Important
The reason SVG is not part of WordPress core yet is that there are security concerns to be
addressed. You can follow the active discussion about SVGs in WordPress core (#24251)
which was started back in 2013. SVG is an XML file, which by itself opens it up to different
vulnerabilities of which normal image formats aren’t affected. These include XML external
entity attacks (XXE), bomb nested entities, and XSS attacks.

Mario Heiderich published an insightful presentation about the security risks due to active
content injection with SVG files. One example given was that JavaScript was embedded in
an SVG and it actually managed to call Mario on Skype. That is kind of scary! SecuPress,
authors of a WordPress security plugin, also touched on the subject of being careful when
adding SVGs to WordPress, and the importance of doing it the right way.

Many SVG plugins on the repository are utilizing the following code, which simply enables
the MIME type to allow uploading of SVGs to the WordPress media library. This is not the
safe way to do this! So don’t go and just download the first free SVG plugin you see or
copy paste this code and think you’re good to go.

function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

The solution is that SVGs need to be sanitized. Sanitization is basically the cleaning of code
or input to avoid security issues (such as code injection), code conflicts, and errors. This
could entail things such as encoding data, filtering and validating strings, etc. This is
where Daryll Doyle’s SVG-Sanitizer library comes into play, which he refers to as “his attempt
to build a decent SVG sanitizer in PHP.” Check out the demo of his SVG sanitizer to see it in
action.
 — SVG sanitizer demo

It is also important that you consider who on your site has access to upload SVGs. For
example, if you are on a multi-author site, you have no idea what kind of SVG someone else
might upload, exposing your site. Restricting SVG uploads to administrators and those
that understand some of the security concerns is advisable.

How to Safely Enable WordPress SVG Support

Daryll has developed a plugin, WP SVG (also know as Safe SVG), which utilizes the SVG-
Sanitizer library upon uploading SVG images to your WordPress media library. The plugin
also enables you to view SVGs like normal images in the media library.
 — WP SVG plugin

You can download Safe SVG for free from the WordPress repository or by searching for it
within your WordPress dashboard under “Add New” plugins. You can get up and go with a
few simple clicks.

Info

This plugin hasn’t received any recent updates, so make sure to test it
on a staging site before installing it on your production site.

There’s also a premium version, available at wpsvg.com, which allows you to restrict certain
users from uploading SVGs and additional SVG optimization. In the example below, we are
going to simply use the free version.

As an alternative plugin, you might want to check out SVG Support.

Before uploading your SVG file, it is important to understand that they behave slightly
differently than images. When exporting an SVG from your photo editing tool, you will want to
export the text as curves (or create an outline), otherwise, it might render slightly different in
various browsers.
 — Affinity Designer – Export text as curves SVG

After you install the plugin, there are no settings, it will simply sanitize your SVGs upon
upload. On our test site below you can see we replaced our logo with an SVG file, it is view-
able like normal in the media library.
 — SVG in WordPress media library

This also then allowed us to use our theme’s control panel to change the logo in our
WordPress header over to our SVG file. You can see below it is indeed serving up the .svg
file. And looks beautiful now on retina screens.
 — SVG in WordPress header

There is one additional tweak we had to make. In IE9-11 desktop & mobile don’t properly
scale SVG files yet. Adding height and width fixes this issue. This might vary per theme, but
on our test site we simply modified our header.php file and added these custom dimensions.
Some WordPress themes use CSS to modify the scaling, which is not good for performance
reasons, but due to that it might require you adding additional code to fix the IE issue.
 — Modified header.php file for SVG IE scaling issue

And that’s it! You have now safely enabled WordPress SVG support. This plugin and or
method isn’t endorsed or supported by WordPress core, so of course, use at your own risk.
However, if you were already uploading SVGs with only the MIME type snippet, then, by all
means, please do it this way.

Also, if you have never used SVGs before, ensure you have GZIP enabled on your server for
the “image/svg+xml” file type. This will ensure they are compressed and will load as fast as
possible. Sometimes sysadmins only enable the more standard file types. Note: GZIP is
enabled on all Kinsta servers already for SVGs.

Summary
SVGs are a great way to enhance the look of your site! We recommend utilizing SVGs, PNG,
and JPGs together to achieve the best performance, as very detailed images will not perform
as good in SVG format. SVGs are great for your logo, to ensure it looks pixel-perfect on
every screen, along with icons.

What are your thoughts? Have you used SVGs yet on your WordPress site?