How to Create a Custom SVG Logo with Text and Hover Effects

August 1, 2016

Recently on a client project, as with almost all client projects, we were provided with our clients branded logo in a flat png format. This particular logo was monochromatic, and it was decided that to enhance branding and user-experience we would implement an image hover effect. This is certainly possible using two semi-transparent png’s, one of the image in one color and the other of the images ‘transitioned’ color. Simply absolute-position these images over one another, the top layer masking the lower, then use a css transition effect to drop the opacity of the top layer to 0. Hence ‘fading’ the logo to appear that it transitioned from one color to the other smoothly.

Now while the above technique works for certain graphics, we’ve come to learn that depending upon the transparent png, you can run into ‘bleeding’ effects in the graphics where the semi-transparent anti-aliasing pixels of the image overlay each other and ruin your graphics presentation. Note that this could easily be remedied using a non-transparent jpg or png, hence no semi-transparent pixels overlaying each other. However in certain cases the image may be over-laying a textured background etc. in your clients design, so transparency would be required in the graphic.

So everything considered we decided to utilize the clients logo in SVG format, then we could do the color transition directly to the svg code for our hover effect in css. There are many great articles outlining this on the web, including this wonderful article by Chris Coyier that clearly and thoughtfully explain this technique. But of course it wasn’t that simple in our case-example, as this particular client logo utilized a Google Font (no snickering graphic artist please). SVG’s do of course allow for embedding of text, the font-family attribute is actually embedded within the SVG code itself. So could we utilize that and create our graphic with a generic font THEN swap the font via css? Lets see what we came up with below.

Creating your SVG/Text Graphic and Exporting it for use

First we need to create our SVG/Text graphic in Illustrator. I say “SVG/Text” graphic since our purpose is to create our graphic with the text embedded in the SVG itself. Normally we could simply create our logo, then text, and simply turn our text into an Illustrator ‘path’, hence making it just another vector shape. But then we couldn’t apply our font to it, we need to apply css to our text so an outline wont do.

Create a new file in Illustrator. Take note to create your new file with the final dimensions your graphic is needed to be in your html. SVG graphics are scalable by definition, however we are not getting into the process of adjusting the size in this article. So by creating our new file/layer for our example at 200px by 200px we will avoid needing to resize the svg itself. Note the image below.

image_01

Now without going into the specifics and steps of teaching you how to draw and type within Illustrator, I’m going to simply skip to my graphic as you can see below. It is nothing more for our experiment than a simple logo shape layer with standard text layer below it. I think I used Myriad-Pro for the text, but the point being it doesn’t matter! We’re going to swap the font-family via css later.

 

image_02

So we have our “logo” created now and we need to export it for use in our html. We are simply going to place the svg code directly into our html, so exporting is very simple. In Illustrator go to FileSave As and select “SVG” from the drop-down list. Choose your file name then you will be prompted with the SVG Options menu (see image below). First make sure you select “SVG 1.1” as your SVG Profiles encoding type. There’s a great Stack Overflow article here about what the different types mean, all modern browsers and mobile devices support the SVG 1.1 standard.

image_03

Next we need to select our font embed format. For Type select “SVG” (see above), and for Subsetting select “None (use system fonts)”. This is important as we are going to override the actual svg code with our css later to set the font-family. Save your file. Now we’ll embed the code in our html.

Embedding the SVG code in HTML

Let’s look at what exactly Illustrator saved for us in our SVG file. Fire up your preferred text-editor and open up the SVG file we just saved (yes we can do this because SVG files are simply a subset of xml!). Heres what I got below:

image_04

As I said SVG files are actually xml. They’re not ‘encoded’ in the sense of JPG or PNG files, which contain all encoding information within the files themselves. So the file itself should look vaguely familiar aside from a few tags most of us developers aren’t familiar with. Notice the first three lines in the image above. The first line is a standard xml encoding declaration, the Second line a comment about the files being generated by Illustrator, and the Third line an html Doctype declaration. We remove these lines. All we need is the <svg> tag, and it’s contents as seen below. Also notice that Illustrator will name the id attribute in the xml exactly as you name your layers in Illustrator when it generates the SVG. I probably shouldn’t have used Capitalized layer names, I’ll fix that when we paste our code.

image_05

IMPORANT: Beware of embedded line breaks in your file

