SVG Logo - Font and Hover Colour Not Showing

HTML & CSS
1

Issue 1:
I have an SVG logo with Gotham font text underneath of a logo. I exported it using Sketch. When I open it in Chrome for Mac it loads fine for me. However, when I test it on a Windows 10 machine it shows Times New Roman as the font.

Here is the CSS code for my Gotham font:

@font-face {
font-family: 'gotham';
src: url('fonts/gotham.eot');
src: url('fonts/gotham.eot') format('embedded-opentype'),
url('fonts/gotham.woff') format('woff'),
url('fonts/gotham.ttf') format('truetype'),
url('gotham.svg#gotham') format('svg');
}

Issue 2:
I have exported the logo 2x using Sketch, once as a white logo and another as a green logo. This logo should change from white to green on hover. This works fine for me in macOS Chrome, but does not work on Windows 10 Internet Explorer.

Here is the CSS code for the SVG hover effect:

.page-id-77 .showcase-emblem img:hover, .page-id-77 .showcase-emblem-bottom img:hover {content:url(../images/nike-green.svg);}
2

How are you including the svg in your page?
Is it through an <img> tag, or in-line in <svg> tags?

3 
<img src="/wp-content/themes/theme/assets/images/nike-white.svg">
4

To get hover effects on SVGs I put them in-line, that way you can target the various image elements with CSS.
So you won’t need two versions with different colours, you can set the colour via css and change it on hover like you would an html element.
Not sure it that affects to fonts too, I have not experimented much with svg fonts.

5

Thanks for the replies. Can you show me an example of inline SVG with CSS being used to change the colour on hover? I’ve been trying to figure it out but can’t for the life of me.

6

A simple one here:-

So like html, you can target elements or apply classes for styling.

7

Thank you so much.

2 questions:
How can I show the change in colour for mobile? I’m viewing on IPhone and can’t see the change in colour when I press on it.

This is a simple shape (circle). How do I make it with the Gotham font and complex shapes? Can I export the inline SVG code directly from Sketch?

Thanks again.

8

That will likely be a path element in the svg. Think of the svg elements like you would html elements with regard to css.
So you can target an element by name like circle or path, or apply a class to an element and target that, like I did with the box.

Load the svg file into your code editor and you will see the svg code which you can copy/paste into your html.
I warn you, it can get messy with all that image data in your html. I usually insert the svg file as a php include to separate my image data from my html code and keep thing tidier. Plus it saves on the complications of duplicating the image data elsewhere on site.[quote=“avidrunner, post:7, topic:259381”]
How can I show the change in colour for mobile? I’m viewing on IPhone and can’t see the change in colour when I press on it.
[/quote]

Touch screens don’t do hover, maybe you want the :active state for touch.

9

My apologies if this is too much code to place on forums. Is there a rule for how many lines should be dumped into a third-party service instead?

Here is the output of the SVG. Can I copy it as is? Or do I need to insert “inline” somewhere to achieve the CSS hover effect?

Thanks

