{"id":13199,"date":"2023-10-18T07:20:21","date_gmt":"2023-10-18T01:50:21","guid":{"rendered":"https:\/\/codexcoach.com\/?p=13199"},"modified":"2024-07-02T10:26:10","modified_gmt":"2024-07-02T04:56:10","slug":"enabling-svg-support-in-wordpress-programmatically","status":"publish","type":"post","link":"https:\/\/codexcoach.com\/enabling-svg-support-in-wordpress-programmatically\/","title":{"rendered":"Enabling SVG Support in WordPress Programmatically"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

SVG (Scalable Vector Graphics) is a format that has been gaining attention due to its scalability and responsiveness. WordPress<\/a>, by default, does not support SVG file uploads for security reasons. However, there are ways to enable SVG support programmatically for your WordPress website. This blog will guide you through the steps to achieve that, thereby allowing for greater customization and flexibility.<\/p>\n\n\n\n

Methods to Enable SVG Support<\/h2>\n\n\n\n

There are various methods to enable SVG support, but we’ll focus on doing this programmatically using PHP. You can add this code to your theme\u2019s functions.php<\/code> file or install a simple plugin.<\/p>\n\n\n\n

Method 1: Insert a Code Snippet<\/strong><\/h3>\n\n\n\n
<?php\nadd_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {\n\n\tglobal $wp_version;\n\tif ( $wp_version !== '4.7.1' ) {\n\t\treturn $data;\n\t}\n\n\t$filetype = wp_check_filetype( $filename, $mimes );\n\n\treturn [\n\t\t'ext'             => $filetype['ext'],\n\t\t'type'            => $filetype['type'],\n\t\t'proper_filename' => $data['proper_filename']\n\t];\n\n}, 10, 4 );\n\nfunction cxc_mime_types( $mimes ){\n\t$mimes['svg'] = 'image\/svg+xml';\n\treturn $mimes;\n}\nadd_filter( 'upload_mimes', 'cxc_mime_types' );\n\nfunction cxc_fix_svg() {\n\techo '<style type="text\/css">\n\t.attachment-266x266, .thumbnail img {\n\t\twidth: 100% !important;\n\t\theight: auto !important;\n\t}\n\t<\/style>';\n}\nadd_action( 'admin_head', 'cxc_fix_svg' );\n?><\/code><\/pre><\/div>\n\n\n\n
<?php\nadd_filter( 'upload_mimes', 'cxc_file_types_to_uploads' );\nfunction cxc_file_types_to_uploads( $file_types ){\n\t$cxc_filetypes = array();\n\t$cxc_filetypes['svg'] = 'image\/svg+xml';\n\t$file_types = array_merge($file_types, $cxc_filetypes );\n\treturn $file_types;\n}\n?><\/code><\/pre><\/div>\n\n\n\n
Also read:<\/strong> How Disable Zoom, Lightbox, And Gallery Slider On WooCommerce Single Product<\/a><\/strong><\/p>\n\n\n\n
Method 2: Make Use of a Plugin<\/strong><\/h3>\n\n\n\n
While adding SVG support programmatically to your WordPress website offers a lot of control, using a plugin can simplify the process, particularly for those who are less familiar with coding. Plugins often come with added features like SVG sanitization, which enhances the security of your uploads.<\/p>\n\n\n\n
Step 1: Installation<\/h3>\n\n\n\n
First, download and set up a plugin called SVG Support<\/a>.<\/p>\n\n\n\n
After it’s on, go to your WordPress settings. You’ll see a new option called SVG Support. Click on it to learn how to make your SVG files look good on your website.<\/p>\n\n\n\n
You can also make it so only the website’s admins can upload SVG files.<\/p>\n\n\n\n
Once you do all this, you can start adding SVG files to your website. But make sure to check for other important stuff first.<\/p>\n\n\n\n
Step 2: Turn On GZip for SVGs on Your Server <\/h3>\n\n\n\n
The way to do this depends on who’s hosting your website and how your server is set up. Some hosts, like WP Engine, already use GZip for certain files but not for SVGs.<\/p>\n\n\n\n
To make sure your SVGs load fast, you need to add this type of file to your website\u2019s list. Do this in your .htaccess file on your server.<\/p>\n\n\n\n
Step 3: Make Sure the Plugin Keeps Files Safe <\/h3>\n\n\n\n
SVG files can have some security risks, which is why WordPress doesn’t support them by default. These files can be open to certain types of attacks because they’re based on XML.<\/p>\n\n\n\n
When you set up your SVG plugin, it’s a good idea to let only admins upload SVGs. For extra safety, you can ‘clean’ the SVG files before you upload them to get rid of any risky code.<\/p>\n\n\n\n
While the SVG Support plugin doesn’t clean the files for you, some plugins do. One example is Safe SVG.<\/p>\n\n\n\n
You can also use your own tool to clean SVG files. The code for the Safe SVG cleaning tool is free for anyone to use and can be found on GitHub.<\/p>\n\n\n\n
Having your own cleaning tool is smart if you’re going to use SVGs on your WordPress site.<\/p>\n
<\/div>","protected":false},"excerpt":{"rendered":"
Introduction SVG (Scalable Vector Graphics) is a format that has been gaining attention due to its scalability and responsiveness. WordPress, by default, does not support SVG file uploads for security reasons. However, there are ways to enable SVG support programmatically for your WordPress website. This blog will guide you through the steps to achieve that, […]<\/p>\n","protected":false},"author":8,"featured_media":13202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_aib_schema_json_ld":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/13199"}],"collection":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/comments?post=13199"}],"version-history":[{"count":1,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/13199\/revisions"}],"predecessor-version":[{"id":13201,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/13199\/revisions\/13201"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media\/13202"}],"wp:attachment":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media?parent=13199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/categories?post=13199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/tags?post=13199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}