# SVG non-scaling circle and rectangle

DevFeed: [SVG non-scaling circle and rectangle](<https://devfeed.tech/articles/svg-non-scaling-circle-and-rectangle-37359.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/svg-non-scaling-circle-and-rectangle/>)

Author: Stanko

Published: 2022-05-02T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [SVG](<https://devfeed.tech/topics/svg.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [elements](<https://devfeed.tech/tags/elements.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [property](<https://devfeed.tech/tags/property.md>), [standard](<https://devfeed.tech/tags/standard.md>), [svg](<https://devfeed.tech/tags/svg.md>), [vector](<https://devfeed.tech/tags/vector.md>)

## AI overview

A tutorial explains how to create non-scaling SVG circles and rectangles using non-scaling strokes, line caps, and very short lines. It includes SVG code and discusses browser limitations and outlined shapes.

## Source excerpt

While making a simple SVG chart, I realized I would like to have non-scaling circles for data points. Unfortunately, SVG doesn't support it out of the box. If you are eager to see the result, jump to the examples below or play with the code on Codepen. Non-scaling stroke example # SVG does support non-scaling stroke width by setting vector-effect to non-scaling-stroke. When you set it, strokes will stay the same width no matter the scale of the SVG image. Try resizing your windowOn desktop, you should be able to resize each image on it's own by dragging the bottom right corner, and you'll see that the bottom line always stays 1px, while the upper one scales with the image: Stroke line cap # SVG also allows you to change how your line's ends look like, by using stroke-linecap property. Available options are butt, square and round, and on the image below they are presented in that order. As you can see square and round line caps are sticking out of our line. You probably figured it out, but that is exactly what we are going to use to create non-scaling circles and rectangles. Putting it all together # Up to this point we know that we can have a non-scaling stroke and that we can change its caps to be round and square. If we use a line with no length, sticking parts will join and create a perfect circle (or rectangle). SVG doesn't support lines with length of zero pixels, so we'll set the length to something negligible. The only thing left is to set a thick stroke width to create a shape. Circle # The code below will create a black circle with a radius of 50 and center at { x: 50, y: 50 }. <path d="M 50 50 l 0.0001 0" vectorEffect="non-scaling-stroke" strokeWidth="100" strokeLinecap="round" stroke="black" /> Let me quickly break the code down: d="M 50 50 l 0.0001 0" - this creates a super short line. The first two coordinates (M 50 50) are the line's start and our circle's center. The rest of the code (l 0.0001 0) draws a horizontal line 0.0001px longPlease be aware th