<?xml version="1.0" encoding="UTF-8"?>
<svg width="152px" height="85px" viewBox="0 0 152 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
    <title>Group 2</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0.000215636515 60.4907071 0.260057638 60.4907071 0.260057638 0.10793931 0.000215636515 0.10793931 0.000215636515 60.4907071"></polygon>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Brands" transform="translate(-65.000000, -92.000000)">
            <g id="Group-2" transform="translate(65.000000, 92.000000)">
                <text id="View-Website" font-family="HelveticaNeue-Thin, Helvetica Neue" font-size="18.1080008" font-weight="300" fill="#FFFFFF">
                    <tspan x="26" y="84">View Website</tspan>
                </text>
                <g id="Page-1">
                    <path d="M138.561404,46.1459331 L138.561404,41.9859448 L138.561404,37.8721914 L138.561404,33.7584381 L138.561404,29.6446847 L138.561404,25.5769736 L138.561404,21.4632202 L138.561404,17.3494669 L138.561404,13.2357135 C138.561404,11.8644624 138.562744,10.4932112 138.561213,9.12196011 C138.55949,7.75764422 138.568487,6.39313569 138.55547,5.02843451 L129.515326,5.02843451 C129.416545,5.70789542 129.450046,54.8544759 129.545381,55.176194 L146.237955,55.176194 C146.336927,54.5776442 146.309169,46.4898055 146.203689,46.1459331 L138.561404,46.1459331 Z M56.6288652,5.02053605 L44.4886196,5.02053605 C42.210158,20.1256821 39.9339935,35.2142606 37.6578291,50.3028391 C37.6273909,50.3003347 37.5969527,50.2978303 37.5663231,50.2953259 L37.5663231,5.02438896 L25.9680306,5.02438896 C24.6015662,13.5227554 23.2364418,22.0139939 21.8711261,30.5054251 C21.840305,30.5031133 21.8096754,30.5009942 21.7786629,30.4986825 C20.4464654,22.0033984 19.1142679,13.5081143 17.7847505,5.03016832 L6.19181812,5.03016832 L6.19181812,55.1765792 L15.3384001,55.1765792 L15.3384001,47.3480415 C15.3384001,44.7590777 15.3382087,42.1699213 15.3385916,39.580765 C15.338783,36.9983512 15.3372515,34.4155521 15.4235888,31.8308266 C16.7578921,39.6102397 18.0923868,47.3896529 19.428413,55.1783131 L24.3109676,55.1783131 C25.6341676,47.3517017 26.9537304,39.5445476 28.2732932,31.7375861 C28.309283,31.741439 28.3450814,31.7450993 28.3808797,31.7489522 L28.3808797,55.1731116 L45.9693708,55.1731116 C46.3241002,52.6070727 46.6751924,50.0678115 47.0237959,47.546659 C47.8021714,47.4505289 53.7201989,47.4832786 54.0714824,47.5844176 C54.4413352,50.1074965 54.7545232,52.6513812 55.1337563,55.202779 C60.9290739,55.2043202 66.6642808,55.2297494 72.4362432,55.2091363 L72.4362432,38.9330906 C73.1403419,38.831759 73.8143852,38.7346656 74.5211639,38.6329488 C75.9831545,44.1813337 77.4330846,49.682713 78.885312,55.1946879 L87.888509,55.1946879 C85.9668826,48.6876987 84.0552108,42.2159636 82.1450704,35.7482741 C83.8817705,34.3928199 85.1299279,32.694264 86.0876782,30.7718539 C87.0479171,28.844435 87.6028877,26.8060523 87.6913308,24.6312765 C89.4035271,34.8264651 91.1157235,45.0216536 92.8265798,55.2070172 L103.484543,55.2070172 C103.645923,54.196206 103.803282,53.2106313 103.960833,52.2252492 C104.118959,51.2369775 104.276893,50.2488984 104.435976,49.2608193 C104.597547,48.2573285 104.761607,47.2544157 104.922412,46.2507323 C105.080538,45.2626532 105.235983,44.2739962 105.392194,43.2855318 C105.548597,42.2970674 105.703659,41.3082177 105.860445,40.3195607 C106.01723,39.3310963 106.174973,38.3428246 106.332715,37.3545528 C106.490649,36.3660884 106.648583,35.3778167 106.807092,34.3897376 C106.96828,33.3862468 107.130426,32.3829487 107.291614,31.3796506 C107.450314,30.3913789 107.608822,29.4031072 107.766565,28.4148354 C107.924308,27.426371 108.081667,26.4379066 108.238644,25.4492496 C108.395238,24.4609779 108.550684,23.4723208 108.707469,22.4840491 C108.864254,21.495392 109.022188,20.5069277 109.17974,19.5182706 C109.339397,18.5147799 109.497905,17.5110965 109.658519,16.5077984 C109.816644,15.519334 109.97209,14.5304843 110.137298,13.5433684 C110.299061,12.5791774 110.414497,11.6057394 110.658002,10.6561894 C110.697629,18.0751627 110.697629,25.4873934 110.697629,32.8998168 C110.697629,40.3211019 110.697438,47.7421943 110.697821,55.1792763 L127.875875,55.1792763 C127.97657,54.6768567 127.958,46.5146567 127.851371,46.1465111 L123.870476,46.1465111 L119.85206,46.1465111 C119.748302,45.605177 119.767829,35.0476222 119.874841,34.6677251 L127.873769,34.6677251 C127.979441,34.1279323 127.957618,25.8418613 127.846394,25.4733303 L123.868179,25.4733303 L119.851677,25.4733303 C119.740836,24.86746 119.767063,14.5476298 119.884413,14.1750533 L127.910142,14.1750533 L127.910142,5.03113155 L102.342823,5.03113155 C102.316214,5.07755913 102.304153,5.0896958 102.302047,5.10337364 C100.939986,14.9573869 99.5783076,24.8112075 98.2170119,34.6652207 C98.2106946,34.711263 98.2047601,34.7571127 98.1974855,34.802577 C98.1926996,34.833015 98.1867652,34.863453 98.1794906,34.8931204 C98.1722161,34.9229805 98.1632186,34.9524553 98.1536469,34.98193 C98.148861,34.9963785 98.1429265,35.0114048 98.133929,35.0235415 C98.125123,35.0351002 98.113254,35.0468516 98.1002365,35.0518604 C98.0937277,35.0543648 98.0816672,35.0414575 98.0615665,35.0291282 C96.7004623,25.0333278 95.3384009,15.0298216 93.9761481,5.02573748 L84.7143221,5.02573748 C84.8243974,5.91094384 84.9298781,6.76340046 85.036699,7.61566444 C85.1439027,8.47139604 85.2627839,9.32577911 85.3577358,10.1828592 C85.4503904,11.0206748 85.6060272,11.8536742 85.6021985,12.704397 C85.4808286,12.5845715 85.4048289,12.4535725 85.3202145,12.3287382 C84.9317925,11.7565808 84.5732344,11.1607281 84.1465253,10.6190088 C81.311753,7.02289404 77.6130337,5.1095383 73.0461558,5.01764636 C69.9232735,4.95484391 66.798094,5.00050091 63.6740631,4.99915239 C63.5848543,4.99915239 63.4954541,5.01571991 63.3677668,5.02843451 C63.3606837,5.18890827 63.3490061,5.33917181 63.3484318,5.48962799 C63.33752,7.76978089 63.321248,10.0503191 63.3195251,12.3306646 C63.3132078,22.0243968 63.311102,31.7179363 63.3078476,41.4116684 C63.3070818,43.6771802 63.3076561,45.9424994 63.3076561,48.2080113 L63.3076561,48.682112 C63.2768351,48.6838458 63.2462054,48.6855796 63.2153844,48.6871208 C61.0207713,34.1373719 58.8261583,19.587623 56.6288652,5.02053605 L56.6288652,5.02053605 Z M151.61671,60.5754712 L3.82870385e-05,60.5754712 L3.82870385e-05,0.192645564 L151.61671,0.192645564 C151.624176,0.376814723 151.638342,0.560983883 151.638342,0.745153042 C151.639108,20.488819 151.639108,40.2324849 151.638342,59.9759582 C151.638342,60.1759243 151.624176,60.3756977 151.61671,60.5754712 L151.61671,60.5754712 Z" id="Fill-1" fill="#FFFFFF"></path>
                    <g id="Group-5" transform="translate(151.616672, 0.084764)">
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
                        <g id="Clip-4"></g>
                        <path d="M0.000215636515,60.4907649 C0.0170352847,60.2909915 0.048518216,60.091218 0.048518216,59.8912519 C0.0506745811,40.147586 0.0506745811,20.4041127 0.048518216,0.660446787 C0.048518216,0.476277628 0.0170352847,0.292108469 0.000215636515,0.10793931 C0.0687880484,0.123350955 0.195151047,0.13702879 0.197738685,0.154366891 C0.214989606,0.277082115 0.206795418,0.400760567 0.206795418,0.524053728 C0.206795418,20.3742527 0.207226691,40.2244516 0.1942885,60.0746505 C0.193857227,60.2098877 0.43321376,60.3880848 0.000215636515,60.4907649" id="Fill-3" fill="#FFFFFF" mask="url(#mask-2)"></path>
                    </g>
                    <path d="M72.4655137,30.0431913 L72.4655137,13.9888806 C72.8133514,14.0295288 73.1313253,14.0443625 73.4401102,14.1062017 C75.4151471,14.5015104 76.8047752,15.6456324 77.6442185,17.4763432 C78.1716224,18.6262446 78.3850727,19.851663 78.4560951,21.1042445 C78.5533442,22.8147445 78.3797125,24.489605 77.7068178,26.0823985 C77.0969053,27.5260844 76.1694018,28.701415 74.784751,29.470456 C74.0301135,29.8894601 73.1998591,30.0927012 72.4655137,30.0431913" id="Fill-6" fill="#FFFFFF"></path>
                    <path d="M53.1454913,39.4592827 L48.2035918,39.4592827 C48.0954309,39.0919076 50.4550611,19.2026016 50.6137609,18.5215995 C51.4637331,25.5516215 52.3026021,32.487825 53.1454913,39.4592827 Z" id="Fill-8" fill="#FFFFFF"></path>
                </g>
            </g>
        </g>
    </g>
