The nature of responsive web templates means that some images – in this case your company logo – can be shown at a variety of sizes. Browsers often don’t provide very good image quality when resizing bitmap formats like JPG and PNG, especially when only shrinking the image a small amount. The sharp edges of a logo suddenly look fuzzy.
Logos usually look much better when rendered from a vector format like SVG. Unfortunately Neto doesn’t support SVG files so the new image has to be added directly to the template.
Add an SVG logo
- Get an SVG version of your logo. You’ll need to start from a vector file such as EPS which your graphic designer should have provided. Convert it to SVG in software like Adobe Illustrator or CorelDRAW
- Connect to your Neto site by FTP and upload the logo into a new folder under your theme called img
- Edit the file \templates\headers\template.html
- Find the existing logo. It will probably start with something like <img class=”logo” …
- Replace the src of this image with (changing the filename if needed):
[%ntheme_asset%]img/logo.svg?[@config:neto_css_version@][%/ntheme_asset%]The entire line should now look something like:
<img class="logo" src="[%ntheme_asset%]img/echidna-sewing-logo.svg?[@config:neto_css_version@][%/ntheme_asset%]" alt="[@config:company_name@] Logo"/>
Save and refresh your home page to see your new, sharper logo!