stackoom
  简体   繁体   中英

SVG logo in Bootstrap's navbar-brand

 原文  2017-01-12 06:47:22  9   2    html/ twitter-bootstrap/ svg

Question

Explanation

I'm trying to place my SVG logo in a Bootstrap's navbar, but, for some reason, it won't work. I've tried to use <object> (as recommended at CSS Tricks ), inline svg and <img> , as you can see in the code below, but nothing worked.

Code

You can save the SVG logo to use with <object> from Bootstrap's site or download here . 

 #navigation { background-color: rgba(72, 8, 111, 0.4); border: 0 none; margin: 0; } .navbar-brand { padding: 0; } .logo { margin: 0; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Page Title --> <title>svg on bootstrap's navbar</title> <!-- CSS ================================================== --> <!-- Fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Twitter Bootstrap css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Main Stylesheet --> <link rel="stylesheet" href="main.css"> </head> <body id="body"> <header id="navigation" class="navbar-fixed-top navbar"> <div class="container"> <div class="navbar-header"> <!-- responsive nav button --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <i class="fa fa-bars fa-2x"></i> </button> <!-- end responsive nav button --> <!-- logo png --> <a class="navbar-brand" href="#First"> <img src="http://i.imgur.com/qHjO7J9.png" alt="logo"> </a> <!-- end logo png --> <!-- logo object <a class="navbar-brand" href="#First"> <object type="image/svg+xml" data="logo.svg" class="logo"> Logo </object> </a> end logo object --> <!-- logo inline svg <a class="navbar-brand" href="#First"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg> </a> end logo inline svg --> <!-- logo img svg <a class="navbar-brand" href="#First"> <img src="logo.svg" alt="logo"> </a> end logo img svg --> </div> <!-- main nav --> <nav class="collapse navbar-collapse navbar-right" role="navigation"> <ul id="nav" class="nav navbar-nav"> <li class="current"><a href="#First">First</a></li> <li><a href="#Second">Second</a></li> <li><a href="#Third">Third</a></li> <li><a href="#Forth">Forth</a></li> </ul> </nav> <!-- end main nav --> </div> </header> <section> <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg> </div> </section> <!-- jQuery Plugins ================================================== --> <!-- Main jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Twitter Bootstrap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>

Thanks in advance,
Luiz.

2 answers

solution1
 5  2017-01-12 09:11:39

You main problem is that you haven't specified a size for the SVG. If the SVG doesn't have width or height attributes, they default to "100%" - that is 100% width (of the parent container).

Below I have just set the width in the CSS and it is now a more reasonable size. You will want to add more styling to get it to sit where you want in the header bar. 

 #navigation { background-color: rgba(72, 8, 111, 0.4); border: 0 none; margin: 0; } .navbar-brand { padding: 0; } .logo { margin: 0; } svg { width: 50px; height: 50px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Page Title --> <title>svg on bootstrap's navbar</title> <!-- CSS ================================================== --> <!-- Fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Twitter Bootstrap css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Main Stylesheet --> <link rel="stylesheet" href="main.css"> </head> <body id="body"> <header id="navigation" class="navbar-fixed-top navbar"> <div class="container"> <div class="navbar-header"> <!-- responsive nav button --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <i class="fa fa-bars fa-2x"></i> </button> <!-- end responsive nav button --> <!-- logo png --> <a class="navbar-brand" href="#First"> <img src="http://i.imgur.com/qHjO7J9.png" alt="logo"> </a> </div> <!-- main nav --> <nav class="collapse navbar-collapse navbar-right" role="navigation"> <ul id="nav" class="nav navbar-nav"> <li class="current"><a href="#First">First</a></li> <li><a href="#Second">Second</a></li> <li><a href="#Third">Third</a></li> <li><a href="#Forth">Forth</a></li> </ul> </nav> <!-- end main nav --> </div> </header> <section> <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg> </div> </section> <!-- jQuery Plugins ================================================== --> <!-- Main jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Twitter Bootstrap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>

solution2
 3 ACCPTED  2017-01-12 07:13:02

As you can see below the tag works, as far as the placement in the html goes. I did have to add some css for sizing. I had to use just some random svg I found to demo it. Where is "logo.svg" being served from in your example? 

 #navigation { background-color: rgba(72, 8, 111, 0.4); border: 0 none; margin: 0; } .navbar-brand { padding: 0; } .logo { margin: 0; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Page Title --> <title>svg on bootstrap's navbar</title> <!-- CSS ================================================== --> <!-- Fontawesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Twitter Bootstrap css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Main Stylesheet --> <link rel="stylesheet" href="main.css"> </head> <body id="body"> <header id="navigation" class="navbar-fixed-top navbar"> <div class="container"> <div class="navbar-header"> <!-- responsive nav button --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <i class="fa fa-bars fa-2x"></i> </button> <!-- end responsive nav button --> <!-- logo png --> <a class="navbar-brand" href="#First"> <img src="http://i.imgur.com/qHjO7J9.png" alt="logo"> </a> <!-- end logo png --> <!-- logo object <a class="navbar-brand" href="#First"> <object type="image/svg+xml" data="logo.svg" class="logo"> Logo </object> </a> end logo object --> <!-- logo inline svg <a class="navbar-brand" href="#First"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg> </a> end logo inline svg --> <!-- logo img svg--> <a class="navbar-brand" href="#First"> <img style="max-height: 30px;" src="http://s.cdpn.io/3/kiwi.svg"> <!--img src="" alt="logo"--> </a> <!--end logo img svg --> </div> <!-- main nav --> <nav class="collapse navbar-collapse navbar-right" role="navigation"> <ul id="nav" class="nav navbar-nav"> <li class="current"><a href="#First">First</a></li> <li><a href="#Second">Second</a></li> <li><a href="#Third">Third</a></li> <li><a href="#Forth">Forth</a></li> </ul> </nav> <!-- end main nav --> </div> </header> <!-- REMOVE THIS <section> <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg> </div> </section> --> <!-- jQuery Plugins ================================================== --> <!-- Main jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Twitter Bootstrap --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Bootstrap navbar-brand logo/svg positioning Bootstrap navbar-brand logo overlapping on collapse Logo in BootStrap navbar-brand class behaving weridly Vertical align logo inside .navbar-brand with Bootstrap 3 bootstrap navbar-brand align link text with svg Bootstrap 3 multiline Navbar-brand How to solve navbar-brand logo issue Bootstrap navbar-brand centering within navbar How to align a navbar-brand and navbar with bootstrap 5? Bootstrap navbar-brand logo - portrait image has been cut off?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM