Add an SVG Logo to a Genesis Template

This Spring, I published a tutorial on how to add a Retina logo to Genesis templates. Although Retina logos look great, they’re kind of a pain to set up. You have to create multiple logo sizes and write several media queries. I have moved on to a simplified method: SVG (Scalable Vector Graphics) logos for Genesis templates.

One reason I like this method is that most logos are already in vector format when you get them, usually Adobe Illustrator files. You can use the Save As command in Illustrator to save a logo as an SVG file. See this excellent post by Chris Coyier for more detailed info on working with SVG files.

The second reason I like SVG logos better is because you don’t have to create multiple logo sizes. SVG logos can be scaled up or down with no loss of quality.

Note: In order to perform this procedure, you need a logo in vector format and Adobe Illustrator to convert the logo to SVG format.

Browser Support: Safari, Chrome, Firefox, Opera, Internet Explorer 9 >

1. Open the logo with Adobe Illustrator.
2. Go to File > Document Setup and change Units to Pixels.
3. Select all layers of the logo and group them.
4. With the logo group selected, from the menu select Object > Transform.
   
5. In the transform palette, click the chain symbol to lock the width and height and enter the width ( W ) for the logo.
6. Shrink the Artboard. Go to File > Document Setup > Edit Artboards. Shrink the artboard so it’s the exact size of the logo; eg, the artboard should touch all edges of the logo.
   
7. Export the logo as SVG: From the Illustrator menu, select File > Save As > Format: SVG and save the image in /wp-content/themes/your-theme/images
8. Leave the default in the SVG dialog box: SVG 1.1 and Type: Convert to Outlines.
   
9. Click OK.
10. Save logo as PNG for Internet Explorer 8 or less. From the Illustrator menu, select File > Save for Web > PNG 24 and check the Transparency option if you want the background to be transparent and save the file in
    /wp-content/themes/your-theme/images
11. Add support for custom header (so you can add your logo and relative code). Open your theme’s functions.php file and search for this line:
    add_theme_support( ‘custom-header’
    If you can’t find it, add the code below:

    //* Add support for custom header
    add_theme_support( 'custom-header', array(
    	'header-selector' => '.site-title a',
    	'header-text'     => false,
    	'height'          => 114,
    	'width'           => 338,
    ) );

12. Change the width and height in the custom-header array to match your logo size.
13. In WordPress admin, go to Appearance > Header and upload the png version of your logo.
14. Add css styles for the logo.svg. Open your theme’s style.css and add the following line before the media queries at the end of your style.css

    .header-image .site-title > a {
            float: left;
            min-height: 114px;
            width: 100%;
            background: url(images/logo.svg) no-repeat left top !important;
            background-size: 338px 114px !important;
    }

15. Adjust the min-height and background-size to match your logo dimensions.
16. Add hover state. After the code in the step above, add the following code (this will make the logo fade a bit when you hover over it):

    .header-image .site-title > a:hover {
            opacity: 0.7 !important;
    }

17. Responsive Media Queries. If your template uses a smaller logo for smaller screens, you need to replace that logo code with code for logo.svg. For example, use the following code for a smaller logo in screens smaller than 1025px. You will need to change the min-height and background-size rules to match your smaller logo.Note: You don’t need to create a smaller logo svg file. SVG files can be scaled up or down without any loss of quality.

    @media only screen and (max-width: 1024px) {
    .header-image .shrink .site-title > a {
        float: left;
        min-height: 57px;
        width: 100%;
        background: url(images/logo.svg) no-repeat center top !important;
        background-size: 172px 57px !important;
        margin-top: 4px; }
    }

18. Create a stylesheet called lte8.css in your theme’s directory.Note: Most modern browsers support svg images, but Internet 8 or below doesn’t. If you don’t need to support IE8 or below, you can skip the IE8 stylesheet steps.
19. Add the following css code to lte8.css:Note: You already saved a copy of logo.png in your theme’s images folder when you exported the logo as a .png file.

    .header-image .site-title > a {
            float: left;
            min-height: 114px;
            width: 100%;
            background: url(images/logo.png) no-repeat left top !important;
            background-size: 338px 114px !important;
    }

20. To add the lte8.css stylesheet to your theme, add the following code to your theme’s functions.php:

    add_action( 'wp_enqueue_scripts', 'child_theme_scripts' );
    function child_theme_scripts() { 
     
        global $wp_styles;
     
         /**
         * Load our IE specific stylesheet for a range of older versions:
         * <!--[if lte IE 8]> ... <![endif]-->
         * NOTE: You can use the 'less than' or the 'less than or equal to' syntax here interchangeably.
         */
        wp_enqueue_style( 'my-theme-lte8', CHILD_URL . '/lte8.css', array(), PARENT_THEME_VERSION );
        $wp_styles->add_data( 'my-theme-lte8', 'conditional', 'lte IE 8' ); 
       
    }

21. Test the site to verify that SVG logo is loading. If you have access to IE8, test to make sure the .png logo shows up.