Using SVG In NavBar Brand

Topic: Using SVG In NavBar Brand

ewgiddings free asked 5 years ago

Expected behavior I have an SVG that works when inserted into HTML. I want to put it as the brand logo in an mdb navbar but when I put it in place of the image as shown in the example like so:

    <mdb-navbar SideClass="navbar navbar-dark indigo">
    <mdb-navbar-brand>
        <a class="navbar-brand" href="#">
            <svg><svg>
        </a>
    </mdb-navbar-brand>
</mdb-navbar>

Actual behavior The SVG is present in the DOM but has a height and width of 0 x 0. Again all SVG work perfectly fine outside of this mdb-navbar-brand - but have height and width of 0 when placed inside.

How can I place an SVG instead of an image as the brand in the navbar?

ewgiddings free commented 5 years ago

I got it to not be 0 x 0 by adding a style width to the mdb-navbar-brand element and then a style width to the svg itself. Is this the recommended way of doing this?

Arkadiusz Idzikowski staff commented 5 years ago

We will take a closer look at this problem, for now please use your custom styles.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=39724" target="_blank" rel="nofollow">@ewgiddings</a></p>

<p>I have tried to reproduce your problem again, but without success.</p>

<p>I have copied your <code><svg></code> element, and it is working fine.</p>

<p>Please take a look at the below code and <a href="https://screenshots.firefox.com/xvPiSjlFzb8ifD4S/localhost" target="_blank" rel="nofollow">screenshot</a>.</p>

