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

Tips for securely encrypting a PHP file when combining it with an HTML file using the phpB

Recreated using CSS and JavaScript: iOS "Background Open" Animation

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

Combine the text of the button onto a single line

Tips on increasing the button size automatically as the elements inside the button grow in size

Ways to display scroll bar when hovering the mouse pointer?

Learning the art of Javascript programming within the HTML5 realm

The presence of an image within an HTML anchor is causing an unexpected artifact to

The output from the Compute function is not showing up in the TextBox as expected

Numerous volume sliders catering to individual audio players

Modifying color scheme in ASP.NET web application's table

Using SVG Mask to enhance shape Fill

What are some ways to customize the appearance of React Semantic components?

Finding elements using XPath in Selenium

When swiping right with Swiper.js, the slides are jumping by all, skipping the following slide, but the left swipe functions correctly

The stacking order of a child element within a parent element, which has a transform

SwiperJS continuously applies additional right margin to every slide

React element featuring various interfaces

Handling routerLink exceptions in Angular 2, 4, and 5

The submenu background and text CSS are out of alignment