• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Jackie D'Elia Design

  • Articles
  • About Me
  • Contact
Home » Articles, Tips and Tutorials » Adding a SVG Logo to Utility Pro Theme

Adding a SVG Logo to Utility Pro Theme

February 22, 2016 by Jackie D'Elia

This post will show how to add a SVG (Scalable Vector Graphics) logo to the Utility Pro theme.

TIP: Before I begin, I just want to clarify that while this post is specific to the Utility Pro theme, it can be easily adapted to any WordPress or Genesis theme that is using an image logo.

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.

  1. configure Utility Pro to use an image vs dynamic text
  2. create a SVG version of the logo
  3. modify the style.css to 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;
}
}
view raw utility-pro-styles.css hosted with ❤ by GitHub

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;
}
}
view raw style.css hosted with ❤ by GitHub

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.

This portion of the post assumes you have the Professional developer version of Utility Pro installed and are comfortable working in Sass.

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;
}
}
view raw original_header-scss hosted with ❤ by GitHub

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;
}
}
view raw _header-scss hosted with ❤ by GitHub

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

TweetLinkedInFacebookPinShares4
Previous or Next Article
Previous Post: Embracing My Authentic BrandEmbracing My Authentic Brand
Add Retina Ready Background Images using a Sass Mixin Next Post: Add Retina Ready Background Images using a Sass Mixin

Related Posts

  • Add Retina Ready Background Images using a Sass Mixin
  • Adding a Retina Ready Logo to the Utility Pro Theme
  • Using SVG Animation in WordPress

Filed under: Design, Genesis Tutorials, WordPress Tagged with: Utility Pro theme

Footer

Recent Articles

  • AMP Stories in WordPress
  • Enabling AMP in WordPress
  • Adding SVG icons and graphics to your WordPress theme
  • Enhancing the SVG Social Icon Menu in Twentyseventeen

LinkedIn Learning

This is my favorite place for continuous learning. You won't be disappointed.


Free one month trial

AMP Powered

This website is powered by AMP. Now creating user-first experiences is easier. The AMP for WordPress plugin enables AMP on WordPress sites.

Connect

  • Twitter
  • Linkedin
  • Github
  • Dribbble

This website contains affiliate links and I may earn a commission if you use them. Learn More about affiliate links on this site.


Copyright © 2014 - 2021 D'Elia Media LLC, All Rights Reserved. | Privacy Policy

Hosting by WPEngine | Powered by Genesis Framework and AMP Project

This Site Uses Cookies

This site, like many others, uses small files called cookies to help us improve and customize your experience. Learn more about how we use cookies in our cookie policy.