Hi,
SVG is not support by Joomla Media manager.
But you can still use svg as logo.
1. For T3 Blank, it use image background, so the svg does not responsive. (you can use background-size if you want to make it responsive in CSS)
Here the steps:
- Upload your svg file to /images folder (for ex: /images/mylogo.svg) by using any ftp client
- Open Theme tab in T3 Template Manager. Then choose your svg image. And yes, by default, your logo file will not able to select. Just type the url in Image url box ( should be /images/mylogo.sgv)
- Save and check your frontend site.
2. You can modify your logo markup to something like this.
- Open tpls\blocks\header.php and replace
<a href="/<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
by
<div class="brand">
<a <?php echo ($logotype == 'image' && $logoimage) ? '' : 'class="bg-image"' ?> href="/<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>">
<?php if($logotype == 'image' && $logoimage): ?>
<img class="logoimg" src="/<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</div>
- Use this logo less code instead of existing one.
// Logo
// ---------------------------------------------------------
.logo {
float: left;
.brand {
padding: 0;
margin: @T3globalMargin/2 0 0;
text-shadow: none;
}
a {
display: inline-block;
line-height: 1;
margin: 0;
}
}
// Logo Image
// ----------
.logo-image {
overflow: hidden;
a {
width: @T3logoWidth;
height: @T3logoHeight;
&.bg-image {
background-image: url("@{T3LogoImage}"
;
background-repeat: no-repeat;
}
}
//hide sitename and slogan
span, small {
display: none;
}
}
// Logo Text
// ----------
.logo-text {
a {
color: @grayDark;
text-decoration: none;
font-size: @fontSizeLarge;
}
&:hover a,
a:hover,
a:active,
a:focus {
text-decoration: none;
}
// Taglines
.site-slogan {
display: block;
font-size: @baseFontSize;
margin-top: 5px;
}
}
- Save and recompile LESS to CSS.
Note: the second option will help you easy to manage the responsive logo.
Regards