This post will show how to add a SVG (Scalable Vector Graphics) logo to the Utility Pro theme.
Earlier this month, I wrote about adding a Retina ready logo to the Utility Pro theme. That method uses a PNG file for the logo. In my opinion, the best approach for creating a logo that will look sharp and crisp on any device is to use an SVG (Scalable Vector Graphics) file. A SVG file is a vector file in XML format. The major advantage of SVG graphics is that they do not lose any image quality if they are zoomed or resized.
Heads up: There are a few affiliate links here, so thanks in advance if you use them.
Using a SVG file means it will always look sharp on any device, even as display densities increase over time. It’s more future proof. All of the major browsers support SVG files. That said, I need to mention that IE 8 does not support SVG according to http://caniuse.com/#feat=svg-css .
My advice: Forget about Internet Explorer 8. This is just my opinion, but it is time to move on and leave this legacy browser behind for a lot of reasons. Microsoft no longer supports Windows XP or IE 8, so I am not providing a fallback in my code. Haven’t we wasted enough time dealing with Internet Explorer?
Now, if you need to add support for IE 8, then this post by Chris Coyier’s post provides the appropriate fallbacks: A Complete Guide to SVG Fallbacks
Adding a SVG Logo to Utility Pro (Standard version)
Here are the steps for adding an SVG logo to the standard version of Utility Pro which includes modifying your style.css. In my SVG sample of Utility Pro theme, the logo size is 300px by 60px.
- configure Utility Pro to use an image vs dynamic text
- create a SVG version of the logo
- modify the
style.cssto serve the SVG logo.
Configure Utility Pro to use an image vs. dynamic text
By default the Utility Pro theme uses Dynamic Text in place of a logo, which is created from your Site Title and Tagline. You’ll need to switch that to Image from Dynamic Text.
If you want to use an Image logo instead of Dynamic Text, here’s how to get started:
Go to the Appearance > Customize
Click on Site Identity
Select Image logo from the drop down
Save your changes
Changing this setting will automatically “include” the file logo.png, that ships with the theme. That file is stored in the images folder inside your Utility Pro theme folder.
Create a SVG Logo file
If you don’t have an SVG file, you can create one from your original artwork in a vector based application like Adobe Illustrator or Affinity Designer (my personal favorite – but only available for Mac). I created mine sized at 300px by 60px which is the size I want the logo displayed. In my SVG file it sets the width and height to 100% width="100%" height="100%" and viewBox to viewBox="0 0 300 60". This is how Affinity Designer exported the SVG for me, and if you want to dig in and understand more about how it works – I included a resource link at the end of this post on the SVG coordinate system.
Upload the file to the images folder inside your Utility Pro theme folder. In my example I named the file logo.svg
Update the style sheet
This next step requires making a change to your style.css file. Make sure you make a backup of it first, and know how to access your site via FTP or through your web host file manager. Here are some tips on how to do this safely.
I replaced this code in my style.css.
| /* Logo, hide text */ | |
| .header-image .site-title > a { | |
| background: url(images/logo.png) no-repeat center; | |
| float: left; | |
| min-height: 60px; | |
| width: 100%; | |
| } | |
| @media screen and (min-width: 1023px) { | |
| .header-image .site-title > a { | |
| background: url(images/logo.png) no-repeat left; | |
| } | |
| } |
With this code:
| /* Logo, hide text */ | |
| .header-image .site-title a { | |
| background: url(images/logo.svg) center center no-repeat; | |
| float: left; | |
| min-height: 60px; | |
| width: 100%; | |
| } | |
| @media screen and (min-width: 1023px) { | |
| .header-image .site-title a { | |
| background-position: left center; | |
| } | |
| } |
That’s all you need to do if you are using the standard version of Utility Pro. If you want to make this change in the developer version, this next section covers that.
Adding a SVG Logo to Utility Pro theme (Developer version)
If you are using the developer version of Utility Pro, you’ll need to modify the _header.scss partial file instead of your style.css file.
I replaced this code in my _header.scss partial.
| /* Logo, hide text */ | |
| .header-image .site-title > a { | |
| background: url(images/logo.png) no-repeat center; | |
| float: left; | |
| min-height: 60px; | |
| width: 100%; | |
| @include media($medium-screen-up) { | |
| background: url(images/logo.png) no-repeat left; | |
| } | |
| } |
With this code:
| .header-image .site-title a { | |
| background: url(images/logo.svg) center center no-repeat; | |
| float: left; | |
| min-height: 60px; | |
| width: 100%; | |
| @include media($medium-screen-up) { | |
| background-position: left center; | |
| } | |
| } |
This can easily be adapted to any WordPress or Genesis theme that is using Sass.
Recommended Courses to get up to speed with Sass
I’d be lost without my subscriptions to Lynda.com (Free trial) and Treehouse.com (Free trial). Here are some recommended courses I’ve taken recently to improve my workflow and get comfortable using these tools.
Sass: Guil Hernandez at Treehouse.com CSS to Sass.
Sass and Grunt: WordPress: Developing with Sass and Grunt.js with Morten Rand-Hendriksen
Wrapping Up
As I mentioned above, using a SVG is the preferred way to add to a logo to your WordPress site. When using PNGs for graphics and JPGs photos for background image, the imgRetina() mixin is a good option.
Resources:
Wikipedia.org: Scalable Vector Graphics
A Complete Guide to SVG Fallbacks
Understanding SVG Coordinate Systems