Now I should mention here that you’ll notice in the above two images of the SVG code that Illustrator, when it generates an SVG file for export depending on your settings, may embed UTF-8 line breaks. Look at lines 8 and 9 in the first code image, and 5 in the second. You have to remove these encoded hard line breaks to make sure you wont run into trouble when you paste this code in your html. Simply put your caret on the end of the line and hit backspace or delete until we have a single “line” of code with no invisible “encoded” breaks. You can see I did this between the two steps so that any single xml tag is on it’s own line. In fact my editor (UltraEdit) allows me to display these encoded breaks within a file for illustration purposes as you can see below:

image_06

Those little squiggly ¶ “pilcrow” symbols there are denoting the embedded utf-8 line breaks. The ones we outlined in red we need to remove because they break the “line” of numbers and information that actually makes up our SVG shapes, and will break when a browser tries to read the xml that makes up our SVG.

Embedding our SVG code as HTML

Now that we have our “clean” SVG code to embed lets see what happens when we simply put it “inline” in our HTML as right below:

TEXAS STAR

Image 7

Cool! The browser identifies the <svg> tag as it should, then follows the instructions in the tag and renders our image and text. Remember that “Image 7” above, is no image file at all, it is our SVG snippet copied and pasted directly into our blog html here. Well Mostly cool, notice that since we exported our SVG with FontSubsetting as “None (use system fonts)” our font is a little wonky. Now I must have Myriad Pro on my system right? I was just using it in Illustrator to create this SVG, what gives? Well Illustrator in all it’s glory decides to rename system fonts according to it’s own rules. Notice line 12 in Image 4 and as below.

12. <text transform="matrix(1 0 0 1 11.6616 191.1885)" font-family="'MyriadPro-Regular'" font-size="36">TEXAS STAR</text>

Illustrator renames it “MyriadPro-Regular”, lets change this to “Myriad Pro” like it should be and see what happens:

12. <text transform="matrix(1 0 0 1 11.6616 191.1885)" font-family="'Myriad Pro'" font-size="36">TEXAS STAR</text>

TEXAS STAR

Image 7

Neat! Now that looks as nice and clean as it did in Illustrator. And you should see it that way too, that is, if you were on my computer here, or have ‘Myriad Pro” installed on your system, if you don’t you’ll see no change in the above graphics since the code is still telling it to default to whatever your system or browser default font is. Well we’re writing this whole article because in our case we are going to utilize a Google font to make a 100% consistent representation cross-browsers and systems.

Select and embed your Google Font

For our example here I found a Google font to go along with our Sheriffs badge. It’s called Rye by Nicole Fally, give credit where it’s due since her font actually is perfect for our logo and article. Now Google gives you three methods to embed one of their fonts in your webpages: via <link href=”…. > in the head of your pages, or by @import in your CSS file, or as we did here (being just a single blog page in our larger website ) via javascript. I’ve tried all three ways and this has no affect on the technique we are utilizing here.

Below is the actual code I copied from Google Fonts for the Rye font-face:

<pre>
  <code>
