Practice Widgets SVG locators
3 SVG demos
Widget practice · Inline SVG

SVG locators practice

Three inline-SVG widgets — a shape gallery, an interactive bar chart, and a star rating control. Practise SVG-aware locators, ARIA role + accessible name, and data-testid on SVG nodes. SVG circle/rect/path all work with normal CSS selectors.

① Shape gallery

Click any shape to select it. Each node has an id, data-testid, and an aria-label.

id=circle-red · circle-blue · rect-amber · triangle-mint · star-violet data-testid=shape-{name} role=img + aria-label per shape
No shape selected yet.

② Bar chart

Click any bar to highlight it. Each rect is a button-shaped target with role="button" and an aria-label like "Q3 bar — 78".

Q1 Q2 Q3 Q4 Q5 42 64 78 92 56
data-testid=bar-q1 … bar-q5 data-quarter=Q1 … Q5 role=button · aria-label="Q<n> bar — <value>"
No bar selected yet.

③ Star rating

Click a star to set the rating. Each star is a clickable polygon with role="radio" and an aria-label.

Rating: 0 / 5
data-testid=star-1 … star-5 · stars-readout role=radio · aria-label="N stars" group=svg[role=radiogroup]