Guide to Use SVG in WordPress (with 2 Simple Solutions)

What is a SVG File

SVG or Scalable Vector Graphic file is a unique image format that relies on ‘vector’ data to form up the viewable image. It is an XML based vector image format that can even be manipulated using text editors.

Although currently uncommon, SVGs are gaining popularity exponentially with websites such as Google, Dropbox and Reddit utilizing them.

Why Should We Use SVG Files

Perhaps the biggest advantage to using SVG is its ability to scale up to any resolution. Unlike other image formats such as PNG or JPG that are not scalable without pixelation.

SVG can be scaled up to umpteenth time making it ideal to be used by web and graphics designers and they do not become blurry but rather appear vector-perfect.

You can use Svg images when you create your WordPress blog or any other website – even if you are using WordPress alternatives.

More reasons to use SVG include:

• Designing logos without scalability issues
• Creating charts, graphs and diagrams
• Animate SVGs using CSS (Which I prefer to use)
• Better SEO ranking since Google indexes SVGs as well
• Smaller file size hence speeding up your websites

WordPress and SVG

There are different file formats supported by the WordPress but SVG is not included in the default list.

Similar to HTML code, an SVG file is XML based containing XML markup language code. The XML code is parsed by your internet browser or image editing tools to render the image on your device’s screens.

However, SVG being XML dependent is prone to vulnerabilities especially in terms of security. Hackers can break into your website or a network to get unauthorized access to the stored data in the site or it’s connected databases, initiate trial and error techniques such as Brute Force Attack or cross-site scripting attacks.

Due to these security threats, WordPress does not allow SVGs by default.

How to Upload SVG to WordPress

Although WordPress does not support SVG by default, there are a few ways to incorporate them into your website through little reconfiguration. There are two ways to include SVGs, first one is a manual process while second one is through plugins.

Method 1: How to enable SVG WordPress Upload Manually

Open your website’s functions.php file (through Appearance–>Edit Themes at your dashboard). Add the following snippet of code to let the WordPress enable SVGs to be uploaded through the Media Library.

Found this code that was written by Chris Coyier:

// Allow SVG
add_filter( ‘wp_check_filetype_and_ext’, function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== ‘4.7.1’ ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
‘ext’ => $filetype[‘ext’],
‘type’ => $filetype[‘type’],
‘proper_filename’ => $data[‘proper_filename’]
];

}, 10, 4 );

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

function fix_svg() {
echo ‘

‘;
}
add_action( ‘admin_head’, ‘fix_svg’ );

It is highly recommended to please ensure custom user roles are designated for SVG uploads. This step is important to keep your website safe since SVGs can cause security loopholes.

Method 2: Using a Plugin

Second method to enable SVG to your WordPress site is by using plugins. A free plugin named Save SVG utilizes the SVG-Sanitizer library and is available to download from the official WordPress repository. You can also download it by searching at the ‘Add New’ plugins page.

Simply download and activate the plugin to your WordPress site. It will also allow you to view SVG files along with other popular formats in the media library. After successful download, you are not required to make any specific settings.

Moreover, a premium version of this plugin contains additional features such as restricting certain users from uploading the SVG files.

One important point to consider is that this plugin (as well as some others) is not by any way supported and/or endorsed by the WordPress core. So, please exercise caution and use at your own risk.

What are the dangers/risks?

SVG file formats have multiple benefits but the reason that is not being included in WordPress by default are the security risks. If you are not familiar with WordPress security I recommend you to check WordPress maintenance services.

Since the SVG file is XML based document format and not exactly an image format, it can include embedded CSS and JavaScript code.

SVG files can be opened in a text editor such as Notepad and you can easily modify the code. Your browser can run any SVG file along the script and the embedded code. This code can be malicious as well putting the computer at brink of security risk.

Also, it is highly recommended to download reliable plugins for SVG support. Just do not go and download any plugin available just because it’s free.

Example of a simple XSS attack with a SVG file:

Let’s write some SVG code in a notepad file:

<---- SVG Code ---> 
<!--?xml version="1.0" standalone="no"?-->



   
   <script type="text/javascript">
      alert("XSS Attack");
   </script>

&lt;--- SVG Code -- &gt;

As you can see in the part: