Svg color is not the same as using css background

HTML & CSS
1

Why is this, and can the svg color be the same as css background color?

Why are they both colored differently?

For the vertical lines.

svg

https://jsfiddle.net/5a7tveyw/

<svg width="1" height="12" xmlns="http://www.w3.org/2000/svg">
    <g id="line">
        <line x1="1" y1="0" x2="1" y2="12" stroke="#f6b26b" stroke-width="1"/>
    </g>
</svg>

css background
https://jsfiddle.net/L7hy1r38/3/

.my-footer b {
  width: 1px;
  height: 12px;
  background-color: #f6b26b;
  position: relative;
  top: 2px;
  left: 0;
  margin: 0 7.4px;
}

2

You can never be sure, that 1px is really 1px. Browsers scale their content often without users knowledge. So if you 1px is only displayed as 0.75px (for example) the calculation of the color is a mix from the color you set for the 1px and the background color, weighted by the browsers algorithm, which might be different on SVG and CSS:

3

I am only referring to the color differences.

4

If I am using hr, how can this be refactored? https://jsfiddle.net/npvo40c5/4/

.my-footer b {
  /*width: 1px;
  height: 12px;
  background-color: #f6b26b;*/
 /* position: relative;
  top: 2px;
  left: 0;*/
  margin: 0 7.4px;
}

hr {
  position: relative;
  top: 4px;
  left: 0;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
  /* Line color */
}


     <footer class="margin-top my-footer">
       <div class="footer-top">
         <a href="#" target="_blank">something</a>
         <b>
           <hr width="1" size="12"/>
         </b>
         <a href="#" target="_blank">something</a>
         <b>
           <hr width="1" size="12"/>
         </b>
         <a href="#" target="_blank"><span class="green-text">something</span><span class="orange-text">something</span></a>
       </div>
       <div class="footer-mid">something</div>
       <div class="footer-base">something</div>
     </footer>
   </div>
5

This is what I am looking for it seems, works better than svg and bg color.

From AI: https://jsfiddle.net/npvo40c5/8/

.my-footer hr {
  position: relative;
  top: 4px;
  left: 0;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
  /* Line color */
}


<footer class="margin-top my-footer">
  <div class="footer-top">
    <a href="#" target="_blank">something</a>
    <hr>
    <a href="#" target="_blank">something</a>
    <hr>
    <a href="#" target="_blank"><span class="green-text">something</span><span class="orange-text">something</span></a>
  </div>
  <div class="footer-mid">something</div>
  <div class="footer-base">something</div>
</footer>
6

Semantically that is not correct for the hr… The hr is also very difficult to style historically although it is much better these days but there will be problems in older browsers.

You simply should have used a span or the :after element to get the same effect. No need for an svg just for a bar.

The background color comment makes no sense either as the color is the same as background color. Indeed the svg in your screenshot is the same color but as mentioned the svg is anti-aliased smaller than 1px and therefore has a slightly darker view. If you increased the size of the svg line you would see that it was the same color.

7

You simply should have used a span or the :after element to get the same effect.

What do you mean by that?

This? https://jsfiddle.net/s8ev2dw4/1/

<span class="divider"></span>

.my-footer .divider{
  position: relative;
  top: 4px;
  left: 0;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
  /* Line color */
}


          <footer class="margin-top my-footer">
       <div class="footer-top">
         <a href="#" target="_blank">something</a>
         <span class="divider"></span>
         <a href="#" target="_blank">something</a>
       <span class="divider"></span>
         <a href="#" target="_blank"><span class="green-text">something</span><span class="orange-text">something</span></a>
       </div>
       <div class="footer-mid">something</div>
       <div class="footer-base">something</div>
     </footer>

How would it be done using the after element?

This can’t be right, then what goes in the html?

.my-footer::after {
  position: relative;
  top: 4px;
  left: 0;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
  /* Line color */
}
8

Yes that’s what I mean but i would just call it .divider. Not .my-footer .divider (unless you have other dividers of course)/

I would do the whole thing more semantically in a list like this.

 <ul class="footer-top">
         <li><a href="#" target="_blank">something</a></li>
         <li class="divider"><a href="#" target="_blank">something</a></li>
         <li><a href="#" target="_blank"><span class="green-text">something</span><span class="orange-text">something</span></a></li>
 </ul>

Then these changes:

.divider:before,
.divider:after{
  content:"";
  position: relative;
  top: 4px;
  margin: 0 7.4px;
  height: 12px;
  width:1px;
  background:#f6b26b;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:0 0 13px;
  padding:0;
  list-style:none;
}
.footer-top li{display:flex;}

The whole css with that in place:

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
}

.blue-margin-bottom {
  margin-bottom: 16px;
  background: none;
}

.orange-margin {
  margin-left: 12px;
  margin-right: 12px;
  background: none;
}

.title-text {
  margin: 0;
  color: #0059dd;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-family: Karla, sans-serif;
}

.yellow-padding-margin {
  margin-top: 4px;
  padding-left: 40px;
  padding-right: 40px;
  background: none;
}

.center-text {
  padding: 0;
  margin: 0;
  text-align: center;
  color: #0059dd;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: normal;
  font-family: Karla, sans-serif;
  background: none;
}

