Resolving odd SVG anomalies

Question

Resolving odd SVG anomalies

I recently exported three SVGs from Sketch to include in HTML, but one of them (specifically the Twitter icon) is presenting a mystery with its appearance.

All three SVGs were created in the same manner, using #999999 as the stroke color and having a stroke-width of 2.

However, upon inspection, the stroke of the Twitter icon seems thinner and darker than expected compared to the others.

Check out the example on CodePen

The code snippet causing the issue:


<li>
    <a>
      <svg width="26px" height="22px" viewBox="29 0 26 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
              <desc>Created with Sketch.</desc>
              <defs>
                <path d="M52.4856971,4.68997313 C51.7333146,5.02377149 50.9207961,5.24903418 50.0734261,5.34528278 C50.9419804,4.82581336 51.604159,4.00735892 51.9185059,3.02371183 C51.1053041,3.50836792 50.2032651,3.85650118 49.246557,4.04763316 C48.4811906,3.2284961 47.38781,2.71653543 46.1775743,2.71653543 C43.8555072,2.71653543 41.9762592,4.60123329 41.9762592,6.91461287 C41.9762592,7.24226769 42.0104274,7.56377899 42.0773969,7.87027277 C38.5867793,7.69961922 35.4843117,6.027897 33.4130388,3.4878895 C33.0508565,4.10906844 32.8458476,4.82581336 32.8458476,5.59785004 C32.8458476,7.05181833 33.5838795,8.33513305 34.7107449,9.09215222 C34.0205484,9.06484765 33.3788706,8.88054181 32.8116794,8.56653927 L32.8048458,8.62114841 C32.8048458,...
</use>
            </svg>
    </a>
  </li>

After meticulously reviewing the SVG code multiple times, I am still unable to identify the root cause of the discrepancy in the Twitter icon’s stroke thickness and color.

Any recommendations or assistance would be highly valued!

html css svg sketchapp

Answer 1

Answer №1

The issue you're facing is caused by the atypical setup of the Twitter SVG icon on your site. The presence of an unnecessary <mask> element is making the walls of the icon appear thinner than intended. It seems like the icon was initially designed to be a solid fill shape but has been altered with a stroke and no fill.

To fix this issue, I suggest removing the mask and adjusting the stroke width so that the icon aligns properly with the other icons on your website.

@media (max-width: 769px) {
  #container-master {
    display: none; 
  } 
}

#container-master {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  background-color: #000;
  position: fixed;
  z-index: -100;
  bottom: 0px;
  width: 100%; }

#container {
  display: flex;
  margin: 0; }

#container span {
  color: #999999;
  font-size: 2vw; 
}
  @media (max-width: 850px) {
    #container span {
      font-size: 17px; 
    } 
}
  @media (min-width: 1200px) {
    #container span {
      font-size: 24px; 
    } 
}

* {
  list-style: none;
  margin: 0;
  padding: 0; }

.cta-social {
  flex: 1;
  justify-content: center;
  display: flex;
  align-items: center; 
}

.cta-social li {
  display: inline-block; 
}

.cta-social > li:first-child {
  margin-right: 35px; }

.cta-social > li:last-child {
  margin-left: 35px; }

#container > li:first-child {
  margin-left: 22px;
  flex: 1;
  justify-content: flex-start;
  display: flex;
  align-items: center; }

#container > li:last-child {
  margin-right: 30px;
  flex: 1;
  justify-content: flex-end;
  display: flex;
  align-items: center; }

.cta-last-li {
  transform: translate3d(0, -11px, 0); }

.cta-last-li svg {
  transform: translate3d(0, 11px, 0); }

.cta-last-li span {
  transform: translate3d(0, 7px, 0);
  display: inline-block; }

<div id="container-master">
  <ul id="container">
    <li>
      <a href="#">
        <span>©&nbsp;Boberson&amp;Sons.</span>
      </a>
    </li>
    <ul class="cta-social">
      <li>
        <a>
          <svg width="13px" height="auto" viewBox="-2 -1 13 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
                  <desc>Created with Sketch.</desc>
                  <defs></defs>
                  <g id="Facebook" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <path d="M9.1524685,0.477435398 C9.1524685,0.477435398 7.96904567,...
