Every time I insert the SVG logo onto the bootstrap navbar, the formatting mysteriously alters

I'm facing an issue with my svg logo on the navbar - half of it is formatted correctly while the other half is not. Additionally, there is a discrepancy in how it appears on Safari and Chrome. I exported this svg file from Adobe Illustrator and incorporated it into a Bootstrap setup.

Here's how my logo should look

This is how my logo looks on Safari

This is how my logo looks on Chrome

Below is the svg code snippet:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 7601.82 2387.31" style="enable-background:new 0 0 7601.82 2387.31;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00ADEE;}
.st1{fill:none;}
.st2{fill:#FFFFFF;}
.st3{fill:#231F20;}
.st4{font-family:'AlternateGotNo1D';}
.st5{font-size:1043.9034px;}
.st6{letter-spacing:-10.31;}
.st7{letter-spacing:-4.69;}
.st8{letter-spacing:-25.32;}
</style>
<g>
<g>
<path class="st0" d="M1417.48,1732v8.27l11.2,6.47C1424.62,1742.25,1420.84,1737.39,1417.48,1732z"/>
...
<a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
htmlcsssvgbootstrap-4

Answer №1

To ensure proper display of your SVG, make sure the "AlternateGotNo1D" font is installed on end users' computers or embedded in your SVG file as a URL.

An easy solution is to convert the text to outlines which guarantees consistent display across different browsers.

  • Open the file in Adobe Illustrator
  • Select the text
  • Convert to outlines by going to Type -> Create Outlines
  • Export the file as SVG again.

If you still encounter display issues after converting to outlines, confirm that there are no more <text> elements in your SVG.

Answer №2

There seems to be an issue related to font display within your SVG file. When using x and y attributes for tspan elements, text alignment may get disrupted if a different font is utilized. To resolve this issue, consider removing the x and y attributes from the tspan elements.

Furthermore, adjusting the value of the viewBox might help in preventing text overflow beyond the SVG canvas. If you are using varying fonts, it may be necessary to recalculate the viewBox attribute's value. You can utilize JavaScript to determine the size and position of the wrapper group with the following code: wrapper.getBBox()

The output of wrapper.getBBox() provides an SVGRect object that defines the bounding box of the wrapper (x, y, width, height). Set the viewBox attribute to bb.x bb.y bb.width bb.height, where bb represents the bounding box object.

I hope this information proves useful.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 13000 2387.31" style="enable-background:new 0 0 7601.82 2387.31;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#00ADEE;}
    .st1{fill:none;}
    .st2{fill:#FFFFFF;}
    .st3{fill:#231F20;}
    .st4{font-family:'AlternateGotNo1D';}
    .st5{font-size:1043.9034px;}
    .st6{letter-spacing:-10.31;}
    .st7{letter-spacing:-4.69;}
    .st8{letter-spacing:-25.32;}
</style>
<g id="wrapper">
    <!-- Paths -->
</g>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating a URL into an HTML marquee

As a beginner in coding, I'm currently exploring how to incorporate a link into my marquee. My goal is to eliminate any color change or underline animation as well. Do you have any recommendations? .Marquee { color: #da6fe2; background-color: t ...

htmlcss

I attempted to use jQuery to render a partial view within my main view, but for some reason, the partial view does not show up at runtime

In the controller, there are actions defined: public ActionResult AdminRoles(int? selectedValue) { if (!LogedUser.InRole(Functions.User, Roles.View)) return RedirectToAction("Login"); return View(db.Users.Where(u => u.I ...

c#jqueryasp.net-mvchtml

Open the HTML document and access the file contents

I'm having trouble reading a text file from my computer onto a website. It works fine in Internet Explorer, but won't work in Chrome. I don't have much experience with HTML, so any help would be much appreciated! <html> <body> ...

javascripthtmlajaxgoogle-chrome

Adjust the vertical position of the image with HTML and CSS

I want to adjust the positioning of the image below the blue navigation bar so that it aligns with the main content area below, creating the appearance of a shaded box around the webpage's content. The image in question is boy_top.png. Is there a way ...

csshtml

Aligning icons and text vertically in a list

I've encountered this issue multiple times and I'm always unsure of the best approach to resolve it. Here is a screenshot for better context: This is what it should look like... .container { max-width: 360px; font-size: 16px; } .talking-poin ...

htmlcssvertical-alignment

Strange arrangement of items in navbar - Using BOOTSTRAP 4

I'm currently experimenting with BOOTSTRAP 4 and the navbar, but the output on my webpage doesn't match what I want to achieve. https://i.sstatic.net/FnGlv.png What I want to achieve is shown in the following link: https://i.sstatic.net/oelsv. ...

htmltwitter-bootstrapcssflexboxbootstrap-4

Unable to extend the data-toggle dropdown to the entire width of the screen

Is there a way to make my navbar dropdown menu expand to the full width of the screen without leaving white space on the left side? I am using Bootstrap and have included a media query in my CSS as shown below. https://i.sstatic.net/US3ce.png <nav clas ...

htmlcsstwitter-bootstrapbootstrap-5

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

On my website, I have a standard HTML input field for text input. To track the horizontal position of a specific word continuously, I have implemented a method using an invisible <span> element to display the content of the input field and then utili ...

javascripthtmlcssinput

Is there a way to configure gulp-sass to compile the actual bootstrap CSS styles instead of just echoing the import statement?

I recently embarked on a project where I wanted to utilize the Sass bootstrap source (.SCSS), apply some customizations (through another .SCSS file), and generate a CSS output. To achieve this, I decided to employ Gulp in VS2019 with gulp-sass. After goin ...

csssassbootstrap-4gulp

Show various shapes based on the values retrieved from MYSQL database

I am just starting to learn MYSQL and PHP, and I am currently working on creating a Course registration application using xampp. This application is designed to collect user data and store it in a MYSQL database. Within my MYSQL table, I have user details ...

phpmysqlhtml

Styling a numerical value to appear as currency with CSS

Is there a way to style the content of an element as currency using just CSS? It would be great to know if we can control how the value is displayed with CSS. I haven't found anything yet, so not getting my hopes up :) <!DOCTYPE html> <html& ...

htmlcssformat

The outcome of the JQuery function did not meet the anticipated result

Here is the code I am using: $("p").css("background-color", "yellow"); alert( $("p").css("background-color")); The alert is showing undefined instead of the expected color value. I have tested this code on both Google Chrome and Firefox. Strangely, it w ...

javascriptjqueryhtmlcss

Utilizing Angular PrimeNG's range datepicker, you can select a date range spanning from January 31st to December 1st, 2023 within a reactive form. Take it a step further by calculating

Here is some HTML code: <div class="row"> <div class="col-4"> <p-calendar label="startDate" formControlName="startDate" [minDate]="daMaxRange" ...

javascripthtmlangulartypescriptdate-range

Using JavaScript, append a hidden input field in Yii2 and retrieve it from the controller

Seeking assistance as a newcomer to yii2. I'm looking for help in resolving an issue that has arisen. I'm attempting to add a hidden input field to my form using JavaScript (not linked to a model). Subsequently, when I submit the form, I want to ...

javascriptjqueryhtmlyii2yii2-advanced-app

What could be causing the icon link to not show up in Bootstrap 4?

Currently, I am engrossed in reading the book titled "ASP .NET MVC 5." However, I have hit a roadblock. The author utilizes Bootstrap 3 in the book, but the newer version of Bootstrap contains some modifications that are causing me difficulties in solving ...

htmlcssmodel-view-controllerbootstrap-4

Tips for retaining form inputs without the need for a submit event when the page is reloaded or refreshed

I have a form on a page with multiple text inputs In addition to the form, I have implemented Zend pagination to allow users to select results. However, when using Zend paginate, the user's form inputs are lost because it is not submitted. Since th ...

phpjavascriptjqueryhtmlzend-framework

Tips for showcasing a complete background image in a div even if the content inside is minimal

Check out the header image on ink.talentosoft.com if you get a chance. The height of the header image is precisely 388 px. I am looking to have the background of this div fully displayed. Currently, the setup for the div looks like this: background: url ...

cssbackground-image

Generate an image of a "button" with dynamic hover text

I am trying to create a clickable image with dynamically changing text overlaid on it. I have the PHP code that retrieves the necessary information for the text, but I am struggling to create the button as I am new to this type of task. Here is an example ...

phpjavascripthtmlcss

Troubleshooting varying <li> heights in Google Chrome with CSS

Kindly review the image enclosed below ul li{ width:100px; height:200px; float:left; border:10px double #333; -webkit-border-radius: 10px; -moz-border-radius: 10px; } <ul> <li><a href="image.jpg"><img src ...

css

Having trouble integrating Stratus 2 Beta with the HTML code of a website

My task was to incorporate Stratus 2 Beta into our website for music streaming. Although the Stratus website makes it appear simple to add their code to the HTML, I have been facing difficulties in getting it to function properly. Here is the code I have ...

jqueryhtmlsoundcloudsoundcloud-stratus