0

First time posting here, so treat me gently. :)

I have an SVG image on my site which has a transparent background - 

<img class="img-responsive center-block" src="images/pritchservices.svg" alt="Pritch Services Logo" />

Works beautifully on my site. However, due to the transparency, when that image loads in google image search results, due to the transparency, looks terrible.

I have an alternative image (using for fb Open Graph crawler) which is here -

Pritch Services Full Logo

In my crazy mind, this is what I had as a plan:

  • Redo the SVG in Illustrator to include the background color (as per the fb OPen Graph image) - this would then mean the image result in Google would be as expected

  • Have some CSS within my site to set the background color of the SVG to transparent, so it displays nicely (as it currently does on the site)

  • I am assuming I can't just put the SVG markup inline, as although this would give me what I wanted on the page, it wouldn't load the image AT ALL on google image search results?

Is this the way to go, if so, any suggestions on how to implement please; or is there an alternative solution I haven't thought of? Or am I just being too picky?!

Thanks in advance everyone...

mtngeekuk
  • 31
  • 1
  • 1
  • 6
  • you wanted an svg that can change the background color using css? you need a clip path – Obink Dec 17 '16 at 08:51
  • Many thanks for this - will check it out. Am I able to do this without having to output the whole SVG inline on the page? – mtngeekuk Dec 17 '16 at 14:30

1 Answers1

0

You can't include an SVG via <img> and style it with CSS in your parent document.

  1. You can't style the contents of an <img>, even if it is an SVG
  2. CSS doesn't apply across document boundaries

You have a few options.

  1. Include the version with a background in your page. And then hide it and replace it with the transparent-background version via CSS.

    <div class="logo">
  <img src="logo-with-background.svg" ... />
</div>

.logo img {
  display: none;
}
.logo {
   background-image: url(logo-without-background.svg);
}

  2. Include the background version using <object> then use the DOM to find the background element and hide it.

    var object = document.getElementById("myObject");
var svgDoc = myObject.contentDocument;
svgDoc.getElementById("bg").setAttribute("display", "none");

  3. Apply a clipping path to the backgrounded version as @Obink suggests. It would work, but it is not the easiest solution though. And it won't work on older browsers that don't support clip paths.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thanks for this - looking at Option 2... the class in the SVG I want to hide / make transparent is "ct0" - so would something like this on the HTML page work? – mtngeekuk Dec 17 '16 at 20:34
  • Almost. You'll need to wait for the SVG to be loaded and its DOM to be ready. See: http://stackoverflow.com/questions/2753732/how-to-access-svg-elements-with-javascript – Paul LeBeau Dec 18 '16 at 02:18
  • So, still not working for me - any help appreciated!! – mtngeekuk Dec 18 '16 at 22:55
  • Did you check your browser console for errors?. Are you including the jQuery script? The function call `getElementByClassName()` does not exist. You probably meant `getElementsByClassName()`. `getElementsByClassName()` returns a collection, so you'll need to loop through them all or use `delta[0].setAttribute()`. Finally, a `fill`attribute will get overridden by the CSS rule for `.st0 {}` (if you have one). So you may need to add or change the class instead. Or alternatively remove the class: ie. `delta[0].removeAttribute("class");`. – Paul LeBeau Dec 19 '16 at 05:30
  • HI - including the jQuery reference: – mtngeekuk Dec 19 '16 at 14:05
  • This is the current code (alerts adding for debugging purposes): $(document).ready(function(){ alert('Appears when document is ready.') var a = document.getElementById('sp-test'); alert('1 ' + a); var svgDoc = a.contentDocument; alert('2 ' + svgDoc); var delta = svgDoc.getElementsByClassName("st0"); alert('3 ' + delta); delta[0].setAttribute("fill", "red"); alert('4 - colour changed?!?'); }); – mtngeekuk Dec 19 '16 at 14:06
  • Console says: jQuery.Deferred exception: Cannot read property 'setAttribute' of undefined TypeError: Cannot read property 'setAttribute' of undefined at HTMLDocument. - referencing the line delta[0].setAttribute("fill", "red"); – mtngeekuk Dec 19 '16 at 14:07
  • This thread is getting too long. You should consider asking a new question. Include all your code and a sample SVG. You need to work out why `delta[0]` is undefined. What does the alert before it display? – Paul LeBeau Dec 19 '16 at 15:20
  • The code looks okay. And the same code worked for me. – Paul LeBeau Dec 19 '16 at 15:24