</svg>
10

I think you can remove the top xml line and paste it in place of the img.
So if you had:-

<figure class="myImage>
      <img src="pathto/thisimage.svg" alt="alt text">
</figure>

That would change to something like:-

<figure class="myImage>
      <svg ect...>
           ** All that stuff **
      </svg>
</figure>

As I mention, the down side to this is it does get messy.
If you are using PHP I recommend using an include.

<figure class="myImage>
      <?php include "pathto/thisimage.svg" ?>
</figure>

Which makes it appear in-line in the resulting html, but not in your source code.

11

So it wasn’t working for me (SVG wouldn’t show up), so I copied the example code from the CSS Tricks Using SVG article

WordPress was adding <p> tags in between each line so I made it all into one line. And I also added the CSS to my website.

But the bird example only shows up as black, no colours. The only way I can colour the bird shape is by opening inspector and adding element.style {fill:red}, however I don’t think this will work for hover.

So any idea why the CSS isn’t working on the SVG?

12

It’s working here with the svg data copied from your post.

Note you can add classes to svg elements or use the exiting IDs rather than targeting element names as I have.

13

Hmmmm, that is very good to know…

There is obviously something else at play with my stylesheet or markup that is not allowing the SVG to show up on my website. I am running my custom theme in WordPress on SiteGround HTTP/2 host.

