The following will help you add an SVG logo file to your WordPress site using the built in “customizer” on your WordPress site.1
4 Steps to Add an SVG Logo to Your WordPress Site
If you have started a WordPress blog and want to add a logo to it, the following steps should allow you to add an SVG logo to your header section without messing with the functions.php file on your WordPress site.2
If you have a WordPress theme that allows you to add a widget to the “Header” section of your blog, this should work for you.
I’m using the free SuperMag theme which is very customizable.
It allowed me to add a widget to the header and also adjust the location of the widgets in the header just using the “customizer” in WordPress.
That said, I can’t promise this will work (or look good) for every theme.
1) Install an SVG Plugin
I initially chose SVG Support, but then changed my mind. SVG Support doesn’t seem to be “supported” itself much, actually.
I thought maybe “Safe SVG” is “safer”… I thought SVG Support wasn’t a Safe SVG plugin because it wasn’t supported.
Ha ha. Whatever. They’re probably both fine.
Just install and activate whichever one you choose.
This will allow you to upload and view your SVG logo file in the “Image” widget.
2) Upload the SVG Logo File You Want to Use to WordPress
I’m assuming you already have your SVG logo file cropped to the right size, etc.
If so, just add it to the “Media” section in your WordPress site.
3) Add a Widget to the Header Section of Your Site
Once you have your SVG logo uploaded, you’ll create a place for it in the header section of your site.
From your Dashboard in WordPress go to Appearance > Widgets
In the Widgets area, there will be two columns:
- On the left are the “Available Widgets“
- On the right are the areas of your WordPress site where you can put Widgets.
Find the “Header Area” on the right side.
Find and drag an “Image” widget from the “Available Widgets” column on the left-side to the “Header Area” on the right side.
Click the “Add Image” button from within the new “Image Widget” that you dragged to the “Header Area”.
Find the SVG file you uploaded in Step 2 above from your media files. Click “Add to Widget” in the bottom right hand side of the “Add Image” screen.
You can add a link to your homepage here if you want in the “Link to:” field. This should have the effect of giving your visitors a way to always get back to the “home” page if you don’t have another “home” menu option in your nav bar.
4) Adjust The Header Widget Location
This will depend on your theme.
The free “SuperMag” theme allows you to change the location of the logo and the “advertisement” option it provides.
This was a nice bit of flexibility I didn’t expect, but it’s great because it allows me to put the logo exactly where I wanted it, in the upper left-hand side of the page.
If you are using SuperMag, you will need to disable the “logo” option under “site identity”.
Then disable the “Header Advertisement” under “Header Options” > “Header Advertisement”.
Then move the SVG logo to the left (if you want it there) by going to “Header Options” > “Header Placement” and play around with where you want to put your SVG logo file.
Hope this works for you. Good luck!
- I used this workaround when I had a problem cropping my SVG file.
I uploaded an SVG (scalable vector graphics) file to my WordPress site.
I wanted to use an SVG instead of a PNG so that my logo wouldn’t be pixelated…
But when using the appearance > customize option built into WordPress, it kept asking me to “crop” the SVG:
Then it threw an error when I hit the “crop” button… “There has been an error cropping your image.”
I couldn’t skip the cropping process.
- I couldn’t figure out how to do this. I tried editing my php files from within “Customizer” but I could not find the “flex-width” lines of code that I needed to edit. The “flex-width” and “flex-height” lines need to be edited to allow the SVG logo to change size as needed. WordPress doesn’t allow this out of the box. This was referenced in several tutorials. However, I am not sure that “SuperMag” theme allows this change.