What is SVG?
Scalable Vector Graphics (SVG) describe images with maths instead of pixels. Shapes are written as XML markup, so they stay sharp at any size and can be styled with CSS like any other HTML element.
Planning the grid
I used a viewBox of 0 0 200 200, with the origin (0,0) in the top-left corner, so the centre of the canvas is (100,100).
- Circle: centre (100,100), radius 80. With a 24-unit stroke, the ring runs from 68 to 92 units out from the centre.
- Rect: x 0, y 82, width 200, height 36. Since 82 + 18 = 100, the bar sits exactly on the centre line.
- Text: placed at (100,100) with text-anchor middle and dominant-baseline central, so it is centred both ways.
Shape layering and CSS styling
SVG draws shapes in code order, so the circle comes first, then the bar on top of it, then the text on top of the bar. The markup holds no colours. CSS sets fill: none and a thick stroke on the circle to make a hollow ring, colours the bar and text, and thickens the ring on hover and keyboard focus.
The large logo below uses the same shapes with an extra class, custom-theme. CSS rules targeting that class override the red, blue and white with green, yellow and black.