&lt;script type="text/javascript"&gt;
  WebFontConfig = {
    google: { families: [ 'Rye::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/Ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf,  s);
  })(); 
&lt;/script&gt;
  </code>
</pre>

 


I simply put that snippet in-line. Now let’s see what happens when again, going to my svg snippet line 12, I change my font-family to “Rye”:


TEXAS STAR

Image 8

Told you that font was perfect for our exercise here. Now we see that our cool Google fonts letter sizing is different from Myriad Pro as well. So after some fiddling I found that changing our embedded font size to 28 gives us our SVG code and font-embed looking perfect. Our final SVG code is below, remember I needed to un-capitalize my id names for semantic css later, I also wrapper our SVG in a div with ID “my-logo” for css targeting:

Told you that font was perfect for our exercise here. Now we see that our cool Google fonts letter sizing is different from Myriad Pro as well. So after some fiddling I found that changing our embedded font size to 28 gives us our SVG code and font-embed looking perfect. Our final SVG code is below, remember I needed to un-capitalize my id names for semantic css later, I also wrapper our SVG in a div with ID “my-logo” for css targeting:


&lt;div id="my-logo" &gt;		
&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
   height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"&gt;
  &lt;g id="shape"&gt;
    &lt;g&gt;
    &lt;polygon points="100.437, 15.173 119.557, 53.913 162.309, 60.125 131.373,<br>90.28 138.676, 132.859 100.437, 112.756 62.199, 132.859 69.501, 90.28 38.566, 60.125 81.318, 53.913"/&gt;
    &lt;g&gt;
    &lt;path d="M100.437, 4.512c-41.976, 0-76.004, 34.028-76.004, 76.005c0, 41.975, 34.028,<br> 76.004, 76.004, 76.004 c41.977, 0, 76.004-34.029, 76.004-76.004C176.441, 38.54, 142.414, 4.512, 100.437,<br> 4.512z M100.438, 146.587	c-36.491, 0-66.072-29.58-66.072-66.07s29.581-66.071, 66.072-66.071c36.49,<br> 0, 66.072, 29.581, 66.072, 66.071 S136.928, 146.587, 100.438, 146.587z"/&gt;
    &lt;/g&gt;
  &lt;/g&gt;
&lt;/g&gt;
&lt;g id="text"&gt;
  &lt;text transform="matrix(1 0 0 1 11.6616 191.1885)" font-family="'Rye'" font-size="28"&gt;TEXAS STAR&lt;/text&gt;
&lt;/g&gt;
&lt;/svg&gt;
&lt;/div&gt;		

 

And can be seen here in Image 9:

TEXAS STAR

Image 9

Looking good. Now we just need to set our CSS rules for color and hover effects.

Bringing it all together with CSS

We can now selectively target our SVG elements using standard CSS syntax. Remember we have two main id’s on <g> tags (the g means group by the way) they are “shape” and “text”. So our starting CSS is as below:

#my-logo #shape, #my-logo #text { //target here }

Next we need to set our #my-logo wrapper as a proper parent block-level div for our SVG. To do this declare it as a block, set it’s width and height (200px remember from our Illustrator file) and also since we are adding a hover effect make sure we keep our user-experience proper and change the cursor to pointer for feedback on the #my-logo block. Then we need to change the SVG groups color to something other than black. Now since SVG is rendered differently in the browser than standard html tags, it wont utilize the same CSS property names, such as “color” or “background-color”, not for the SVG groups that is. We need to use SVG Specific CSS properties. An extensive list can be found here thanks to our friends at Mozilla. I wont make you memorize the entire list so trust me when I say the CSS property we are looking for is called “fill”. So with our new cursor and color our CSS becomes:

#my-logo { display:block; width:200px; height:200px; cursor:pointer; } #my-logo #shape, #my-logo #text { fill:#c6aa60; }

And now our graphic looks like this:

TEXAS STAR

Image 10

Completing our Logo with Hover Effects

So we have now our logo embedded in HTML with our SVG code, have loaded and embeded our Google font in our svg codes ‘Font-Family” attribute (we can also do this strictly through CSS, which I leave to you as an exercise for yourself to learn), and have targeted our SVG via CSS selectors. Now lets add our hover transitions and call it done.

We need to set our :hover pseudo-class selector on the #my-logo element. This is because SVG’s are actually NOT displayed as block-level elements as far as hovering is concerned. An SVG will trigger the “hover” state ONLY when the cursor is over a non-empty “pixel” if you will (we’re not getting into the fact that SVG graphics are vector and not rasterized here, they are rasterized on rendering by the browser). So if we were to hover over a blank pixel, the “hover” trigger would not engage for the <g> targeted. So we add our pseudo-class to our wrapper div, and add a simple CSS transition to complete the experience as below:

The Css:

#my-logo {
display:block;
width:200px;
height:200px;
cursor:pointer;
}

#my-logo #shape, #my-logo #text {
fill:#c6aa60;
transition: fill .4s ease-in;
}

#my-logo:hover #shape, #my-logo:hover #text {
fill:#f2b511;
}

And our completed logo:

TEXAS STAR

My Logo Completed!

 

The Caveats; Will it work in IE?

Don’t even bother asking, as a developer you should already know the answer to this. IE 9+ will display the fonts/color/hover change fine but has issues with CSS transitions on SVG elements.

In Conclusion

So we have completed our exercise here in embedding SVG graphics directly into our HTML code, and applying a Google font to our SVG text, and added some nice CSS effects for a very clean presentation to the end user. It is a fairly simple example but as a developer if you have not needed to utilize this or similar techniques you should now have a glimpse into the possibilities available to you. I hope you enjoyed our presentation and came away with something you can build upon when needed. Thanks!

If you use this technique, let us know.  Post a link in the comments and we’ll check it out.


We do our best work face to face.

Send an email to tj@ravennainteractive.com or call us at 206.427.0000 and we will setup a time and place to meet.

 

 

Lets chat