Headache trying to use SVG image as title header

Community Forums Forums Design Tips and Tricks Headache trying to use SVG image as title header

This topic is: not resolved

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Marcy 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #87610

    NV
    Member
    Post count: 6

    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

    • This topic was modified 8 months, 4 weeks ago by  NV.
    • This topic was modified 8 months, 4 weeks ago by  NV.
    • This topic was modified 8 months, 4 weeks ago by  NV.
    • This topic was modified 8 months, 4 weeks ago by  NV.
    #91276

    Marcy
    Participant
    Post count: 381

    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/logo@2x.png);
    		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 logo@2X.png. The name is important; it looks for an image with @2X added to the original name.

    This method also keeps your logo sharp.


    #91472

    NV
    Member
    Post count: 6

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

    NV

    #91482

    Marcy
    Participant
    Post count: 381

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


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.