This article has been archived.
Utility Pro is no longer under development. Some of the content may be relevant but there are better options for adding an SVG logo to a WordPress theme now.
This post will show how to add an 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. An 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.
Using an 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 .
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 the 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.
With this code:
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.
With this code:
This can easily be adapted to any WordPress or Genesis theme that is using Sass.
Recommended Courses to get up to speed with Sass
Here are some recommended courses I’ve taken recently to improve my workflow and get comfortable using these tools on Linkedin Learning and Treehouse.
Guil Hernandez at Treehouse.com CSS to Sass.
Sass Essential Training with Ray Villalobos
Wrapping Up
As I mentioned above, using an SVG is the preferred way to add a logo to your WordPress site. When using PNGs for graphics and JPGs photos for the background image, the imgRetina() mixin is a good option.
Resources:
Wikipedia.org: Scalable Vector Graphics
[shared_counts location="shared-count-icons" style="fancy"]