Adding an SVG logo to Eleven40 pro

[silvine]

I created an SVG logo for my development site http://bryancollins.eu/wp/

I can view the SVG image on my site, but it won't appear as a logo.

I followed the instructions here: http://genesisdesignr.com/using-svg-images-genesis-2-0/

How can I fix this?

http://bryancollins.eu/wp/

[Tom]

Your logo file is 320x65px, which is pretty small, and will never grow larger, so you don't really need to use the SVG format for image quality, except that the image size is really, really tiny**. (There is actually some redundant image data in your SVG file. I was able to reduce the size to 7.9 KB from 26.8 KB.)

Chris Coyier at CSS-Tricks has part of the solution (http://css-tricks.com/using-svg/) The other part is a correction to the code from genesisdesignr.com. Try the following code in place of the existing piece. This worked for me on a local install:

.title-area {
  text-indent: -9999px;
  background: url(http://bryancollins.eu/wp/wp-content/uploads/2014/03/WRP-Logo-SVG.svg)  no-repeat scroll top transparent;
  background-size: 320px 65px;
}

You can control the size in media queries, if desired, as follows:

@media only screen and (max-width: 320px) {
    .title-area {
        background-size: 280px 57px;
    }
}

** I've uploaded the smaller image file to http://www.tiikoni.com/tis/view/?id=2076b7a
(14-day expiry)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts