SVG Logo

A link only to see what happend is nice.
If your svg has no implementation of widht and height – the wordpress will interpret it as 0x0 px image.
If you define a width for it :
.logo img { width: 350px } it will be shown.
or did you use the replacement option with svg Support – means is it a real svg in your html code?

Well these advanced settings might be nice to have.
See here and look what happens to the svg on shrinking – or on making the screenwidth smaller !
https://webers-testseite.de/cynthia/

You can handle path of the svg on hovering f.e to color them different etc.

Aha .
on advanced settings you can set automatically set class – but i prefer to have: css class to target
i use a bit meaningful like: change-to-svg

to have this class added to the enfold logo – i put this to functions.php of my child-theme:

function add_class_to_logo_img(){
?>
<script>
  (function( $ ) {
      $(function() {
		$('.logo img').addClass('change-to-svg');
      });
  }(jQuery)); 
</script>
<?php
}
add_action('wp_head', 'add_class_to_logo_img');

to force the svg to shrink with the header – this comes to quick css:

.logo,  .logo a {  display: inline-flex}

.logo svg { width: 450px;
 transition: all 1s ease-in-out;
}

transition all is for the effects i set in quick css

• This reply was modified 6 years, 6 months ago by Guenni007.