I’m really struggling trying to understand how to size an svg to use as a background image.
In my simple example I have a svg that is a circle and I would like to use it as an background image on the text, so it will just appear once on the left of the text, like a bullet point (I’m only using this as a simple example to understand how to so this.)
In my example I just want to show the whole circle but I think the viewbox in the svg is cutting it off. Can anyone please explain how this works
The dimensions you have don’t make much sense.
The view box, width and height attributes give a size of 14, but your circle has a radius of 10, which means a diameter of 20. 20 will not fit in 14. Also the cx and cy attributes mark the centre of the circle, at 0, 0 you have the centre in the top corner.
So to fit in a 14 square box, you need a radius no more than 7 and to centre have the centre at 7, 7 or if you need the radius on 10, make the box at least 20 to contain it with the centre at 10, 10.