Use a vector (svg) image as site logo

  • Resolved edpressed

    (@edpressed)


    8 years, 3 months ago

    I’ve just started to build my first website using the VEGA theme. It’s a fantastic theme that perfectly suits my needs. Now I would like to add my site logo as a vector image, using the SVG Support plugin. I got it working in the footer column 1 widget with this code:

    <embed src="https://www.snellecursus.nl/ontwikkelomgeving/wp-content/uploads/2016/11/Snelle1.svg" type="image/svg+xml" />

    But when I select the svg image in Customizer->Site Identity->Logo it doesn’t work.

    After searching in the various theme files I found header-logo.php and changed this code:

    <img src="<?php echo esc_url($vega_wp_logo_image) ?>" alt="<?php bloginfo( 'name' ); ?>" />

    into this:

    <div style="width: 165px; height: 45px;"><embed src="https://www.snellecursus.nl/ontwikkelomgeving/wp-content/uploads/2016/11/Snelle1.svg" type="image/svg+xml" /></div>

    Now it shows the svg image as logo, but sometimes the logo disappears or it loads very slowly.
    Is there a more elegant way (using the VEGA child theme) to achieve this?

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author lyrathemes

    (@lyrathemes)

    Thanks for the kind words, we appreciate it ?? I am sorry for the delayed response, the weekend was a bit crazy this time!

    I see you’re using a PNG file for your logo now? Do you want to continue to try to use the SVG?

    Thread Starter edpressed

    (@edpressed)

    Thanks for your response. I recognize your perception of the weekend…
    I’ve used the PNG logo from the start, but I’m still looking for an opportunity to add my logo as an SVG image. And preferably in the simplest way possible without major modifications. For example in the child theme, or in the customer’s CSS box. Any clue? Kind regards.

    Theme Author lyrathemes

    (@lyrathemes)

    To be honest – I have not tried this so I am not quite sure. You could try the tip mentioned here https://css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/ and then try uploading the SVG logo under Site Identity to see how it goes.

    Best of luck!

    Thread Starter edpressed

    (@edpressed)

    Thanks for your answer! I’ve read the post: a lot to try and to experiment. I need some time to check whether this will work. And if I succeed I will surely let you know and share my findings.

    Kind regards.

    Thread Starter edpressed

    (@edpressed)

    Finally it is working now! With the SVG Support Plugin you don’t need to change the code in header-logo.php. Just select your SVG in Site Identity. The most important thing is to resize your SVG before you select it. I’ve used Inkscape for that purpose.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Use a vector (svg) image as site logo’ is closed to new replies.