...done" id="Path-28-copy-2" stroke="#999999" stroke-width="2" transform="translate(4.430656, 10.748041) scale(-1, 1) translate(-4.430656, -10.748041) "></path>
                </g>
              </svg>
        </a>
      </li>
    </ul>
    <li class="cta-last-li">

      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b383f3e2f22240b25243f2322252c2a252f282465282426">[email protected]</a>">

        <svg width="23px" height="auto" viewBox="19 554 26 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
                <desc>Created with Sketch.</desc>
                <defs></defs>
                <g id="Mail" stroke="none" stroke-width="1...
...g>
            </ul>
</div>

Answer 2

The issue you're facing is caused by the atypical setup of the Twitter SVG icon on your site. The presence of an unnecessary <mask> element is making the walls of the icon appear thinner than intended. It seems like the icon was initially designed to be a solid fill shape but has been altered with a stroke and no fill.

To fix this issue, I suggest removing the mask and adjusting the stroke width so that the icon aligns properly with the other icons on your website.

@media (max-width: 769px) {
  #container-master {
    display: none; 
  } 
}

#container-master {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  background-color: #000;
  position: fixed;
  z-index: -100;
  bottom: 0px;
  width: 100%; }

#container {
  display: flex;
  margin: 0; }

#container span {
  color: #999999;
  font-size: 2vw; 
}
  @media (max-width: 850px) {
    #container span {
      font-size: 17px; 
    } 
}
  @media (min-width: 1200px) {
    #container span {
      font-size: 24px; 
    } 
}

* {
  list-style: none;
  margin: 0;
  padding: 0; }

.cta-social {
  flex: 1;
  justify-content: center;
  display: flex;
  align-items: center; 
}

.cta-social li {
  display: inline-block; 
}

.cta-social > li:first-child {
  margin-right: 35px; }

.cta-social > li:last-child {
  margin-left: 35px; }

#container > li:first-child {
  margin-left: 22px;
  flex: 1;
  justify-content: flex-start;
  display: flex;
  align-items: center; }

#container > li:last-child {
  margin-right: 30px;
  flex: 1;
  justify-content: flex-end;
  display: flex;
  align-items: center; }

.cta-last-li {
  transform: translate3d(0, -11px, 0); }

.cta-last-li svg {
  transform: translate3d(0, 11px, 0); }

.cta-last-li span {
  transform: translate3d(0, 7px, 0);
  display: inline-block; }

<div id="container-master">
  <ul id="container">
    <li>
      <a href="#">
        <span>©&nbsp;Boberson&amp;Sons.</span>
      </a>
    </li>
    <ul class="cta-social">
      <li>
        <a>
          <svg width="13px" height="auto" viewBox="-2 -1 13 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
                  <desc>Created with Sketch.</desc>
                  <defs></defs>
                  <g id="Facebook" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <path d="M9.1524685,0.477435398 C9.1524685,0.477435398 7.96904567,...
...done" id="Path-28-copy-2" stroke="#999999" stroke-width="2" transform="translate(4.430656, 10.748041) scale(-1, 1) translate(-4.430656, -10.748041) "></path>
                </g>
              </svg>
        </a>
      </li>
    </ul>
    <li class="cta-last-li">

      <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b383f3e2f22240b25243f2322252c2a252f282465282426">[email protected]</a>">

        <svg width="23px" height="auto" viewBox="19 554 26 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
                <desc>Created with Sketch.</desc>
                <defs></defs>
                <g id="Mail" stroke="none" stroke-width="1...
...g>
            </ul>
</div>

Resolving odd SVG anomalies

Answer №1

Similar questions

Discovering phrases and adjusting the hue

How to Style a Diamond Shape with Content Inside Using CSS

Creating a customizable navigation bar using only CSS

div maintain aspect ratio while scaling

Breaking apart a pipe-separated text and sending it through a JavaScript function

Guide on validating a dropdown using template-driven forms in Angular 7

My draggable item seems stuck in place. Any ideas on how to get it moving again?

AngularJS Partial Views: Enhancing Your Website's User Experience

Applying CSS to replicate the vintage iPhone app icon design

Tips on adding to Jquery html code while maintaining the current CSS styling

Using CSS syntax to target a class within an element distinguished by its unique id

Using shadow effects on the <Grid> component with Material UI

animation for closing the hamburger menu

Retrieve information from the database upon clicking the submit button

Having trouble saving text in a textbox?

The Angular Material Table experienced a collapse when trying to render over 20 columns simultaneously

Is it possible for me to customize the CSS of the masterpage for a specific aspx file?

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

Is it possible to utilize a .css file as the origin with @font-face?

Inline-block divs styled with CSS3 are causing a white gap to appear at the top of