Using SVG for Wordpress Logo

Question

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:

//* 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%;
}

Take a look at this, it may help you: http://blog.teamtreehouse.com/perfect-wordpress-inline-svg-workflow — ctwheels, Aug 12 '14 at 19:17
@ctwheels Thank you for the link, much appreciated. I tried it and seem to get an error 'Warning: Division by zero' — Tom25, Aug 12 '14 at 21:16
The divide by zero, can you locate it? Check in inspector which line fails — ctwheels, Aug 13 '14 at 00:26
@ctwheels Yeah, it was where I inserted this function (line 63 to be exact). — Tom25, Aug 13 '14 at 13:32
Then you'll likely have to use a plugin for it. The link I shared above was a "hack" to insert svg into a wordpress. Try looking for an svg plugin for it. https://wordpress.org/plugins/tags/svg — ctwheels, Aug 13 '14 at 13:44
Also, you can try this php code: `function cc_mime_types( $mimes ){ $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter( 'upload_mimes', 'cc_mime_types' );` — ctwheels, Aug 13 '14 at 13:45

Gray Ayer · Answer 1 · 2016-05-11T19:43:01.557

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:

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.

score 0 · Answer 2 · answered Nov 07 '16 at 09:48

For your functions.php file or a functionality plugin:

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Without this, SVG files will be rejected when attempting to upload them through the media uploader.

References:-

https://css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/

https://www.sitepoint.com/wordpress-svg/

Fanky · Answer 3 · 2021-07-20T08:24:51.950

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,
    ) );

Using SVG for Wordpress Logo

3 Answers3