WordPress enables users to upload quite a few different kinds of image files. You\u2019ll likely recognize the usual suspects, such as PNG and JPG. Displaying other file types, such as vector graphics, can be more problematic. <\/p>\n\n\n\n
Fortunately, there are a few ways to incorporate vector files into your website. While not a native feature, Scalable Vector Graphics (SVG) files can be used to display two-dimensional images on WordPress sites. With a little reconfiguring, you\u2019ll be able to optimize some of your logos and other graphics using this file type. <\/p>\n\n\n\n
Note: If your site is hosted with WP Engine, our platform natively supports GZIP compression on SVG files. If you\u2019re interested in trying out our fully managed hosting platform<\/a>, we also offer four months of free hosting for WordPress sites with new annual plans.<\/p>\n\n\n\n In this article, we\u2019ll learn more about SVG files and why you might want to use them. Then we\u2019ll walk through two ways to enable their use on your website. We\u2019ll also cover some important security precautions you may want to take. Let\u2019s get started!<\/p>\n\n\n\n\n\n An SVG file is a type of vector image. Vector files<\/a> are composed differently than more common image file types. For example, a JPG is made up of thousands of pixels. but that is not the case with an SVG file. <\/p>\n\n\n\n Vector images are more like a set of written instructions. They don\u2019t contain pixels that form a larger image. Instead, they include a schema-like set of data that creates a two-dimensional image. This means there are some unique benefits to using SVG files. <\/p>\n\n\n\n SVGs have a number of perks. Since they are highly scalable, you can manipulate the size as needed without impacting the quality of the image. As you might know all too well, if you try to scale up a JPG to increase its size, the quality degrades to an unusable level very quickly.<\/p>\n\n\n\n That\u2019s where SVGs can come in handy. While they aren\u2019t meant for displaying traditional photographs, they are a great choice for business logos, icons, and other simple graphics on your website.<\/p>\n\n\n\n Additionally, SVG files tend to be significantly smaller than other image types. This means your site won\u2019t get bogged down by graphics. What\u2019s more, SVG files are indexed by Google, and have been for quite some time, so they can be a real boon for your site\u2019s Search Engine Optimization (SEO). <\/p>\n\n\n\n Since WordPress doesn\u2019t include support for SVGs out of the box, you\u2019ll have to work a little harder to include them on your website. In the next few sections, we\u2019ll go over how to add SVG files to your website with a plugin and via a manual process.<\/p>\n\n\n\n As with many WordPress tasks, plugins can make enabling SVG support simple. All you have to do is pick the right solution for your needs and configure a few settings.<\/p>\n\n\n\n First, you\u2019ll need to download and install an SVG plugin. Some highly reviewed SVG file plugins include Safe SVG<\/a>, WP SVG<\/a>, Easy SVG<\/a>, and Enable SVG, WebP, & ICO<\/a>. <\/p>\n\n\n\n Once you\u2019ve installed and activated the plugin of your choice, you\u2019ll have a new menu option in your WordPress dashboard under Settings > [Plugin Name]. There, you will receive instructions on how to style SVG files for your website.<\/p>\n\n\n\n Additionally, you\u2019ll be able to configure a few important administrative settings. If possible, we recommend restricting SVG uploading privileges to administrators only. <\/p>\n\n\n\n After your chosen plugin is configured, you\u2019ll be able to upload SVG files directly to your Media Library. However, there are a few other important items to take care of. <\/p>\n\n\n\n How you approach this step will depend on your web host and server setup. For example, at WP Engine, GZip is already enabled for a specific list of file types and \u201cimage\/svg+xml\u201d is one of them.\u00a0<\/p>\n\n\n\n Adding this type to the list for your website will ensure your SVG files are optimized appropriately and quickly. For everything to run smoothly, you\u2019ll need to include this file type in your .htaccess file.<\/p>\n\n\n\n Note<\/strong>: To increase website performance and match industry trends, WP Engine has deprecated the .htaccess file. If your site is hosted on our platform and you need to use custom .htaccess directives outside of the default WordPress rules (such as redirects, headers, or access rules), you can convert them using the guidance provided in this article<\/a>.<\/p>\n\n\n\n One of the downsides to using SVG files, and the primary reason this file type has not yet been incorporated into WordPress core, is that they are prone to security issues<\/a>. Since SVG files are XML-based, they are vulnerable to External Entity attacks<\/a>, among other risks.<\/p>\n\n\n\n When you configure your SVG plugin, it\u2019s recommended that you limit SVG upload access to administrators only. However, an even more secure approach is to \u201csanitize\u201d your SVG files before you upload them. This eliminates any of the unnecessary XML code that might leave your site open to attacks. <\/p>\n\n\n\n Many plugins, likeSafe SVG, will sanitize your SVG files for you, but if you prefer to sanitize them manually, you can use a tool like this SVG Sanitizer Test<\/a>. <\/p>\n\n\n\n Having your own sanitizer in place is also a good option if you plan to use the next method to manually enable SVGs on your WordPress website. <\/p>\n\n\n\n If you prefer getting your hands dirty and doing some coding yourself, you can manually enable your WordPress site to accept SVG files. The following steps outline how that process works.<\/p>\n\n\n\n To get started, you\u2019ll need to edit your website\u2019s functions.php file. To do this, you can go to Appearance > Edit Themes in your dashboard, and select the functions.php file. <\/p>\n\n\n\n Alternatively, you can access your site\u2019s files using a File Transfer Protocol (FTP) application such as FileZilla.<\/p>\n\n\n\n Either way, it\u2019s best to create a child theme or switch to a local development environment<\/a> before doing any major work on your website. This will keep your live site safe from harm while you\u2019re making changes.<\/p>\n\n\n\n Next, you\u2019ll need to add the following snippet of code to your functions.php file:<\/p>\n\n\n\n After that, you\u2019ll be able to upload SVG images to your Media Library. There, you can view and interact with them just like with other image file types. <\/p>\n\n\n\n As we mentioned earlier, enabling SVG files does involve certain risks. To keep your site safe, you can set upload permissions for SVGs by creating custom user roles. You can use a plugin such as User Role Editor<\/a> or WPFront User Role Editor<\/a> to accomplish this. <\/p>\n\n\n\n These plugins enable you to customize the access and permission levels for your existing user roles. For example, you can designate which users have permission to upload SVGs, which will help you monitor the security of those files. <\/p>\n\n\n\n WordPress does not natively enable the use of SVG files. However, with a little extra site configuration work, you\u2019ll be able to enable and secure the use of SVG files on your site. <\/p>\n\n\n\n Plus, keep in mind that on our hosting plans for WordPress sites<\/a>, you\u2019ll get access to professional support and well-developed website security solutions. Check out our plans<\/a> and secure your site with us today!<\/p>\n","protected":false},"excerpt":{"rendered":" WordPress enables users to upload quite a few different kinds of image files. You\u2019ll likely recognize the usual suspects, such as PNG and JPG. Displaying other file types, such as vector graphics, can be more problematic. Fortunately, there are a few ways to incorporate vector files into your website. While not a native feature, Scalable…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":148857,"template":"","resource-topic":[908,904,912],"resource-role":[895,896,906,899],"resource-type":[916],"class_list":["post-100245","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nWhat is an SVG?<\/h2>\n\n\n\n
Why allow SVG in WordPress?<\/h2>\n\n\n\n
How to upload an SVG to WordPress<\/h2>\n\n\n\n
Method 1: Use a plugin<\/h2>\n\n\n\n
Step 1: Download the plugin<\/h3>\n\n\n\n
Step 2: Enable GZip support of SVG files on your server<\/h3>\n\n\n\n
Step 3: Ensure the plugin is correctly securing files<\/h3>\n\n\n\n
Method 2: Manually enable SVG file uploads<\/h2>\n\n\n\n
Step 1: Edit your site\u2019s functions.php file<\/h3>\n\n\n\n
Step 2: Add a code snippet<\/h3>\n\n\n\n
\/\/ 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 '<style type=\"text\/css\">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
<\/style>';
}
add_action( 'admin_head', 'fix_svg' );<\/code><\/p>\n\n\n\nStep 3: Secure access and limit SVG upload permissions<\/h3>\n\n\n\n
Stay secure with WP Engine<\/h2>\n\n\n\n