The distance from the edge of my tilted svg icon to the svg artboard

I'm currently working on developing a basic web icon system using SVG sprites. However, I have encountered a spacing issue in my code around one specific icon (between the Smash Magazine icon and the red border). I am trying to figure out how to remove this extra space. The icon is rotated, and despite using the `viewBox`, I haven't been successful in resolving it. Do you have any suggestions for potential transformations that could help fix this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Svg Icon System</title>
    <style>
      .icon {
        /* width: 3em;
        height: 3em; */
        fill: currentColor;
        stroke: black;
        stroke-width: 2px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <svg width="0" height="0">
      <defs>
        <g id="icon-linkedin">
          <path
            d="M80.667,14H19.315C16.381,14,14,16.325,14,19.188v61.617C14,83.672,16.381,86,19.315,86h61.352
        C83.603,86,86,83.672,86,80.805V19.188C86,16.325,83.603,14,80.667,14z M35.354,75.354H24.67V40.995h10.684V75.354z M30.012,36.297
        c-3.423,0-6.19-2.774-6.19-6.194c0-3.415,2.767-6.189,6.19-6.189c3.415,0,6.189,2.774,6.189,6.189
        C36.201,33.523,33.427,36.297,30.012,36.297z M75.35,75.354H64.683V58.646c0-3.986-0.078-9.111-5.551-9.111
        c-5.558,0-6.405,4.341-6.405,8.822v16.998H42.052V40.995h10.245v4.692h0.146c1.426-2.7,4.91-5.549,10.106-5.549
        c10.806,0,12.802,7.114,12.802,16.369V75.354z"
          />
        </g>

        <g id="icon-smash-mag">
          <path
            fill="#231F20"
            d="M45.718,55.325c-3.727-1.408-7.229-3.226-10.202-5.401c-0.077-0.056-0.157-0.111-0.233-0.168
        c-0.433-0.322-0.851-0.654-1.259-0.991c-0.107-0.088-0.211-0.178-0.316-0.267
        ...
      </defs>
    </svg>

    <!-- viewBox="0 0 100 100" -->
    <!-- prettier-ignore -->
    <svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
      <title>Icona di Linkedin</title>
      <use xlink:href="#icon-linkedin"></use>
    </svg>
    <svg class="icon" width="50" height="50" viewBox="16 16 68 68" style="border: 1px solid red">
      <title>Icona di Smah Magazine</title>
      <use xlink:href="#icon-smash-mag"></use>
    </svg>

  </body>
</html>

htmlcssimagesvgicons

Answer №1

By default, your SVGs have a display:inline property which causes a whitespace to appear between them when rendered by the browser, making it seem like there is a space between two words. A quick fix would be to remove all white spaces, including line breaks. However, a more effective solution would be to utilize flexbox in order to transform your SVGs into flex elements.

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

Unable to bypass YouTube advertisement

I am currently experimenting with using nodejs puppeteer to test if I can bypass the ad on Youtube. Although this is just for testing purposes, I am facing some challenges with getting it to work as expected. I have implemented a while loop to search for ...

javascripthtmlnode.jspuppeteer

How can I wrap content with the <li> element in a cross-browser compatible way?

I am encountering an issue with the dropdown menu on my website located at . When hovering over elements with a dropdown menu, you may notice that some of the items within the dropdown span more than one line and have varying widths. My goal is to adjust ...

csswidthhtml-lists

I am experiencing an issue where the borders of a dropdown menu do not properly wrap around

I'm currently in the process of creating a dropdown menu that will display a list of articles along with the respective authors' images next to them. Initially, I intended to utilize Bootstrap 4's "card" system for this task. However, I enco ...

csshtmltwitter-bootstrapbootstrap-4

Delete the float attribute from the image when the inline-block is shifted to the bottom of the image

I have three elements in my design - a title, a paragraph, and an image. I want the image to float to the right, with the title and paragraph floating to the left and bottom, resembling "Image 1." To prevent the title from wrapping when narrowing the oute ...

htmlcss

Issues arise when attempting to use Stylus in conjunction with React

I am currently working on developing a web application that utilizes Stylus and React. I have successfully rewritten all the Stylus language files, but I am encountering an issue where the React components are not being styled as expected. Below is one of ...

cssreactjsweb-applicationsstylus

Update various components within a container

I have incorporated a function that automatically loads and refreshes content within a div every 10 seconds. Here is the script: $(function () { var timer, updateContent; function resetTimer() { if (timer) { window.clearTimeout(timer); ...

javascriptjqueryhtml

The mat-table fails to populate with data retrieved from the rest service

I have successfully fetched an array from my REST service and displayed some information from the response on the page. However, I am facing issues populating my mat-table and I'm unsure of the cause. The mat-table was functioning properly in the past ...

htmlangulartypescriptrestangular-material

Issues with padding and margin not displaying correctly at different screen sizes

I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mob ...

csslaravelvue.jstailwind-css

Issue with deploying responsive background image on Github platform

My responsive background image isn't displaying properly on mobile devices after I deployed my project to Github. Although it appears correctly under the Google Chrome inspect mobile tool, when accessed live on a mobile device, the image covers the ba ...

cssgithubresponsive-designbackground-imagematerialize

Creating 3 dynamic columns - a step-by-step guide

Is there a way to make these columns 3 columns wide on a desktop screen and 1 column wide on a mobile screen? They are not behaving as expected, and I'm not sure why. What can I do to achieve this? <section class="pricing-section py-5" data-aos= ...

htmlbootstrap-4

Is there a way to have just the data table automatically update every 2 minutes without affecting the rest of the

I'm working on a project where I need to create an inbox mail that automatically refreshes every 2 minutes to display any new mail in the table. Can anyone help me with refreshing my datatable? ...

htmlruby-on-rails-4datatables-1.10

Issue with CSS3 calc() validation: Invalid value provided for width, resulting in a parse error

Can you help me validate a CSS3 file that contains the following code snippet? width:calc(96.3% - 312px) When I try to validate it, I get this error message: Value Error : width Parse Error - 312px) My solution might be to implement a JavaScript func ...

cssw3c-validationcss-calc

Adjust the height of an element when the maximum height is set to none

I am trying to add animation to the opening of a menu on my website. This is achieved by adjusting the max-height property of the <div> element that represents the menu, as well as changing the display property. The max-height value is being changed ...

htmlcss

Is there a way to showcase a block of Python code using a combination of HTML, CSS, and Javascript to enhance its

On my website, I want to display code blocks similar to how StackOverflow does it. The code block should be properly colored, formatted, and spaced out for better readability. All the code blocks on my site will be in python. def func(A): result = 0 ...

javascripthtmlcss

Creating a dynamic grid design with images using the <ul><li></li></ul> HTML tags

Trying to create a responsive grid of images that adapts to changes in browser size. Is there a way to achieve this using a list? Ideally, I want the images to be evenly spaced in rows. For example, if there are three rows of four images on top and one r ...

htmlcss

Creating a sleek navigation bar and sliding feature within the header of your Ionic 2

I am looking to create a sliding header for my website where the gallery hides and the navbar moves to the top as I scroll down, similar to the gif provided. Any help or ideas on how to achieve this would be greatly appreciated. Thank you. https://i.sstat ...

javascripthtmlangularionic-frameworkionic2

What could be the reason for Chrome breaking up this straightforward bootstrap header into two lines?

Why is it that the code below displays correctly in one line in both FF and IE, but Chrome for some reason is showing it on two lines as if both span and button elements had "display:block;"? Even though the button has a computed display of "inline-block," ...

htmlcssgoogle-chrometwitter-bootstrap

Tips for toggling the visibility of a <div> element using PHP code inside

I'm having trouble with a dropdown list that is supposed to show/hide some divs containing PHP files. However, when I try to toggle the visibility of the divs using the dropdown list, it doesn't seem to work as expected. Can anyone help me figure ...

javascriptphpjqueryhtmlcss

Fetch the contents of a div from a PHP page on a different domain and display it on another webpage

Hey there, I hope you're having a great morning! I'm currently working on setting up an affiliate box for our affiliates within Wordpress. I've managed to create it dynamically and you can check out an example here The values needed to cre ...

phpjquerywordpresshtmlload

display a div positioned relatively next to another div

I'm having trouble displaying a textbox next to another div on my webpage. Instead of appearing next to the div, it is showing up below it. The textbox needs to have an absolute position. You can see the issue in action by checking out this demo. Than ...

javascriptjqueryhtmlcss