{"id":18883,"date":"2012-10-11T17:20:24","date_gmt":"2012-10-12T00:20:24","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=18883"},"modified":"2017-01-24T08:56:32","modified_gmt":"2017-01-24T15:56:32","slug":"allow-svg-through-wordpress-media-uploader","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/wordpress\/allow-svg-through-wordpress-media-uploader\/","title":{"rendered":"Allow SVG through WordPress Media Uploader"},"content":{"rendered":"<p>NOTE: As of 4.7.1 this isn&#8217;t working exactly as published here anymore. <a href=\"https:\/\/css-tricks.com\/snippets\/wordpress\/allow-svg-through-wordpress-media-uploader\/#comment-1606112\">Comment thread starts here.<\/a> I&#8217;ll update this once the best way to handle it becomes clear. This is <a href=\"http:\/\/codepen.io\/chriscoyier\/post\/wordpress-4-7-1-svg-upload\" rel=\"noopener\">the best I got so far<\/a>.<\/p>\n<hr>\n<p>For your functions.php file or a functionality plugin:<\/p>\n<pre rel=\"PHP\"><code class=\"language-markup\">function cc_mime_types($mimes) {\r\n  $mimes['svg'] = 'image\/svg+xml';\r\n  return $mimes;\r\n}\r\nadd_filter('upload_mimes', 'cc_mime_types');<\/code><\/pre>\n<p>Without this, SVG files will be rejected when attempting to upload them through the media uploader.<\/p>\n<p>Before WordPress 4.0, you also make them display properly in the Media grid. But that&#8217;s broken now. If anyone knows how to fix, let me know!<\/p>\n<pre rel=\"PHP\"><code class=\"language-markup\">function fix_svg_thumb_display() {\r\n  echo '\r\n    td.media-icon img[src$=\".svg\"], img[src$=\".svg\"].attachment-post-thumbnail { \r\n      width: 100% !important; \r\n      height: auto !important; \r\n    }\r\n  ';\r\n}\r\nadd_action('admin_head', 'fix_svg_thumb_display');<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>NOTE: As of 4.7.1 this isn&#8217;t working exactly as published here anymore. Comment thread starts here. I&#8217;ll update this once the best way to handle it becomes clear. This is the best I got so far. For your functions.php file or a functionality plugin: function cc_mime_types($mimes) { $mimes[&#8216;svg&#8217;] = &#8216;image\/svg+xml&#8217;; return $mimes; } add_filter(&#8216;upload_mimes&#8217;, &#8216;cc_mime_types&#8217;); [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3229,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18883"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18883"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18883\/revisions"}],"predecessor-version":[{"id":250391,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18883\/revisions\/250391"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3229"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18883"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}