How To Add An SVG Logo

If you would like to add an SVG logo to your header area or footer area please follow these steps.

  1. Install the SVG Support plugin for WordPress (This allows you to upload SVG images via the media library, by default WordPress does not support SVG images).
  2. Create your SVG logo, ensure that the pixel size image is suitable for the header area. We recommend the SVG logo should be around 70 pixels height by 145 pixels width. If you use Illustrator to create SVG images the Artboard settings should look like this.
  3. Ensure when you export your SVG image using Adobe Illustrator that your export settings look the same as the screenshot below.Note: Illustrator CC added an option to make the SVG file “responsive”. This is slightly misleading: all the option does is remove the width and height attributes from the SVG root element. We recommend disabling this option when creating your SVG image.
  4. Upload your SVG image either via the Media Library or if you are uploading the image to the header area go to  Appearance > Content> Header > Current Header > Add New Image, once uploaded skip the cropping option and Save Changes.

If you wish to add your SVG logo in the “Footer Column 1 (wide)” widget area, create a Text Widget and place the following HTML code into the Text Widget, replace the URL to the SVG image with your own.

<embed src="http://yourdomain.com/footer-logo.svg" type="image/svg+xml" /> 

The text widget should look like this.

Was this article helpful?

Related Articles