Inline SVG element appears too small within the side navigation bar

Hey everyone, I'm having an issue with an SVG logo that I exported from Adobe Illustrator. The logo displays properly when opened in a web browser, but appears too tiny to see clearly when used in a custom pull-out side navbar on my website. I currently have a Font Awesome icon as a placeholder, but now that the logo is ready, I need help replacing it. The list item with the class 'logo' contains the placeholder that needs to be swapped with the actual logo. Here's how the Navbar looks in index.html:

<nav class="custom-navbar">
    <ul class="custom-navbar-nav">

      <li class="logo">
        <a class="custom-nav-link">
          <span class="link-text">Kortney Stinson</span>
          <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="kickstarter-k"
            class="svg-inline--fa fa-kickstarter-k fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 384 512">
           // Placeholder goes here

        </a>


      </li>
      // Other menu items go here

This is the CSS being applied to the Navbar:

.custom-navbar {
    width: 5rem;
    height: 100vh;
    position: fixed;
    background-color: var(--bg-primary);
    transition: width 200ms ease;
    z-index: 1;
}
// More CSS styles...

Finally, here is the SVG logo code that I am trying to use:

 <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" width="1080px" height="1080px" viewBox="0 0 1080 1080"
        style="enable-background:new 0 0 1080 1080;" xml:space="preserve">
        <style type="text/css">
          .st0 {
            fill: #F9BC60;
          }
        </style>
       // SVG Logo path and shapes
      </svg>
htmlcsssvg

Answer №1

Here's a suggestion to enhance the SVG element: remove the width and height attributes, and instead, utilize 

viewBox="427.6 446 225 187"
. When incorporating the SVG into an HTML document, there's no need for namespaces.

To determine the suitable viewBox values, I've assigned an id to the wrapping <g> element containing all shapes. Then, in JavaScript, I'm using console.log(elSVG.getBBox()) to obtain an SVGRect object with x, y, width, and height properties. These properties are utilized to define the new viewBox as follows: 

viewBox="x y width height"
, ensuring the SVG element expands to fill the available width of its parent.

The unnecessary style element has been removed since CSS can be employed instead.

.st0 {
            fill: #F9BC60;
          }
<svg viewBox="427.6 446 225 187">
        <g id="elSVG">
          <g>
            <polygon class="st0" points="470.04,589.59 456.54,589.59 497.02,490.41 510.52,490.41        " />
            <path class="st0" d="M608.83,490.41l-44.35,24.24v13.3v0.02v15.53l30.89,15.16l-30.89,15.28v15.65l44.35-24.24v-13.3v-0.02V536.5
            l-30.89-15.16l30.89-15.28V490.41z M607.51,564.56l-41.7,22.8v-12.6l30.16-14.92l2.4-1.19l-2.41-1.18l-30.16-14.8v-12.5
            l41.7,22.64L607.51,564.56L607.51,564.56z" />
            <path class="st0"
              d="M547.92,509.18v15.65l-30.89,15.28l30.89,15.16v15.55l-44.35-24.08v-13.31L547.92,509.18z" />
          </g>
          <path class="st0"
            d="M652.33,633.55H427.67v-187.1h224.65v187.1H652.33z M441.54,619.68h196.92V460.32H441.54V619.68z" />
        </g>
      </svg>

UPDATE

In response to the comment from the OP:

If you require more precise control over the size of the SVG when used elsewhere, simply adjusting the width/height is sufficient without modifying other values. The SVG will adapt to the available width of its container.

For finer adjustments, CSS width property can be applied. It's advisable to maintain aspect ratio by not setting both width and height.

If reusing the same icon multiple times, create another SVG element with matching viewBox values, and rather than duplicating code, use the designated section (e.g., <g id="elSVG">)

