How can I make my logo for the site a super crisp vector so if my users zoom in to the site to see the artwork, the logo at the header stays crisp like the site social icons and all text on the site? I want to display a clean vector instead of a png file that gets blurry at 110%? see a few screen shots…
Social Icons at 250%
Logo At 100%
Logo At 150%
Hi there,
Please install the Child Theme and then add the PHP code below to the functions.php file of your Child Theme:
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
The code above will allow you to upload the SVG images to the media library of the WordPress. Then go to X > Theme Options > Logo (Image) and upload and set the SVG image as a logo.
Hope it helps.
Great Tipp. Thx also from here… 
You’re welcome!
Thanks for letting us know that it has worked for you.
This code did not upload correctly or work correctly. I tried using the child theme php file under editor. Did I do it wrong or miss something?
Hi There,
It seems like you don’t have permission to edit the files via the Editor.
You can try with the FileZilla editor instead.
Let us know how it goes!
Based on the last comment I am unsure if you still need help, in case you do, please let us kno.
I did try this I was successful with saving the file using ftp. and saving the logo file as a svg file and uploading it to the media of the site but I see no difference in the image quality. Im wondering if I missed something.
Hi There,
I Downloaded the image and the image shown on the site looks 100% the same as the original image;
Can you clarify?
This was my first post above: I put the code in php file / I uploaded a new svg file placed image in logo section and its the same no change in quality like the social icons are see 1st post
How can I make my logo for the site a super crisp vector so if my users zoom in to the site to see the artwork, the logo at the header stays crisp like the site social icons and all text on the site? I want to display a clean vector instead of a png file that gets blurry at 110%? see a few screen shots…
Social Icons at 250%
Logo At 100%
Logo At 150%
Hi there,
SVG is a vector one and not PNG, the above code will only allow you to use and upload SVG file, then you must upload your own logo in SVG format and use it as your logo. Your current image is still in PNG and the above code will not convert it to SVG.
And if you have permission issue implementing the code then you must contact your hosting provider.
Thanks!
Ok finally Saved the file correctly to svg but no logo shows up on the site now, but it loaded to the upload area on dashboard. Here is a screen shot. What can I do to get the logo to show up? if I put the png back it shows up on the site. I have 100% permission to all of the site, I am the creator of the site I have full admin access. Why would I need to call my hosting company its not a server issue?
Hi there,
It works now, it just that SVG doesn’t have dimension at this moment. Please add this CSS to your global custom CSS
.x-brand img {
width: 100%;
}
SVG doesn’t respond like standard image, hence, SVG will be buggy on IE too.
Hope this helps.
it will be buggy on internet explorer? so you mean the logo may not show up ?
Hello @rotation,
Thanks for updating thread. 
Internet Explorer will have issues with SVG files. You can take a look at following website to learn more on browser compatibility:
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.