{"id":12634,"date":"2026-05-11T05:41:51","date_gmt":"2026-05-11T05:41:51","guid":{"rendered":"https:\/\/how.congdongso.net\/?p=12634"},"modified":"2026-05-11T05:41:51","modified_gmt":"2026-05-11T05:41:51","slug":"cach-upload-file-svg-len-wordpress","status":"publish","type":"post","link":"https:\/\/how.congdongso.net\/en\/how-to-upload-svg-files-to-wordpress\/","title":{"rendered":"How to Upload SVG Files to WordPress Latest Update"},"content":{"rendered":"<p>Although SVG has many advantages such as small size, high resolution, and good scalability, WordPress does not allow SVG file uploads by default due to security and compatibility reasons. If you want to use SVG in WordPress, you need to make some adjustments in the source code or use a plugin to allow these files to be uploaded safely.<\/p>\r\n\r\n\r\n\r\n<p>Next, I will guide you <a href=\"https:\/\/how.congdongso.net\/cach-upload-file-svg-len-wordpress\/\">how to Upload SVG Files to WordPress Latest Update<\/a><\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">How to Upload SVG Files to WordPress<\/h2>\r\n\r\n\r\n\r\n<p>To insert the code into WordPress and make sure it works, you can follow these steps:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 1: Log in to WordPress Admin<\/h3>\r\n\r\n\r\n\r\n<p>Access your WordPress admin dashboard using your login credentials.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 2: Edit the functions.php file<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li style=\"list-style-type: none;\">\r\n<ol class=\"wp-block-list\">\r\n<li class=\" translation-block\"><strong>Go to Appearance:<\/strong> In the left panel, select <strong>Appearance<\/strong> and then select <strong>Editor<\/strong>.<\/li>\r\n<li class=\" translation-block\">Find the <strong><code>functions.php<\/code><\/strong> file: In the list of files on the right, find and click the file named <code>functions.php<\/code>. This is the file where you'll add the code.<\/li>\r\n\r\n\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<ol class=\"wp-block-list\"><\/ol>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 3: Add the code<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li class=\" translation-block\">Scroll down to the bottom of the <code>functions.php<\/code> file.<\/li>\r\n\r\n\r\n\r\n<li>Paste the code below at the end of the file:<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<p><strong>See more.<\/strong><\/p>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li><strong><a href=\"https:\/\/how.congdongso.net\/code-tu-dong-luu-anh-vao-hot\/\" target=\"_blank\" rel=\"noopener\">Code to automatically save images to hot when copying images from other pages<\/a><\/strong><\/li>\r\n\r\n\r\n\r\n<li><strong><a href=\"https:\/\/how.congdongso.net\/code-hien-thi-hotline-tren-website\/\" target=\"_blank\" rel=\"noopener\">Code to display hotline on website<\/a><\/strong><\/li>\r\n\r\n\r\n\r\n<li><strong><a href=\"https:\/\/how.congdongso.net\/code-bai-viet-lien-quan-dep-cho-flatsome\/\" target=\"_blank\" rel=\"noopener\">Share beautiful related article code for Flatsome<\/a><\/strong><\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<pre class=\"wp-block-preformatted\">function howto_edu_vn_mime_types($mimes) { $mimes[&#039;svg&#039;] = $mimes[&#039;svgz&#039;] = &#039;image\/svg+xml&#039;; return $mimes;} add_filter(&#039;upload_mimes&#039;, &#039;howto_edu_vn_mime_types&#039;); function howto_edu_vn_mimetype_svg($data, $file, $filename, $mimes) { $extension = pathinfo($filename, PATHINFO_EXTENSION); if (in_array($extension, [&#039;svg&#039;, &#039;svgz&#039;])) { $data[&#039;type&#039;] = &#039;image\/svg+xml&#039;; $data[&#039;ext&#039;] = $extension;} return $data;} add_filter(&#039;wp_check_filetype_and_ext&#039;, &#039;howto_edu_vn_mimetype_svg&#039;, 100, 4);\r\n<\/pre>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 4: Save changes<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li class=\" translation-block\">Click the <strong>Update File<\/strong> button to save the changes you have made.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Step 5: Test the operation<\/h3>\r\n\r\n\r\n\r\n<ol class=\"wp-block-list\">\r\n<li class=\" translation-block\">Go to the <strong>Media<\/strong> section in your WordPress dashboard.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\">Click the <strong>Add New<\/strong> button to upload an SVG or SVGZ file.<\/li>\r\n\r\n\r\n\r\n<li>Check if the file is visible or if the file was uploaded successfully.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Note<\/h3>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li class=\" translation-block\">Before making any changes to the <code>functions.php<\/code> file, you should back up this file or create a full backup of your website to avoid data loss if something goes wrong.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\">If you don't see a <code>functions.php<\/code> file, make sure you're using a child theme or a parent theme that supports editing.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Meaning of the code:<\/h2>\r\n\r\n\r\n\r\n<p><strong>Jaw\u00a0<\/strong><code>howto_edu_vn_mime_types($mimes)<\/code>:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li class=\" translation-block\">This function takes an array <code>$mimes<\/code> containing previously defined file types.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\">It adds two new file types to the array:\u00a0<code>svg<\/code>\u00a0and\u00a0<code>svgz<\/code>\u00a0with the MIME type value of\u00a0<code>image\/svg+xml<\/code>.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\">Finally, the function returns the updated array <code>$mimes<\/code><\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p><code>add_filter(&#039;upload_mimes&#039;, &#039;howto_edu_vn_mime_types&#039;)<\/code><\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li class=\" translation-block\">This line uses WordPress's <strong>add_filter<\/strong> function to connect the <strong>howto_edu_vn_mime_types<\/strong> function to the <strong>upload_mimes<\/strong> hook.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\">This allows WordPress to recognize files with the <code>svg<\/code> and <code>svgz<\/code> extensions when users upload them.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>Jaw\u00a0<code>howto_edu_vn_mimetype_svg($data, $file, $filename, $mimes)<\/code><\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>This function checks the file type and file extension when a file is uploaded.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\">It uses the <code>pathinfo<\/code> function to get the extension of the file name.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\">If the extension is\u00a0<code>svg<\/code>\u00a0or\u00a0<code>svgz<\/code>, it updates\u00a0<code>$data<\/code>\u00a0to specify the MIME type as\u00a0<code>image\/svg+xml<\/code>\u00a0and saves the extension to\u00a0<code>$data['ext']<\/code>.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p><code>add_filter(&#039;wp_check_filetype_and_ext&#039;, &#039;howto_edu_vn_mimetype_svg&#039;, 100, 4)<\/code><\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li class=\" translation-block\">This line connects the function <code>howto_edu_vn_mimetype_svg<\/code> to the hook <code>wp_check_filetype_and_ext<\/code>.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\">The parameter\u00a0<code>100<\/code>\u00a0specifies the priority of the filter, and\u00a0<code>4<\/code>\u00a0indicates the number of parameters the function can take.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>There are a few main reasons why WordPress doesn't allow SVG (Scalable Vector Graphics) file uploads by default:<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">1. Security issues:<\/h3>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li class=\" translation-block\"><strong>Malicious code<\/strong>: <strong>This way of uploading SVG files to WordPress <\/strong>if you don't know where the file is from, it is easy to get malicious code inserted. SVG is an XML format, which can contain JavaScript code. If an SVG file is tampered with or contains malicious code, it can be executed on your website, leading to security issues such as XSS (Cross-Site Scripting) attacks.<\/li>\r\n\r\n\r\n\r\n<li class=\" translation-block\"><strong>User Risk<\/strong>: If SVG file uploads are allowed without checking, users may upload files containing malicious code, which could compromise your website and data.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">2. Incompatible with browsers:<\/h3>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>While most modern browsers support SVG, some older browsers may not fully support it, leading to display issues.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">3. File control:<\/h3>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>WordPress wants to control the types of files users can upload to ensure that only safe and supported files can be used on the system.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">4. Lack of error handling:<\/h3>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>If an SVG file is not created properly, it can cause errors or display incorrectly. WordPress needs to control file types for stability and compatibility.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Conclude<\/h2>\r\n\r\n\r\n\r\n<p class=\" translation-block\">I have just shared with you the latest <strong>how to upload SVG files to WordPress<\/strong>. If you want to use SVG files in your website, you need to take necessary measures to ensure safety, such as using a supporting plugin or adjusting the source code to allow safe SVG uploading. This will help you take advantage of the advantages of the SVG format while still maintaining the security of the website.<\/p>\r\n<p class=\" translation-block\">Also, don't forget to follow our <strong><a href=\"https:\/\/www.facebook.com\/howto.edu.vn\/\" target=\"_blank\" rel=\"noopener\">Fanpage facebook Howto.edu.vn<\/a><\/strong> channel to get the latest updates.<\/p>","protected":false},"excerpt":{"rendered":"<p>D\u00f9 SVG c\u00f3 nhi\u1ec1u \u01b0u \u0111i\u1ec3m nh\u01b0 k\u00edch th\u01b0\u1edbc nh\u1ecf, \u0111\u1ed9 ph\u00e2n gi\u1ea3i cao v\u00e0 kh\u1ea3 n\u0103ng m\u1edf r\u1ed9ng t\u1ed1t, nh\u01b0ng v\u00ec c\u00e1c l\u00fd do b\u1ea3o m\u1eadt v\u00e0 kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch, WordPress kh\u00f4ng cho ph\u00e9p t\u1ea3i l\u00ean file SVG theo m\u1eb7c \u0111\u1ecbnh. N\u1ebfu b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng SVG trong WordPress, b\u1ea1n c\u1ea7n th\u1ef1c hi\u1ec7n &hellip;<\/p>","protected":false},"author":8,"featured_media":12642,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[563,565,564],"class_list":["post-12634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-svg","tag-upload-file-svg","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/12634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/comments?post=12634"}],"version-history":[{"count":1,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/12634\/revisions"}],"predecessor-version":[{"id":21191,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/12634\/revisions\/21191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/media\/12642"}],"wp:attachment":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/media?parent=12634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/categories?post=12634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/tags?post=12634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}