.st0 {fill: #F9BC60;}

svg:nth-of-type(1){width:50px}
svg:nth-of-type(2){width:150px}
<svg viewBox="427.6 446 225 187">
        <g id="elSVG">
          <g>
            <polygon class="st0" points="470.04,589.59 456.54,589.59 497.02,490.41 510.52,490.41        " />
            <path class="st0" d="M608.83,490.41l-44.35,24.24v13.3v0.02v15.53l30.89,15.16l-30.89,15.28v15.65l44.35-24.24v-13.3v-0.02V536.5
            l-30.89-15.16l30.89-15.28V490.41z M607.51,564.56l-41.7,22.8v-12.6l30.16-14.92l2.4-1.19l-2.41-1.18l-30.16-14.8v-12.5
            l41.7,22.64L607.51,564.56L607.51,564.56z" />
            <path class="st0"
              d="M547.92,509.18v15.65l-30.89,15.28l30.89,15.16v15.55l-44.35-24.08v-13.31L547.92,509.18z" />
          </g>
          <path class="st0"
            d="M652.33,633.55H427.67v-187.1h224.65v187.1H652.33z M441.54,619.68h196.92V460.32H441.54V619.68z" />
        </g>
      </svg>

 <svg viewBox="427.6 446 225 187">
 <use xlink:href="#elSVG" />
 </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

Step-by-step guide on incorporating CSS box-shadow with the .style JavaScript property

I have a JavaScript code snippet that looks like this: document.getElementById("imgA").style.box-shadow = "0 0 5px #999999"; The hyphen in box-shadow is causing an invalid assignment exception to be thrown by the JavaScript engine (specifically in Firefo ...

javascripthtmlcss

How can I use the XPath contains() function to locate a particular text within a document

If we take a look at an HTML table, it might appear like this: 2|1|28|9| 3|8|5|10| 18|9|8|0| The goal is to identify the cells that exclusively contain the number 8, specifically, only the second cell of row 2 and the third cell of row 3. My initial att ...

htmlxmlseleniumxpath

Tracking a user's path while redirecting them through various pages

Recently, I created a website with a login page and a home page using nodejs, javascript, and html. The client side sends the entered username and password to the server, which then replies based on the validation result. During navigation between pages, h ...

javascripthtmlnode.js

Guide on filling accordion with data from Firebase

I have been working on a web page that retrieves data from my Firestore collection and is supposed to display each document with its corresponding fields. The goal is to populate the accordion with data from Firebase, but unfortunately, nothing is showing ...

javascripthtmlfirebasegoogle-cloud-firestore

Having issues with the accordion function in IE7

Hey everyone, I'm completely new to jQuery and could use some help. This accordion feature works perfectly on Firefox and Chrome, but I'm running into issues with IE7. You can see the problem in action at this link: here. Specifically, if you cl ...

javascriptjqueryhtmlcssinternet-explorer

Tips for displaying the output of an HTTP GET request in Angular using HTML

I'm facing an issue displaying the result from a Http.get() on my HTML page. Currently, it only appears when there is an error (e.g., 404 not found). In such cases, a message is displayed on my HTML. However, when there is no 404 error and I receive a ...

htmlangularionic-frameworkionic2

Is there a way to implement a flex display in my react slider component?

Welcome to my custom slider design! <Slider {...customSettings}> <div style={{ 'display': 'flex !important' }}> <CustomToolComponent key={uniqueName} color={customColor} /> <UniqueTool key={uniqueName} co ...

javascriptcssreactjsreact-slick

How can I update a date value received from a v-model in Vue.js when the input type is set to "date"?

My issue lies in the date format coming as "9999-99-99 00:00:00", while I want it to be just "9999-99-99". The dates are stored in an array with multiple fields. How can I update the value using Vue.js? new Vue({ el: '#app', data: () => ...

htmlvue.js

What is the process for a webpage to save modifications made by JavaScript?

I am working on a simple web page with a form that contains checkboxes representing items from a database. When the submit button is clicked, these items may be retrieved. Additionally, there is an option to add a new item at the bottom of the page. My go ...

phpjavascripthtml

Issue with HTML While Utilizing wp_get_attachment_image

This script : $source = wp_get_attachment_image( get_the_ID(), 'medium' ); $weburl = wp_get_attachment_image_url( get_the_ID(), 'full' ); echo( '<p><a href="%s"><img src="%s"></a></p>', $weburl, ...

phphtmlwordpress

What is the best way to center and restrict the content on a page using Bootstrap?

I am trying to achieve a similar effect in Bootstrap 5 as the following CSS code: margin: 0 auto; width:60%; In Bootstrap, this code aligns items to the left of the page rather than center. How can I limit the width to the middle 60% and then distribute t ...

htmlcssbootstrap-5

Conceal a div element when a button is clicked

When the user clicks on the 'Comment' button. <input id="SubmitCommentsToInvoice" type="button" value="Comments" onclick="ShowCommentBox('<%: item.DBId %>', '<%: item.LabourOrPlant %>', '<%: item.Activi ...

javascriptjqueryasp.nethtml

Clicking on a JQuery dropdown menu will always result in it staying open

After creating a dropdown menu click, I noticed some strange behavior. When I click the dropdown button, the menu appears as expected. However, if I move my cursor away without clicking the button again, the dropdown menu disappears and behaves like a hove ...

javascriptjqueryhtmlcssdrop-down-menu

Consistent word spacing across several lines

Can someone help me with an issue I'm facing? It seems simple, but I can't seem to figure it out. I am looking for a way to maintain consistent spacing between words on multiple lines without using tables. Essentially, I want something like invi ...

htmlcss

Trouble encountered when trying to populate a dropdown column with dynamic data using ajax

In an attempt to populate and append a column, such as Id, with dynamic data using jQuery and AJAX. The data is supposed to be fetched via a rest webservice but seems to be not populating correctly. Below is the code snippet: This pasted code may not wo ...

javascriptjqueryhtmlajaxdatatable

The div elements are not nested correctly as they should be

Essentially, I have a div element that contains a wrapper along with two other nested divs. One of these divs floats to the left while the other floats to the right. You can see how it appears here: Upon examining the code provided below, you'll not ...

csshtml

Troubleshooting AJAX hover functionality issue

Here is the content that loads through AJAX: <div class="grid"> <div class="thumb"> <img alt="AlbumIcon" src="some-image.jpg"> <div style="bottom:-75px;" class="meta"> <p class="title">Title< ...

htmlajaxjquery

What is the best way to keep a checkbox unchecked after clicking cancel?

I'm working on a bootbox script that triggers a customized alert. I need the checkbox that triggers the alert to be unchecked when the user clicks cancel. Here is the checkbox when it's checked <div class="checkbox"> <label> ...

javascriptjqueryhtmlcheckbox

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

javascriptjqueryhtmlcsspjax

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

In my web page, I have a dynamic list rendered using an ngFor loop. Users can add or remove elements from this list by clicking on a button. What I want to achieve is to automatically scroll the browser view to the latest element added when a user clicks o ...

htmlangulartypescript