How to insert SVG Logo?

Comments

• Air

  October 2019 Posts: 10,970

  Hey Marius:-)
  
  Please send me a live link to your website where you have added the SVG logo. I will check what could be wrong.
  
  With kind regards.
• MLG76

  October 2019 edited October 2019 Posts: 89

  Hi Air,
  
  thank you very much for your ultrafast response.
  
  The site is abc-abc.photo
  
  The logo should actually look like in the attached file with the hand-writing font. It does with macOS preview after export from Adobe XS. However, it doesn't in SVGOMG, though the font is listed in the file source code. Maybe there is already one fault?
  
  The file I've converted yesterday for test purpose with an online tool showed up in WordPress with my custom font style. However, that file showed up on the website detached somewhere with a distance of 200 px from the top. I blamed the online converter for this and thus tried it new following your blog entry.
  
  What I noticed: The file seems to be there also on white background pages. However, the color there seems to be white as well so that it's invisible.

  Post edited by MLG76 on October 2019
• Air

  October 2019 Posts: 10,970

  OK :-)
  
  Let's start with disabling logo color variants, so you will be sure you can see your logo and it is not hidden.
  
  Go to Appearance → Customize → Header Settings → Logo → Use logos from header variants → Disable.
  
  Next thing is your SVG : you have to export it as shapes. Currently, you have exported it as text, and even if it will be visible, it will not look like you intended, as used font will be missing.
  
  I don't know how to do it in your program, but you will find some info on Google.
  
  With kind regards.
  
  
  
• MLG76

  October 2019 Posts: 89

  I understand.
  
  Disabled "Use logos from header variants" and now at least the logo shows up also on white background pages! Great. I'll have to admit the admin of color variants confuses me. Didn't I need this setting to be enabled in order to make the logo white on the black backgrounded pages?
  
  Regarding the SVG I will fix that fault. Thanks for your advise. ;-)
  
  
• MLG76

  October 2019 edited October 2019 Posts: 89

  Brief addition: Uploaded the correct SVG logo. Should have used Adobe Illustrator from the beginning. So that problem is fixed.
  

  Post edited by MLG76 on October 2019
• MLG76

  October 2019 edited October 2019 Posts: 89

  One more addition: Where do I find the setting to alter the color of the SVG logo in the 'sticky header' upon scrolling down?
  
  Black logo on white background is nice, but with default setting once I scroll down and the transparent background pops up, the menu text changes to white (which is nice), but my SVG logo remains black.
  
  

  Post edited by MLG76 on October 2019
• MLG76

  October 2019 edited October 2019 Posts: 89

  Muring Air,
  
  I suppose I need to add custom CSS [1].:-/
  
  Thus changed the layer name in the SVG from 'Ebene 1' to 'Ebene1' (to prevent eventual spacing problems in code) and added
  
  .a13-dark-variant .svg-logo path.Ebene1{
  fill:#86bc25;
  }
  
  for test purpose. However, that doesn't do anything upon scrolling down in sticky version. :-(
  
  [1] https://support.apollo13.eu/discussion/5838/svg-logo-change-in-header-using-variants
  
  

  Post edited by MLG76 on October 2019
• Air

  October 2019 Posts: 10,970

  MLG76 said: Didn't I need this setting to be enabled in order to make the logo white on the black backgrounded pages?

  You can read about header color variants here to know them better https://rifetheme.com/apollo13-framework/docs/customizing-the-theme/header/variant-light-dark-overwrites/
  
  
  I have seen your website and it almost looks as it should.
  
  Now let's add this custom CSS:

  .a13-sticky-variant .logo svg path {
      fill: white; /* for color */
  }
  .logo svg path {
      transition: fill .5s; /* for animation */
  }

  We should be good with it :-)
  
  With kind regards.
• MLG76

  October 2019 edited October 2019 Posts: 89

  Air, the others had been right: You're the man! PERFECT! Now it works as it should. 🙏
  
  A BIG THANK YOU! : -)
  
  PS: What confused me was, that you can set for the logo in the sticky menu an individual size, but not the color, even though you can for the menu text.
  
  

  Post edited by MLG76 on October 2019
• Air

  October 2019 Posts: 10,970

  Thanks for the kind words and I am glad all is good now :-)

  MLG76 said: What confused me was, that you can set for the logo in the sticky menu an individual size, but not the color, even though you can for the menu text.

  Typically you can not change colors in the image logo, so there can't be a setting for it. Even in the case of SVGs - there are so many possibilities in creating them, that each case has to be taken individually.
  
  With kind regards.