.exitD {
  position: relative;
  margin: 10px auto 0;
  inset: 0 0 0 0;
  width: 47px;
  height: 47px;
  background: black;
  border-radius: 50%;
  border: 5px solid #0059dd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.exitD::before,
.exitD::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: #0059dd;
  transform: rotate(45deg);
}

.exitD::after {
  transform: rotate(-45deg);
}

.my-footer {
  box-sizing: border-box;
  border-top: 1px solid #1155cc;
  background: #121212;
  text-align: center;
  word-wrap: break-word;
  padding: 22px 8px 8px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 13.33px;
  line-height: 1.5;
  vertical-align: baseline;
  margin-top: auto;
}

.margin-top {
  margin-top: 10px;
}

.my-footer a {
  text-decoration: none;
}

.divider:before,
.divider:after{
  content:"";
  position: relative;
  top: 4px;
  margin: 0 7.4px;
  height: 12px;
  width:1px;
  background:#f6b26b;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin:0 0 13px;
  padding:0;
  list-style:none;
}
.footer-top li{display:flex;}

.footer-top a {
  color: #0059dd;
  font-weight: 700;
}

.my-footer .green-text {
  color: #38761d;
  font-weight: 400;
}

.orange-text {
  color: #b45f06;
  font-weight: 700;
}

.footer-mid {
  margin-bottom: 49px;
  color: #0059dd;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.footer-base {
  color: #0059dd;
  padding: 0;
}

Adjust as required as I may have inadvertently changed some measurements.

9

The html would look like this? https://jsfiddle.net/ap1j7cev/

I am hesitant to use background again.

The last time I used background on the lines, I got different shades of orange.

I took a photo via mobile, and it was 2 different shades of orange.

cvgfgfgfd

Update: I just tested on codepen: this one use background seems fine.

    <footer class="margin-top my-footer">
       <ul class="footer-top">
         <li><a href="#" target="_blank">something</a></li>
         <li class="divider"><a href="#" target="_blank">something</a></li>
         <li><a href="#" target="_blank"><span class="green-text">something</span><span class="orange-text">something</span></a></li>
       </ul>
       <div class="footer-mid">something</div>
       <div class="footer-base">something</div>
     </footer>

like this

Using border: both lines came out looking the same:

  position: relative;
  top: 4px;
  left: 0;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;

This works also:

https://jsfiddle.net/png1sxLu/1/

.divider:before,
.divider:after {
  content: "";
  position: relative;
  top: 4px;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
}

I can confirm on my mobile:

When this is used: https://jsfiddle.net/L7hy1r38/3/

There has to be something particular about this code why the two lines come out looking different.

.my-footer b {
  width: 1px;
  height: 12px;
  background-color: #f6b26b;
  position: relative;
  top: 2px;
  left: 0;
  margin: 0 7.4px;
}

I am seeing this:

I tested on codepen and Github

cvgfgfgfd

When this is used: https://jsfiddle.net/nxjzuks8/

The two lines are normal looking.

.my-footer b {
  position: relative;
  top: 4px;
  left: 0;
  margin: 0 7.4px;
  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
}

Using background via mobile:
<span class="divider"></span>

I get this:
cvgfgfgfd

10

Only:

  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;

Is able to work well in all these different versions.

Using background does not work at all.

cvgfgfgfd

11

Where is the codepen example with those 2 different lines.

There will be no difference between background and border colors.

The issue is probably your fractional fonts triggering some sort of anti alias. I would hazard a guess that what you are calling the right color is the wrong color.

Where is the codepen showing both those lines like your screenshot.

Here’s a codepen with backgrounds and borders mixed and separated and I see no difference.at all.

12

Visually those are not 1px in width, so there is nothing to test via mobile.

This only occurs via mobile chrome.

13

They are 1px. I don’t know what you are seeing.

You still haven’t shown me the demo with the 2 different lines!

14

wiam seeing

That is what I am seeing.

That is more than 1px width.

15

No they are all 1px wide individually.

I’ve just stacked a mixture of loads of 1px’s next to each other to prove my point that there is no color difference at all.

Everyone of those lines is made up with 1px elements next to each other. Some are borders and some are backgrounds and there is no discernible difference between them.

16

Using mobile and background, both lines do not stay at 1px.

Only this works at keeping both at 1px via mobile.


  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;
17

Where is the demo of that?

My example is 1px on mobile.

18

Every code version that uses:

  width: 1px;
  height: 12px;
  background-color: #f6b26b;

Only occurs via mobile, not desktop.

19

Sorry I will withdraw from this thread as you won’t provide the demo I asked for.

I believe you are wrong anyway and I’m guessing that the opposite is true and you are getting less than 1px with your anti aliased borders.

Good luck.

20

You can place this inside codepen and via mobile

The lines don’t stay at 1px using background.

https://jsfiddle.net/k7p3w8su/

From mobile via codepen: https://jsfiddle.net/fdt24pzx/1/

One line is larger than the rest.

mobile34
mobile34720×999 24.5 KB

When border is used: The lines are all the same size.

  border: none;
  height: 12px;
  border-left: 1px solid #f6b26b;

border is used
border is used720×1098 60 KB