Use SVG files in Wordpress

Using SVG Images in WordPress

RASREYE Website Leave a Comment

Last week, after much research, we decided to change our company logo from a PNG file to an SVG.  I won’t get into why you should be using SVG on your WordPress site, but there is a great discussion (short and sweet) available at CSS-Tricks talking about the advantages of using SVG.

For those of you running your website using WordPress, you know that out of the box, WordPress does not allow for SVG files to be uploaded to Media section as it does with PNG, JPG, or the many other formats.  But thanks to a little research, we found a quick fix for that!

Allowing SVG Upload in WordPress

  1. Start by hovering over Appearance > Click on Editor
  2. Find and click on the functions.php file on the right hand side
  3. Paste the following code right before the last ?> in the editor window on the left (code courtesy of CSS-Tricks)
    function cc_mime_types( $mimes ){
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
    }
    add_filter( 'upload_mimes', 'cc_mime_types' );
  4. Click Save.  Now go ahead and upload your image to your media folder and you can use it as you would use any other image within your site.

A quick note:  SVG images will work great for icons, logos, or images that do not have too many colors.  For example, a logo with 3 – 4 colors is the perfect candidate to be used as an SVG; A picture of your dog – not so much!

Creating an SVG File

The easiest and simplest way to create an SVG file of your logo is to grab a copy of your logo as an EPS, AI, or CDR file.  Open the file in Illustrator and follow the steps below:

  1. Go to File > Save As
  2. In the Save As Type Select Box, select SVG, name your file, and click save
  3. In the Window that pops-up next, select the following settings:
    • SVG Profiles: SVG 1.1
    • Fonts — Type: SVG, Subsetting: Only Glyphs Used
    • Images: Embed
    • CSS Properties: Style Elements
    • Decimal Places: 1
    • Encoding: Unicode UTF-8
    • The only two options that should be checked are: Output fewer <tspan> elements & Use <textPath> element for Text on Path
  4. Click OK and you’re all set!

SVG Settings in Illustrator for the web

Don’t have Illustrator? Send us a copy of your logo in EPS, AI, or CDR and we’ll be glad to help you create an SVG version of your Logo!