Using SVG for WordPress Logo

1 Views

I am attempting to use an SVG file for the logo of a site in WordPress, as you can see from the code below I have tried this be calling in the .svg file. Unfortunately, I can not get this to work… 

//* Add support for custom header
add_theme_support( 'custom-header', array(
    'header_image'    => '/images/tgoc.svg',
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'height'          => 110,
    'width'           => 320,
) );

I have also actioned the following in funtions.php:

Read More
//* Enable SVG file upload
function custom_mtypes( $m ){
    $m['svg'] = 'image/svg+xml';
    $m['svgz'] = 'image/svg+xml';
    return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' );

I know you can also insert the svg code, but my main question is where to insert this code? I would like to try and use Modernizr as well for back up.

Here is the CSS: 

/* Logo, hide text */

.header-image .title-area {
    padding: 0;
    width: 340px;
    height: 340px;
    background: url(/images/logo.png);
    display: block;
}

.no-svg .header-image {
    // fallback
    background-image: url(/images/logo.png);
}

.header-image .site-title a {
    float: left;
    min-height: 110px;
    width: 100%;
}
Post Views: 1

Related posts

Leave a Reply

3 comments

  1. First install the SVG Support plugin (and restrict it’s use to adminstrators for security reasons). Then you’ll encounter an error after uploading SVGs in which the 2nd step wants you to crop the image, but you can’t do that for SVGs. So do this:

    to provide a button to “skip cropping” on the 2nd screen after selecting your svg image, which must be already cropped as the exact size you need.

    All you need to do is take that array you defined above for custom header support, where you define the height and width, then add this:

    'flex-width'             => true,
'flex-height'            => true,

    so for my own custom theme the full snippet is:

    function hikeitbaby_custom_header_setup() {
    add_theme_support( 'custom-header', apply_filters( 'hikeitbaby_custom_header_args', array(
        'default-image'          => '',
        'default-text-color'     => '000000',
        'width'                  => 190,
        'height'                 => 84,
        'flex-width'             => true,
        'flex-height'            => true,
        'wp-head-callback'       => 'hikeitbaby_header_style',
        'admin-head-callback'    => 'hikeitbaby_admin_header_style',
        'admin-preview-callback' => 'hikeitbaby_admin_header_image',
    ) ) );
}
add_action( 'after_setup_theme', 'hikeitbaby_custom_header_setup' );

    which will provide you with a screen like this:
    enter image description here

    I’ve found that sometimes if you just click onto “skip cropping” and you’ve already had an image designated there before, you may encounter the site freezing. re-implementing svg header on dev site. To fix this, it’s necessary to remove the pre-existing header image, save that change. Exit the customizer. Then go in and reapply the image, clicking “skip cropping” for it to not freeze.

    As this question is a year old at this point, I hope this is useful to someone else.

  3. The custom-header support seems to be one thing (Customizer -> Header Image) and custom-logo another. @Gray Ayer’s solution is great, but for the logo, which is set through Customizer -> Site Identity -> Logo and added with the_custom_logo(); in header.php, you should have this in your functions.php:

        add_theme_support( 'custom-logo', array(
        'height'      => 110,
        'width'       => 320,
        'flex-width'  => true,
        'flex-height' => true,
    ) );