Any troubleshooting techniques worth trying?

Thanks again!

14

Could be WP meddling with things.

15

Yes. Great for non-techies using the WYSIWYG editor, but can be a bit of a pain, especially for those that know how to write HTML
IMHO if you can do without it, disable it.

https://codex.wordpress.org/Function_Reference/wpautop

16

Fantastic, thanks! Sure enough, shrinking the code back down to 1 line did the trick. I also had CloudFlare CDN messing with the CSS, caching it, so I turned on Developer Mode and that resolved the colours.

Thank you again so very much!

So it looks like I’m able to adjust the CSS colours on SVG so much easier now.
Any idea how to get the font fixed in IE11? :slight_smile:

17

If it’s WP, then it’s PHP, so that is an option.

I forgot all about the font bit.
In the svg the font is set to HelveticaNeue-Thin which is non-standard and without basic fallback so shows as Times.

<text id="View-Website" font-family="HelveticaNeue-Thin, Helvetica Neue" font-size="18.1080008" font-weight="300" fill="#FFFFFF">

Try changing it there.

18

Thanks! Worked fantastic :slight_smile:

And just to be clear, are you suggesting I link to a .svg file directly? Or to a .php file with SVG in it?

Thanks

19

Not a link, but an include, to the svg file.

<?php include "pathto/thisimage.svg" ?>

Assuming that WP doesn’t mess with things again. :shifty:
You don’t have to do that, but I don’t like having all that mess in my html, plus it makes the svg stay its own file that can be used anywhere and any edits to it will be propagated to all instances that reference it.

20 
<?php include "pathto/thisimage.svg" ?>

This PHP include doesn’t seem to be working within WordPress and I have tried a few PHP plugins for Pages but to no avail. Any ideas how to make this work in WordPress?

Also, can this SVG hover colour change technique be used with CSS background images? Or only with HTML img includes?

Thanks again!