[css-images] [css-shapes] create simple fill-able/stroke-able CSS images

Possible solutions for creating simple fill-able/stroke-able CSS images have been mentioned here and there in other issues but I've not yet seen an issue specifically for this kind of conversation so this is that. These conversations seem to fall into 2 main categories:

1. use <basic-shape> inside image()
2. make SVG creation with CSS easier

use <basic-shape>

ex. fill and/or stroke a circle: a 45px diameter circle, filled with red and stroked with a 3px black line

background-image: image( circle(45px at 22.5px 22.5px, red, 3px black) );
background-position: center center;
background-repeat: no-repeat;

• imagining the stroke to be added on the inside of the circle like border does in CSS by default?
• options to fill/stroke with color, gradient, or gradient pattern??

other random thoughts

• @image-manipulation would allow cutting shapes from gradient images with clip-path but being able to just create the shapes as images would skip a step for the browser.
• does the current stripe proposal fall in here as well?
• compositing shapes?

make a CSS like syntax for creating SVG images

https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg

Start with the two approaches outlined in this issue: using inside image() and making SVG creation easier with CSS-like syntax. Review the linked SVG syntax experiment and the questions about fill, stroke, gradients, patterns, and compositing. Done would require a settled direction and a sufficiently specified CSS proposal.