Streaming live at 10am (PST)

How to adjust the code so that the SVG keeps a consistent stroke when scaled?


#1

Hi,

I have the following code presenting a vector in a custom code element, could anyone tell me how to adjust the code so that I can specify a fixed stroke weight despite the size of the element?

Thanks for the help!

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<defs><style>.monogramlargeb{fill:none;stroke:#ffffff;stroke-miterlimit:10;stroke-width:1px;}</style>
</defs><title>monogramlargeb</title><path class="monogramlargeb" d="M137.21,25.42A78.92,78.92,0,0,1,159,80c0,43.63-35.22,79-78.66,79a79.06,79.06,0,0,1-10.22-.65V58.93A43,43,0,0,1,72,47.75a26.65,26.65,0,0,1,6.28-10.51,29,29,0,0,1,12.5-7.41,28.3,28.3,0,0,1,16.52-.49,31.54,31.54,0,0,1,14.05,8.12,33.13,33.13,0,0,1,8.43,13.62A35.36,35.36,0,0,1,131.23,64,29,29,0,0,1,126,78.33q-4.81,7.24-15.28,12.12"/></svg>

#2

The code you need is vector-effect: non-scaling-stroke;


#3

Thanks Vincent, appreciate your help. Do you know anything about browser compatibility and this style?


#4

I think it’s good. test for yourself with this codepen


#5

Thanks Vincent. Perfect.