<pre class="prettyprint"><code><mdb-navbar SideClass="navbar navbar-dark indigo">
  <mdb-navbar-brand>
    <a class="navbar-brand" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.84 151.71" height="60">
        <defs>
          <style>.cls-1 {
            fill: url(#linear-gradient);
          }

.cls-2 {
            fill: url(#linear-gradient-2);
          }</style>
          <linearGradient id="linear-gradient" x1="118.28" y1="6.12" x2="118.28" y2="150.41"
                          gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#2bbbad"/>
            <stop offset="0.05" stop-color="#32bba9"/>
            <stop offset="0.13" stop-color="#45bb9e"/>
            <stop offset="0.22" stop-color="#64bb8c"/>
            <stop offset="0.32" stop-color="#90bb73"/>
            <stop offset="0.42" stop-color="#c6bb54"/>
            <stop offset="0.52" stop-color="#fb3"/>
            <stop offset="0.62" stop-color="#ff9d37"/>
            <stop offset="0.79" stop-color="#ff6d3e"/>
            <stop offset="0.92" stop-color="#ff4f42"/>
            <stop offset="1" stop-color="#f44"/>
          </linearGradient>
          <linearGradient id="linear-gradient-2" x1="44.04" y1="0" x2="44.04" y2="151.71"
                          xlink:href="#linear-gradient"/>
        </defs>
        <title>TRAGOA</title>
        <g id="Layer_2" data-name="Layer 2">
          <g id="Layer_2-2" data-name="Layer 2">
            <path class="cls-1"
                  d="M127,24.66A74,74,0,0,0,96.88,6.31a2,2,0,0,0-.41-.13,2.51,2.51,0,0,0-.55-.06,2.61,2.61,0,0,0-2.6,2.34,2.44,2.44,0,0,0,0,.27,2.44,2.44,0,0,0,0,.27v1.26h0V36.54l.65.69c.66.69.19,1.83.12,2l-.1.19-.07.27c-.61,2.34-.41,5.54,2.12,6.88.51.34,1.35,2.25,1.81,3.28a25.68,25.68,0,0,0,1.34,2.73c.51.86,1.12,2,1.66,3,1.28,2.36,1.61,3,2.25,3.4.38.29,2.8,2.27,5.07,4.14.76,1.51,2.57,4.44,5.28,4.44a12.59,12.59,0,0,0,4.15-1.1c.73-.27,1.52-.57,2.31-.81q-.83,1.94-2.75,5.46c-.51.93-.81,1.48-1,1.9-.55.63-2.31,2.3-3.87,3.78-1.75,1.66-3.74,3.54-5.66,5.46a11,11,0,0,0-2.32,12.47c.47,6.51-1,8.9-1.71,9.31l-.05,0c-1.64.64-7,3-6.63,7,.08.86-1.27,3.71-2.82,6l-.37.55,0,.66,0,.26a5.28,5.28,0,1,0,4.49,2,13.14,13.14,0,0,0,.25-1.3c1.14-1.74,3.44-5.61,3.3-8.39a9.3,9.3,0,0,1,3.53-2.29c1.32-.45,5.81-2.86,4.81-14.67l0-.51-.26-.45A6.22,6.22,0,0,1,110,85.59c1.87-1.88,3.83-3.74,5.56-5.38,3.9-3.7,4.88-4.63,5.1-5.62.14-.28.42-.78.66-1.23,3.48-6.37,4.8-9.56,3.4-11.68a3.13,3.13,0,0,0-3-1.35,23.09,23.09,0,0,0-5.87,1.61,18.33,18.33,0,0,1-2.24.75,7.47,7.47,0,0,1-1.37-2.09l-.23-.52-.44-.36c-3.55-2.92-4.9-4-5.44-4.44-.25-.41-.76-1.34-1.14-2-.56-1-1.19-2.19-1.76-3.13a22.09,22.09,0,0,1-1.07-2.21c-1-2.16-1.94-4.39-3.75-5.46a4.16,4.16,0,0,1,0-1.39,6.73,6.73,0,0,0-.41-6.29V11.81a69.63,69.63,0,0,1,3.77,129.46,5.28,5.28,0,1,0,1.64,4.55A74.46,74.46,0,0,0,127,24.66Z"/>
            <path class="cls-2"
                  d="M63.68,33.88c.91,2,3.27,2.29,5.35,2.52l.82.1c.41,0,.71.28,1.43.88a8.71,8.71,0,0,0,4.6,2.25c1.41.19,3.81,0,4.41-3.08a5.19,5.19,0,0,0,2.51.63,5.28,5.28,0,1,0-5.28-5.28c0,.1,0,.2,0,.29a4.1,4.1,0,0,0-1.76,2.49,5.54,5.54,0,0,1-1.43-1,7.3,7.3,0,0,0-3.87-2l-.92-.1-.71-.09a3.78,3.78,0,0,0,0-2.59c-.93-2.5-4.26-3.5-5.26-3.75l-.3-.08H63c-.19,0-4.65.05-9.51.5-9.38.87-11.78,2.38-12.89,3.74a21.91,21.91,0,0,0-2.41,3.85c-1,1.92-1.6,2.95-3,3.58-2.48,1.11-5.38,3.93-7.27,6.2-2,2.44-4.32,5.92-3.8,8.7a13.22,13.22,0,0,1-1,7c-1.54,3.06,1,9.23,7.17,13.17a17.44,17.44,0,0,1,4.07,3.68c1.49,1.73,3.17,3.7,6.91,2.76,1.18-.29,2.3-.54,3.39-.77A42.17,42.17,0,0,0,52,75.44c2.63-1.08,2.85-.89,4,.16a7.36,7.36,0,0,0,4.13,1.58l.42.06c-.23.84-.52,1.64-.8,2.41a13.41,13.41,0,0,0-1,3.55,4,4,0,0,0,2.37,4.08c1.29.59,4,4.12,4.34,8.49a6.31,6.31,0,0,1-.46,3.68,11.08,11.08,0,0,0-.93,4.84,14.07,14.07,0,0,0,2,6.94,9.35,9.35,0,0,1,1.21,3.21c.4,3.66,2.06,9,4.43,12.08a3.33,3.33,0,0,1,.46.71,2.67,2.67,0,0,0,.15,2.82l0,0a6.62,6.62,0,0,0,6.72,3.26v13.4c-1.56.11-3.14.16-4.72.16a69.64,69.64,0,1,1,0-139.27h1.14a5.29,5.29,0,1,0,0-4.78H74.42a74.42,74.42,0,0,0-52.62,127,73.94,73.94,0,0,0,52.62,21.8A75.86,75.86,0,0,0,84,151.1v-4.84h-.06V130.44a2.28,2.28,0,0,0,0-.26,2.45,2.45,0,0,0,0-.27,2.52,2.52,0,0,0-2.51-2.26,2.62,2.62,0,0,0-.79.13,2.58,2.58,0,0,0-.75.4c-1.59.77-2.41.49-2.91,0,.26-1.11.12-2.61-1.39-4.58s-3.1-6.3-3.48-9.69A13.41,13.41,0,0,0,70.38,109a9.49,9.49,0,0,1-1.44-4.74,6.37,6.37,0,0,1,.57-3,11,11,0,0,0,.81-5.89c-.43-5.6-3.69-10.54-6.65-12.23.12-.51.4-1.28.62-1.89.33-.91.71-1.94,1-3.09a4.5,4.5,0,0,0-.41-3.78c-1-1.52-2.75-1.78-4-2a4.81,4.81,0,0,1-1.62-.4c-2.74-2.47-4.94-2.72-9-1a37.38,37.38,0,0,1-6.62,1.85c-1.12.24-2.28.5-3.53.81-.87.22-.87.22-2.12-1.24a22,22,0,0,0-5.11-4.58c-4.37-2.81-5.48-6.31-5.42-7.13a18.19,18.19,0,0,0,1.34-9.88c0-.47.67-2.29,2.93-5a19,19,0,0,1,5.38-4.69c3-1.35,4.24-3.68,5.32-5.73a17.75,17.75,0,0,1,1.87-3c.14-.12,1.71-1.31,9.9-2,3.83-.34,7.44-.43,8.53-.46a7.81,7.81,0,0,1,1.31.55A3.61,3.61,0,0,0,63.68,33.88Z"/>
          </g>
        </g>
      </svg>
    </a>
  </mdb-navbar-brand>
</mdb-navbar>
</code></pre>

<p>If my code won't work for you, could you please send me your app via email? You can find me here: d.gemza@mdbootstrap.com</p>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

Dear @ewgiddings

I have tried to reproduce your problem again, but without success.

I have copied your <svg> element, and it is working fine.

Please take a look at the below code and screenshot.

.html:

<mdb-navbar SideClass="navbar navbar-dark indigo">
  <mdb-navbar-brand>
    <a class="navbar-brand" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.84 151.71" height="60">
        <defs>
          <style>.cls-1 {
            fill: url(#linear-gradient);
          }

          .cls-2 {
            fill: url(#linear-gradient-2);
          }</style>
          <linearGradient id="linear-gradient" x1="118.28" y1="6.12" x2="118.28" y2="150.41"
                          gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#2bbbad"/>
            <stop offset="0.05" stop-color="#32bba9"/>
            <stop offset="0.13" stop-color="#45bb9e"/>
            <stop offset="0.22" stop-color="#64bb8c"/>
            <stop offset="0.32" stop-color="#90bb73"/>
            <stop offset="0.42" stop-color="#c6bb54"/>
            <stop offset="0.52" stop-color="#fb3"/>
            <stop offset="0.62" stop-color="#ff9d37"/>
            <stop offset="0.79" stop-color="#ff6d3e"/>
            <stop offset="0.92" stop-color="#ff4f42"/>
            <stop offset="1" stop-color="#f44"/>
          </linearGradient>
          <linearGradient id="linear-gradient-2" x1="44.04" y1="0" x2="44.04" y2="151.71"
                          xlink:href="#linear-gradient"/>
        </defs>
        <title>TRAGOA</title>
        <g id="Layer_2" data-name="Layer 2">
          <g id="Layer_2-2" data-name="Layer 2">
            <path class="cls-1"
                  d="M127,24.66A74,74,0,0,0,96.88,6.31a2,2,0,0,0-.41-.13,2.51,2.51,0,0,0-.55-.06,2.61,2.61,0,0,0-2.6,2.34,2.44,2.44,0,0,0,0,.27,2.44,2.44,0,0,0,0,.27v1.26h0V36.54l.65.69c.66.69.19,1.83.12,2l-.1.19-.07.27c-.61,2.34-.41,5.54,2.12,6.88.51.34,1.35,2.25,1.81,3.28a25.68,25.68,0,0,0,1.34,2.73c.51.86,1.12,2,1.66,3,1.28,2.36,1.61,3,2.25,3.4.38.29,2.8,2.27,5.07,4.14.76,1.51,2.57,4.44,5.28,4.44a12.59,12.59,0,0,0,4.15-1.1c.73-.27,1.52-.57,2.31-.81q-.83,1.94-2.75,5.46c-.51.93-.81,1.48-1,1.9-.55.63-2.31,2.3-3.87,3.78-1.75,1.66-3.74,3.54-5.66,5.46a11,11,0,0,0-2.32,12.47c.47,6.51-1,8.9-1.71,9.31l-.05,0c-1.64.64-7,3-6.63,7,.08.86-1.27,3.71-2.82,6l-.37.55,0,.66,0,.26a5.28,5.28,0,1,0,4.49,2,13.14,13.14,0,0,0,.25-1.3c1.14-1.74,3.44-5.61,3.3-8.39a9.3,9.3,0,0,1,3.53-2.29c1.32-.45,5.81-2.86,4.81-14.67l0-.51-.26-.45A6.22,6.22,0,0,1,110,85.59c1.87-1.88,3.83-3.74,5.56-5.38,3.9-3.7,4.88-4.63,5.1-5.62.14-.28.42-.78.66-1.23,3.48-6.37,4.8-9.56,3.4-11.68a3.13,3.13,0,0,0-3-1.35,23.09,23.09,0,0,0-5.87,1.61,18.33,18.33,0,0,1-2.24.75,7.47,7.47,0,0,1-1.37-2.09l-.23-.52-.44-.36c-3.55-2.92-4.9-4-5.44-4.44-.25-.41-.76-1.34-1.14-2-.56-1-1.19-2.19-1.76-3.13a22.09,22.09,0,0,1-1.07-2.21c-1-2.16-1.94-4.39-3.75-5.46a4.16,4.16,0,0,1,0-1.39,6.73,6.73,0,0,0-.41-6.29V11.81a69.63,69.63,0,0,1,3.77,129.46,5.28,5.28,0,1,0,1.64,4.55A74.46,74.46,0,0,0,127,24.66Z"/>
            <path class="cls-2"
                  d="M63.68,33.88c.91,2,3.27,2.29,5.35,2.52l.82.1c.41,0,.71.28,1.43.88a8.71,8.71,0,0,0,4.6,2.25c1.41.19,3.81,0,4.41-3.08a5.19,5.19,0,0,0,2.51.63,5.28,5.28,0,1,0-5.28-5.28c0,.1,0,.2,0,.29a4.1,4.1,0,0,0-1.76,2.49,5.54,5.54,0,0,1-1.43-1,7.3,7.3,0,0,0-3.87-2l-.92-.1-.71-.09a3.78,3.78,0,0,0,0-2.59c-.93-2.5-4.26-3.5-5.26-3.75l-.3-.08H63c-.19,0-4.65.05-9.51.5-9.38.87-11.78,2.38-12.89,3.74a21.91,21.91,0,0,0-2.41,3.85c-1,1.92-1.6,2.95-3,3.58-2.48,1.11-5.38,3.93-7.27,6.2-2,2.44-4.32,5.92-3.8,8.7a13.22,13.22,0,0,1-1,7c-1.54,3.06,1,9.23,7.17,13.17a17.44,17.44,0,0,1,4.07,3.68c1.49,1.73,3.17,3.7,6.91,2.76,1.18-.29,2.3-.54,3.39-.77A42.17,42.17,0,0,0,52,75.44c2.63-1.08,2.85-.89,4,.16a7.36,7.36,0,0,0,4.13,1.58l.42.06c-.23.84-.52,1.64-.8,2.41a13.41,13.41,0,0,0-1,3.55,4,4,0,0,0,2.37,4.08c1.29.59,4,4.12,4.34,8.49a6.31,6.31,0,0,1-.46,3.68,11.08,11.08,0,0,0-.93,4.84,14.07,14.07,0,0,0,2,6.94,9.35,9.35,0,0,1,1.21,3.21c.4,3.66,2.06,9,4.43,12.08a3.33,3.33,0,0,1,.46.71,2.67,2.67,0,0,0,.15,2.82l0,0a6.62,6.62,0,0,0,6.72,3.26v13.4c-1.56.11-3.14.16-4.72.16a69.64,69.64,0,1,1,0-139.27h1.14a5.29,5.29,0,1,0,0-4.78H74.42a74.42,74.42,0,0,0-52.62,127,73.94,73.94,0,0,0,52.62,21.8A75.86,75.86,0,0,0,84,151.1v-4.84h-.06V130.44a2.28,2.28,0,0,0,0-.26,2.45,2.45,0,0,0,0-.27,2.52,2.52,0,0,0-2.51-2.26,2.62,2.62,0,0,0-.79.13,2.58,2.58,0,0,0-.75.4c-1.59.77-2.41.49-2.91,0,.26-1.11.12-2.61-1.39-4.58s-3.1-6.3-3.48-9.69A13.41,13.41,0,0,0,70.38,109a9.49,9.49,0,0,1-1.44-4.74,6.37,6.37,0,0,1,.57-3,11,11,0,0,0,.81-5.89c-.43-5.6-3.69-10.54-6.65-12.23.12-.51.4-1.28.62-1.89.33-.91.71-1.94,1-3.09a4.5,4.5,0,0,0-.41-3.78c-1-1.52-2.75-1.78-4-2a4.81,4.81,0,0,1-1.62-.4c-2.74-2.47-4.94-2.72-9-1a37.38,37.38,0,0,1-6.62,1.85c-1.12.24-2.28.5-3.53.81-.87.22-.87.22-2.12-1.24a22,22,0,0,0-5.11-4.58c-4.37-2.81-5.48-6.31-5.42-7.13a18.19,18.19,0,0,0,1.34-9.88c0-.47.67-2.29,2.93-5a19,19,0,0,1,5.38-4.69c3-1.35,4.24-3.68,5.32-5.73a17.75,17.75,0,0,1,1.87-3c.14-.12,1.71-1.31,9.9-2,3.83-.34,7.44-.43,8.53-.46a7.81,7.81,0,0,1,1.31.55A3.61,3.61,0,0,0,63.68,33.88Z"/>
          </g>
        </g>
      </svg>
    </a>
  </mdb-navbar-brand>
</mdb-navbar>

If my code won't work for you, could you please send me your app via email? You can find me here: d.gemza@mdbootstrap.com

Best Regards,

Damian

Add comment

ewgiddings free answered 5 years ago

0 0 Best answer

<pre class="prettyprint"><code><mdb-navbar SideClass="navbar navbar-expand-lg justify-content-between navbar-light">      
  <mdb-navbar-brand>
    <a class="navbar-brand" [routerLink]="loggedIn() ? '/home' : '/welcome'" >
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.84 151.71"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="118.28" y1="6.12" x2="118.28" y2="150.41" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2bbbad"/><stop offset="0.05" stop-color="#32bba9"/><stop offset="0.13" stop-color="#45bb9e"/><stop offset="0.22" stop-color="#64bb8c"/><stop offset="0.32" stop-color="#90bb73"/><stop offset="0.42" stop-color="#c6bb54"/><stop offset="0.52" stop-color="#fb3"/><stop offset="0.62" stop-color="#ff9d37"/><stop offset="0.79" stop-color="#ff6d3e"/><stop offset="0.92" stop-color="#ff4f42"/><stop offset="1" stop-color="#f44"/></linearGradient><linearGradient id="linear-gradient-2" x1="44.04" y1="0" x2="44.04" y2="151.71" xlink:href="#linear-gradient"/></defs><title>TRAGOA</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M127,24.66A74,74,0,0,0,96.88,6.31a2,2,0,0,0-.41-.13,2.51,2.51,0,0,0-.55-.06,2.61,2.61,0,0,0-2.6,2.34,2.44,2.44,0,0,0,0,.27,2.44,2.44,0,0,0,0,.27v1.26h0V36.54l.65.69c.66.69.19,1.83.12,2l-.1.19-.07.27c-.61,2.34-.41,5.54,2.12,6.88.51.34,1.35,2.25,1.81,3.28a25.68,25.68,0,0,0,1.34,2.73c.51.86,1.12,2,1.66,3,1.28,2.36,1.61,3,2.25,3.4.38.29,2.8,2.27,5.07,4.14.76,1.51,2.57,4.44,5.28,4.44a12.59,12.59,0,0,0,4.15-1.1c.73-.27,1.52-.57,2.31-.81q-.83,1.94-2.75,5.46c-.51.93-.81,1.48-1,1.9-.55.63-2.31,2.3-3.87,3.78-1.75,1.66-3.74,3.54-5.66,5.46a11,11,0,0,0-2.32,12.47c.47,6.51-1,8.9-1.71,9.31l-.05,0c-1.64.64-7,3-6.63,7,.08.86-1.27,3.71-2.82,6l-.37.55,0,.66,0,.26a5.28,5.28,0,1,0,4.49,2,13.14,13.14,0,0,0,.25-1.3c1.14-1.74,3.44-5.61,3.3-8.39a9.3,9.3,0,0,1,3.53-2.29c1.32-.45,5.81-2.86,4.81-14.67l0-.51-.26-.45A6.22,6.22,0,0,1,110,85.59c1.87-1.88,3.83-3.74,5.56-5.38,3.9-3.7,4.88-4.63,5.1-5.62.14-.28.42-.78.66-1.23,3.48-6.37,4.8-9.56,3.4-11.68a3.13,3.13,0,0,0-3-1.35,23.09,23.09,0,0,0-5.87,1.61,18.33,18.33,0,0,1-2.24.75,7.47,7.47,0,0,1-1.37-2.09l-.23-.52-.44-.36c-3.55-2.92-4.9-4-5.44-4.44-.25-.41-.76-1.34-1.14-2-.56-1-1.19-2.19-1.76-3.13a22.09,22.09,0,0,1-1.07-2.21c-1-2.16-1.94-4.39-3.75-5.46a4.16,4.16,0,0,1,0-1.39,6.73,6.73,0,0,0-.41-6.29V11.81a69.63,69.63,0,0,1,3.77,129.46,5.28,5.28,0,1,0,1.64,4.55A74.46,74.46,0,0,0,127,24.66Z"/><path class="cls-2" d="M63.68,33.88c.91,2,3.27,2.29,5.35,2.52l.82.1c.41,0,.71.28,1.43.88a8.71,8.71,0,0,0,4.6,2.25c1.41.19,3.81,0,4.41-3.08a5.19,5.19,0,0,0,2.51.63,5.28,5.28,0,1,0-5.28-5.28c0,.1,0,.2,0,.29a4.1,4.1,0,0,0-1.76,2.49,5.54,5.54,0,0,1-1.43-1,7.3,7.3,0,0,0-3.87-2l-.92-.1-.71-.09a3.78,3.78,0,0,0,0-2.59c-.93-2.5-4.26-3.5-5.26-3.75l-.3-.08H63c-.19,0-4.65.05-9.51.5-9.38.87-11.78,2.38-12.89,3.74a21.91,21.91,0,0,0-2.41,3.85c-1,1.92-1.6,2.95-3,3.58-2.48,1.11-5.38,3.93-7.27,6.2-2,2.44-4.32,5.92-3.8,8.7a13.22,13.22,0,0,1-1,7c-1.54,3.06,1,9.23,7.17,13.17a17.44,17.44,0,0,1,4.07,3.68c1.49,1.73,3.17,3.7,6.91,2.76,1.18-.29,2.3-.54,3.39-.77A42.17,42.17,0,0,0,52,75.44c2.63-1.08,2.85-.89,4,.16a7.36,7.36,0,0,0,4.13,1.58l.42.06c-.23.84-.52,1.64-.8,2.41a13.41,13.41,0,0,0-1,3.55,4,4,0,0,0,2.37,4.08c1.29.59,4,4.12,4.34,8.49a6.31,6.31,0,0,1-.46,3.68,11.08,11.08,0,0,0-.93,4.84,14.07,14.07,0,0,0,2,6.94,9.35,9.35,0,0,1,1.21,3.21c.4,3.66,2.06,9,4.43,12.08a3.33,3.33,0,0,1,.46.71,2.67,2.67,0,0,0,.15,2.82l0,0a6.62,6.62,0,0,0,6.72,3.26v13.4c-1.56.11-3.14.16-4.72.16a69.64,69.64,0,1,1,0-139.27h1.14a5.29,5.29,0,1,0,0-4.78H74.42a74.42,74.42,0,0,0-52.62,127,73.94,73.94,0,0,0,52.62,21.8A75.86,75.86,0,0,0,84,151.1v-4.84h-.06V130.44a2.28,2.28,0,0,0,0-.26,2.45,2.45,0,0,0,0-.27,2.52,2.52,0,0,0-2.51-2.26,2.62,2.62,0,0,0-.79.13,2.58,2.58,0,0,0-.75.4c-1.59.77-2.41.49-2.91,0,.26-1.11.12-2.61-1.39-4.58s-3.1-6.3-3.48-9.69A13.41,13.41,0,0,0,70.38,109a9.49,9.49,0,0,1-1.44-4.74,6.37,6.37,0,0,1,.57-3,11,11,0,0,0,.81-5.89c-.43-5.6-3.69-10.54-6.65-12.23.12-.51.4-1.28.62-1.89.33-.91.71-1.94,1-3.09a4.5,4.5,0,0,0-.41-3.78c-1-1.52-2.75-1.78-4-2a4.81,4.81,0,0,1-1.62-.4c-2.74-2.47-4.94-2.72-9-1a37.38,37.38,0,0,1-6.62,1.85c-1.12.24-2.28.5-3.53.81-.87.22-.87.22-2.12-1.24a22,22,0,0,0-5.11-4.58c-4.37-2.81-5.48-6.31-5.42-7.13a18.19,18.19,0,0,0,1.34-9.88c0-.47.67-2.29,2.93-5a19,19,0,0,1,5.38-4.69c3-1.35,4.24-3.68,5.32-5.73a17.75,17.75,0,0,1,1.87-3c.14-.12,1.71-1.31,9.9-2,3.83-.34,7.44-.43,8.53-.46a7.81,7.81,0,0,1,1.31.55A3.61,3.61,0,0,0,63.68,33.88Z"/></g></g></svg>
    </a>
  </mdb-navbar-brand>
</code></pre>

<p>Damian this is what I am using it the image does not show...</p>

Please insert min. 20 characters.

<mdb-navbar SideClass="navbar navbar-expand-lg justify-content-between navbar-light">      
  <mdb-navbar-brand>
    <a class="navbar-brand" [routerLink]="loggedIn() ? '/home' : '/welcome'" >
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.84 151.71"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="118.28" y1="6.12" x2="118.28" y2="150.41" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2bbbad"/><stop offset="0.05" stop-color="#32bba9"/><stop offset="0.13" stop-color="#45bb9e"/><stop offset="0.22" stop-color="#64bb8c"/><stop offset="0.32" stop-color="#90bb73"/><stop offset="0.42" stop-color="#c6bb54"/><stop offset="0.52" stop-color="#fb3"/><stop offset="0.62" stop-color="#ff9d37"/><stop offset="0.79" stop-color="#ff6d3e"/><stop offset="0.92" stop-color="#ff4f42"/><stop offset="1" stop-color="#f44"/></linearGradient><linearGradient id="linear-gradient-2" x1="44.04" y1="0" x2="44.04" y2="151.71" xlink:href="#linear-gradient"/></defs><title>TRAGOA</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M127,24.66A74,74,0,0,0,96.88,6.31a2,2,0,0,0-.41-.13,2.51,2.51,0,0,0-.55-.06,2.61,2.61,0,0,0-2.6,2.34,2.44,2.44,0,0,0,0,.27,2.44,2.44,0,0,0,0,.27v1.26h0V36.54l.65.69c.66.69.19,1.83.12,2l-.1.19-.07.27c-.61,2.34-.41,5.54,2.12,6.88.51.34,1.35,2.25,1.81,3.28a25.68,25.68,0,0,0,1.34,2.73c.51.86,1.12,2,1.66,3,1.28,2.36,1.61,3,2.25,3.4.38.29,2.8,2.27,5.07,4.14.76,1.51,2.57,4.44,5.28,4.44a12.59,12.59,0,0,0,4.15-1.1c.73-.27,1.52-.57,2.31-.81q-.83,1.94-2.75,5.46c-.51.93-.81,1.48-1,1.9-.55.63-2.31,2.3-3.87,3.78-1.75,1.66-3.74,3.54-5.66,5.46a11,11,0,0,0-2.32,12.47c.47,6.51-1,8.9-1.71,9.31l-.05,0c-1.64.64-7,3-6.63,7,.08.86-1.27,3.71-2.82,6l-.37.55,0,.66,0,.26a5.28,5.28,0,1,0,4.49,2,13.14,13.14,0,0,0,.25-1.3c1.14-1.74,3.44-5.61,3.3-8.39a9.3,9.3,0,0,1,3.53-2.29c1.32-.45,5.81-2.86,4.81-14.67l0-.51-.26-.45A6.22,6.22,0,0,1,110,85.59c1.87-1.88,3.83-3.74,5.56-5.38,3.9-3.7,4.88-4.63,5.1-5.62.14-.28.42-.78.66-1.23,3.48-6.37,4.8-9.56,3.4-11.68a3.13,3.13,0,0,0-3-1.35,23.09,23.09,0,0,0-5.87,1.61,18.33,18.33,0,0,1-2.24.75,7.47,7.47,0,0,1-1.37-2.09l-.23-.52-.44-.36c-3.55-2.92-4.9-4-5.44-4.44-.25-.41-.76-1.34-1.14-2-.56-1-1.19-2.19-1.76-3.13a22.09,22.09,0,0,1-1.07-2.21c-1-2.16-1.94-4.39-3.75-5.46a4.16,4.16,0,0,1,0-1.39,6.73,6.73,0,0,0-.41-6.29V11.81a69.63,69.63,0,0,1,3.77,129.46,5.28,5.28,0,1,0,1.64,4.55A74.46,74.46,0,0,0,127,24.66Z"/><path class="cls-2" d="M63.68,33.88c.91,2,3.27,2.29,5.35,2.52l.82.1c.41,0,.71.28,1.43.88a8.71,8.71,0,0,0,4.6,2.25c1.41.19,3.81,0,4.41-3.08a5.19,5.19,0,0,0,2.51.63,5.28,5.28,0,1,0-5.28-5.28c0,.1,0,.2,0,.29a4.1,4.1,0,0,0-1.76,2.49,5.54,5.54,0,0,1-1.43-1,7.3,7.3,0,0,0-3.87-2l-.92-.1-.71-.09a3.78,3.78,0,0,0,0-2.59c-.93-2.5-4.26-3.5-5.26-3.75l-.3-.08H63c-.19,0-4.65.05-9.51.5-9.38.87-11.78,2.38-12.89,3.74a21.91,21.91,0,0,0-2.41,3.85c-1,1.92-1.6,2.95-3,3.58-2.48,1.11-5.38,3.93-7.27,6.2-2,2.44-4.32,5.92-3.8,8.7a13.22,13.22,0,0,1-1,7c-1.54,3.06,1,9.23,7.17,13.17a17.44,17.44,0,0,1,4.07,3.68c1.49,1.73,3.17,3.7,6.91,2.76,1.18-.29,2.3-.54,3.39-.77A42.17,42.17,0,0,0,52,75.44c2.63-1.08,2.85-.89,4,.16a7.36,7.36,0,0,0,4.13,1.58l.42.06c-.23.84-.52,1.64-.8,2.41a13.41,13.41,0,0,0-1,3.55,4,4,0,0,0,2.37,4.08c1.29.59,4,4.12,4.34,8.49a6.31,6.31,0,0,1-.46,3.68,11.08,11.08,0,0,0-.93,4.84,14.07,14.07,0,0,0,2,6.94,9.35,9.35,0,0,1,1.21,3.21c.4,3.66,2.06,9,4.43,12.08a3.33,3.33,0,0,1,.46.71,2.67,2.67,0,0,0,.15,2.82l0,0a6.62,6.62,0,0,0,6.72,3.26v13.4c-1.56.11-3.14.16-4.72.16a69.64,69.64,0,1,1,0-139.27h1.14a5.29,5.29,0,1,0,0-4.78H74.42a74.42,74.42,0,0,0-52.62,127,73.94,73.94,0,0,0,52.62,21.8A75.86,75.86,0,0,0,84,151.1v-4.84h-.06V130.44a2.28,2.28,0,0,0,0-.26,2.45,2.45,0,0,0,0-.27,2.52,2.52,0,0,0-2.51-2.26,2.62,2.62,0,0,0-.79.13,2.58,2.58,0,0,0-.75.4c-1.59.77-2.41.49-2.91,0,.26-1.11.12-2.61-1.39-4.58s-3.1-6.3-3.48-9.69A13.41,13.41,0,0,0,70.38,109a9.49,9.49,0,0,1-1.44-4.74,6.37,6.37,0,0,1,.57-3,11,11,0,0,0,.81-5.89c-.43-5.6-3.69-10.54-6.65-12.23.12-.51.4-1.28.62-1.89.33-.91.71-1.94,1-3.09a4.5,4.5,0,0,0-.41-3.78c-1-1.52-2.75-1.78-4-2a4.81,4.81,0,0,1-1.62-.4c-2.74-2.47-4.94-2.72-9-1a37.38,37.38,0,0,1-6.62,1.85c-1.12.24-2.28.5-3.53.81-.87.22-.87.22-2.12-1.24a22,22,0,0,0-5.11-4.58c-4.37-2.81-5.48-6.31-5.42-7.13a18.19,18.19,0,0,0,1.34-9.88c0-.47.67-2.29,2.93-5a19,19,0,0,1,5.38-4.69c3-1.35,4.24-3.68,5.32-5.73a17.75,17.75,0,0,1,1.87-3c.14-.12,1.71-1.31,9.9-2,3.83-.34,7.44-.43,8.53-.46a7.81,7.81,0,0,1,1.31.55A3.61,3.61,0,0,0,63.68,33.88Z"/></g></g></svg>
    </a>
  </mdb-navbar-brand>

Damian this is what I am using it the image does not show...

Add comment

Damian Gemza staff answered 5 years ago

1 0 Best answer

<p>Dear <a href="/profile/?id=39724" target="_blank" rel="nofollow">@ewgiddings</a></p>

<p>Could you please provide me with the <code><svg></code> HTML code which you're using? I have tried to reproduce your problem, but I don't know, what's wrong.</p>

<p>I've got an <code>svg</code> element in the <code>mdb-navbar-brand</code> component. If I'm not setting <code>svg</code> width with css, it takes all possible space (100% width and height).</p>

<p>Please take a look at this code:</p>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

Dear @ewgiddings

Could you please provide me with the <svg> HTML code which you're using? I have tried to reproduce your problem, but I don't know, what's wrong.

I've got an svg element in the mdb-navbar-brand component. If I'm not setting svg width with css, it takes all possible space (100% width and height).

Please take a look at this code:

<mdb-navbar SideClass="navbar navbar-dark indigo">
  <mdb-navbar-brand>
    <a class="navbar-brand" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
        <path fill="#1A374D"
              d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
        <path
          d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
      </svg>
    </a>
  </mdb-navbar-brand>
</mdb-navbar>

Best Regards,

Damian

ewgiddings free commented 5 years ago

I have posted what you are looking for below. Thank you for looking into this...

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.5.0
Device: Surface
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

ewgiddings

164Support score
21Questions 7Answers 0Snippets