Reputation: 1924
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:
Upvotes: 0
Views: 364
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...
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