Scalable Vector Graphics (.svg files) are superior to .png for objects like logos as they adapt to the resolution of the screen and therefore never appear pixelated.
Here is an example of an SVG file versus a PNG image. Try zooming in on the images to see the beauty of an SVG file.
Using an SVG file as your website's logo is not currently supported by Weebly in their default elements, so we need edit the HTML to replace the standard logo option.
Weebly's editor does not show SVG files, but they are rendered in the 'public' published site. Your logo's size (width=200px in the example below) may need adjusting to suit your needs. Ensure your website's address is accurate - some websites need 'www' immediately after 'http://', or they may need 'https://' instead of 'http://'. You can test that your logo has been uploaded correctly by opening the SVG file in a new browser tab.
For example: http://mjcsdemo.weebly.com/files/theme/mjcslogo.svg. If you get a '404 Not found' error you need to correct the URL address and ensure it is correct in the Header.html file.
If you use the no-header.html or splash.html header types for any of your pages you'll need to adjust the "logo" div in them too.
- Click on Theme>Edit HTML / CSS
- Scroll down the column on the left and click on the + next to the ASSETS>Upload File(s)
- Upload your SVG file
- Scroll up to find the HEADER TYPE and click on Header.html
- Edit the HTML by adding the following markup in place of the default "logo" div (see below)
- Add the CSS to your main.css file or your site's SEO Header Code (see below)
- Save the changes and then publish your site.
Weebly's editor does not show SVG files, but they are rendered in the 'public' published site. Your logo's size (width=200px in the example below) may need adjusting to suit your needs. Ensure your website's address is accurate - some websites need 'www' immediately after 'http://', or they may need 'https://' instead of 'http://'. You can test that your logo has been uploaded correctly by opening the SVG file in a new browser tab.
For example: http://mjcsdemo.weebly.com/files/theme/mjcslogo.svg. If you get a '404 Not found' error you need to correct the URL address and ensure it is correct in the Header.html file.
If you use the no-header.html or splash.html header types for any of your pages you'll need to adjust the "logo" div in them too.
Before edit:
After edit:
* Please note - since the publication of this article the use of <object> causes SVG files to be downloaded to the user's device. I suggest using <img ... >. See code excerpt below.
* Please note - since the publication of this article the use of <object> causes SVG files to be downloaded to the user's device. I suggest using <img ... >. See code excerpt below.
Lastly you should add the CSS to your site that will make your SVG image a hyperlink. Then when people click it they will be taken to your home page. The easiest place to add that is either at the end of your site's main.css file, or in the Settings>SEO>Header Code section of your site. For example:
ADVICE!
If you are making changes to your theme's HTML or CSS files I suggest you make a backup copy of the markup/rules in a plain text file on your computer, just in case something goes awry.
If you are making changes to your theme's HTML or CSS files I suggest you make a backup copy of the markup/rules in a plain text file on your computer, just in case something goes awry.
HTML
<div class="logo">
<a href="http://YourWebsiteName.com" class="svg">
<img width=200px; src="http://YourWebsiteName.com/files/theme/YourFileName.svg">
</a>
</div>
CSS (remove the <style> tags if you are adding it to the main.css file, keep them if you are adding it to the SEO Header Code window)
<style>
a.svg { position: relative; display: inline-block; }
a.svg:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
</style>
<div class="logo">
<a href="http://YourWebsiteName.com" class="svg">
<img width=200px; src="http://YourWebsiteName.com/files/theme/YourFileName.svg">
</a>
</div>
CSS (remove the <style> tags if you are adding it to the main.css file, keep them if you are adding it to the SEO Header Code window)
<style>
a.svg { position: relative; display: inline-block; }
a.svg:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
</style>