Menu
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.
The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. You can use this attribute with the following SVG elements: <altGlyph> <circle> <ellipse>
To use the Illustrator width tool, select the button in the toolbar or hold Shift+W. To adjust the width of a stroke, click and hold any point along the stroke path. This will create a width point. Pull up or down on these points to expand or contract that segment of the stroke.
Using fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same css color naming schemes that you use in HTML, whether that's color names (that is red ), rgb values (that is rgb(255,0,0) ), hex values, rgba values, etc.
You can use the vector-effect property set to non-scaling-stroke, see the docs. Another way is to use transform(ref).
That will work in browsers that support those parts from SVG Tiny 1.2, for example Opera 10. The fallback includes writing a small script to do the same, basically inverting the CTM and applying it on the elements that shouldn't scale.
If you want sharper lines you can also disable antialiasing (shape-rendering=optimizeSpeed or shape-rendering=crispEdges) and/or play with the positioning.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With