steros
steros

Reputation: 1924

svg line color does not match css border color

I've created this svg to use to style a dropdown.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
    <line x1="10" y1="10" x2="10" y2="117" stroke-width="1" stroke="#ccc"/>
    <path fill="#00305e" d="M95.0603,45.0773l1.9872,2.025c1.9246,1.9611,1.906,5.1078-0.0415,7.0461L68.0522,82.9645
        c-1.9507,1.9414-5.1035,1.9414-7.0542,0L32.0442,54.1483c-1.9475-1.9383-1.9661-5.0849-0.0415-7.0461l1.9872-2.025
        c1.947-1.984,5.1386-1.9991,7.1042-0.0334l23.431,23.431l23.431-23.431C89.9218,43.0782,93.1133,43.0933,95.0603,45.0773z"/>
</g>
</svg>

As you can see the line color is #ccc. I've styled the dropdown to have this style:

select {
    border: 1px solid #ccc;
}

My problem is that the svg line color is much brighter than the border color of the select.

This is the result in Chrome on a OSX Sierra:

enter image description here

Upvotes: 0

Views: 364

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101860

The problem is that your SVG is getting scaled down. The grey line in your SVG has a width of one unit, which is not necessarily the same as 1 pixel.

It looks like you are scaling the SVG down to 44 pixels or so, so that grey line is ending up with a width of 1 * 44/128 = 0.34. So antialiasing will mean that it will get draw at about a third the darkness of the border lines.

You have a number of solution, including...

  1. Make your line darker to compensate. It'd probably need to be #444 or so.
  2. Or make your line thicker to compensate. Roughly 3x as thick.
  3. Or use vector-effect: non-scaling-stroke;, so that the line width does not scale.

svg {
  width: 44px;
  border: solid 1px #ccc;
  border-left: none;
}

line {
  vector-effect: non-scaling-stroke;
}
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
    <line x1="10" y1="10" x2="10" y2="117" stroke-width="1" stroke="#ccc"/>
    <path fill="#00305e" d="M95.0603,45.0773l1.9872,2.025c1.9246,1.9611,1.906,5.1078-0.0415,7.0461L68.0522,82.9645
        c-1.9507,1.9414-5.1035,1.9414-7.0542,0L32.0442,54.1483c-1.9475-1.9383-1.9661-5.0849-0.0415-7.0461l1.9872-2.025
        c1.947-1.984,5.1386-1.9991,7.1042-0.0334l23.431,23.431l23.431-23.431C89.9218,43.0782,93.1133,43.0933,95.0603,45.0773z"/>
</g>
</svg>

Upvotes: 2

Related Questions