SVG links

MWratheDev

New Member
Hello, im a website developer currently im developing a new website on my local machine for a client and i've found something rather odd, im not sure if it's a filter problem or something else but this seems to be the best place to post about it, moderators feel free to relocate to the appropriate section if need be.

Adguard automatically blocks svg's that are within hyperlink tags. That is the code i am using is the following:

Code:
<a href='http://...'>
  <svg class='footer-icon'>
    <use xlink:href='img/icons.min.svg#fIcon2'></use>
  </svg>
</a>
This is what happens:

Chrome on the left is running in incognito mode with only one extension enabled (a measuring tool).
Chrome on the right is running normally with adguard enabled.

gpg3Q.png

See the difference? The icons at the bottom inside the footer for facebook and linkedin do not display with adguard running.
I've already checked that it's not the naming scheme of the elements or anything like that.

Furthermore note the Name icon ('Sue Walter') in the upper left hand corner, these icons are all part of the same SVG sprite, however the name is not inside any <a> tags.

Also to anticipate peoples response ("why don't you just use an icon font?") because they're hacky, harder to vertically align and im not looking for backwards compatibility with IE8 and below so why should i?

This is an adguard problem that needs to be fixed as my links are not ads by definition.

Thank you
 

Attachments

avatar

Administrator
Staff member
Administrator
Hi!

Thank you for reporting it!
Need some time to check it.

Do you have this website in public?
 

MWratheDev

New Member
Do you have this website in public?
Negative, i do not develop with a host online as part of the build process, as even with ssh and just uploading the diffs, it would take too long and im a fairly impatient person.

The site will be live, but not for a while yet.
 

avatar

Administrator
Staff member
Administrator
I think I got it.

Please check if Social media widgets filter is on.
I think that the problem is not in SVG but in the links.

Social filter hides share links with a CSS rules like these:
Code:
a[href^="//www.facebook.com/sharer.php?"]
...
Try inspecting these hidden elements, you should see "display: none" style applied (also you should see exact selector which is used).
 
Top