Headache trying to use SVG image as title header

[NV]

Hi all, I'm designing my first blog on the News Pro theme and all is going very well but I've run into a frustrating problem. I created a simple text logo image in inkscape and would like to use it in SVG format so that it will ALWAYS look nice and sharp. (I can use a PNG version of the image without problem, btw, but it doesn't retain sharpness as well if someone, say, zooms up their browser to 150% view.)

I installed the WP SVG Plug In and was able to upload the SVG file to my media library. I was even able to insert it in a post and it showed beautifully! (I zoomed the browser excessively to test it and it remained razor sharp - nice!)

But when I tried to use the very same SVG image as my header through Appearances > Header, I could choose it from the Media Library, but then it asked me to "Crop and Publish" the image - even though it was already sized at the required 260 x 90 pixels. So I selected the whole image and it then gave me an error message that the image could not be processed. (It doesn't matter if I choose the whole image or only part of it, btw.)

BTW, before adding the WP SVG plug in, I had also tried editing the functions.php and style.css files per the instructions here: http://genesisdesignr.com/using-svg-images-genesis-2-0/ but got the same results as described above.

For whatever reason, I'm having no problem using SVG files in posts, only as the header image. Can anyone help?

Many thanks,

NV

[Marcy]

Right now I don't believe you can use an SVG image through the WordPress Appearance > Header.
If you look at the link you posted, there are two methods. The first one uses <object> tags around the svg data file. The Appearance > Header still treats it as an , not an <object>.

You can add the SVG if you use the second method which is to use the SVG as a background image. You can add it by editing your style.css or you can use a custom CSS editor plugin, like the one in Jetpack, if you use Jetpack.

So you would need to add the SVG to this element:

.title-area {
          background: url(image.svg) no-repeat scroll top top transparent;
}

where image.svg is the full path to your SVG image in the WordPress Media Library.

When I tried SVG in my site, I used this instead:

header-image .title-area {
    background-position: left top;
    background-image: url(images/logo-250.svg);
    background-size: contain;
    height: 96px;
    width: 250px;
}

It worked but I opted to use a png instead.

If you look at StudioPress themes they all have this section:

@media screen and (-webkit-min-device-pixel-ratio: 2) {

	.header-image .title-area {
		background: url(images/[email protected]);
		background-size: 250px 196px;
	}

}

So at the top you would use:

.header-image .title-area {
		background: url(images/logo.png);
		background-size: 250px 196px;
	}

with just logo.png and then you would make a png twice the size for the [email protected]. The name is important; it looks for an image with @2X added to the original name.

This method also keeps your logo sharp.

---

Marcy | Amethyst Website Design | Twitter

[NV]

Marcy, thanks so much for taking the time to reply! I'll give this a try soon.

NV

[Marcy]

You're welcome; I hope you get it sorted!

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts