Logo in svg format

Now we will see how to use a vectorized logo in .svg format. First thing we will do is edit this piece of code in the header.tpl file


<div id="header_logo"><a title="{$shop_name|escape:'html':'UTF-8'}" href="{$base_dir}"><img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}" width="{$logo_image_width}" height="{$logo_image_height}" /> </a></div>


Editing the code in this way


<div id="header_logo">
 <a href="{$base_dir}" title="{$shop_name|escape:'html':'UTF-8'}">{$shop_name|escape:'html':'UTF-8'}

Finally we will place the logo in .svg format vectorized form in the img folder of the template that we are using
and put this code in the file global.css


#header_logo {
 background: url(../img/logo.svg) no-repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0);
 display: inline-block;
 width: 330px;
 height: 150px;

#header_logo a {
 display: block;
 height: 150px;
 overflow: hidden;
 text-indent: -34em;

#header_logo a:focus {
    border: medium none;
    outline: medium none;
#header_logo a:active {
    border: medium none;
    outline: medium none;


Posted on 01/11/2014 in Design, Prestashop

Share the Story

About the Author

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Back to Top