8 Steps to Enable SVG In WordPress

Crystal Clear Logos & Vector Images

Have you ever viewed a logo on a web page and said: “WOW, now that looks crisp!”… probably not, at least not in those exact words. In order to get that desired “WOW” effect that company is most likely using SVG.

What is SVG?

SVG is a vector based graphic format which uses XML to display the vector image. This format is EXTREMELY IMPORTANT as it can scale, large or small, and always remain clear. SVG can only be created from the original artwork for your logo, so you can not create an SVG file using a png or jpg image of your logo. So if you had your logo created by a professional (like me), you can request an SVG file from your designer. If your logo hasn’t been professionally designed (please message me at craigt@craigt.com I can help! ) then, unfortunately, this tutorial will not help.

After you obtain your SVG logo or graphics and try to upload it to WordPress you will be warned that WordPress does not accept these files. Bummer. Luckily you can follow these steps to enable SVG in your installation.

Enabling SVG in WordPress (Step-by-Step Instructions)

  1. Login to your WordPress control panel (yoursite.com/wp-admin)
  2. Hover over Appearance and click Editor
  3. Select Functions.php from the right sidebar
  4. At the end of your file be sure you have a PHP closing tag ?>
  5. After your closing tag you can insert the following code:

    function cc_mime_types( $mimes ){
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
    }
    add_filter( 'upload_mimes', 'cc_mime_types' );
  6. Click Update
  7. Hover over Media and click Add New
  8. Upload your SVG file.