SVG images

Accessible SVG setup

The title is the accessible name.

	<svg width="80px" height="80px"
		viewBox="0 0 80 80"
		focusable="false"
		aria-labelledby="logo-header"
		role="img"
		>
		<title id="logo-header">Logo Level Level</title>
		[ groups and paths ]
	</svg>
	
Logo Level Level

Remove tooltip

The aria-label is the accessible name.

	<svg width="80px" height="80px"
		viewBox="0 0 80 80"
		focusable="false"
		aria-label="Logo Level Level"
		role="img"
		>
		[ groups and paths ]
	</svg>
	

Use the icon in a button

The aria-label on the button is the accessible name, the SVG content is overruled by the aria-label.

	<button aria-label="Menu">
	    <svg width="40" height="40"
	            viewBox="0 0 100 80"
	            focusable="false"
	            role="presentation"
	         >
	        <rect width="100" height="20"></rect>
	        <rect y="30" width="100" height="20"></rect>
	        <rect y="60" width="100" height="20"></rect>
	    </svg>
	</button>