cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg id="sa_logo"viewBox="0 0 531.769 332" enable-background="new 0 0 531.769 332" style="position: absolute; width: 0; height: 0;">
<g>
	<g>
		<g>
			<path fill="#03769F" d="M41.928,158.966c-0.6-0.745-1.329-1.349-2.183-1.86c-0.875-0.495-1.928-0.734-3.178-0.734
				c-1.183,0-2.199,0.239-3.064,0.734c-0.859,0.511-1.297,1.245-1.297,2.183c0,0.777,0.255,1.402,0.745,1.881
				c0.5,0.474,1.094,0.87,1.771,1.156c0.672,0.303,1.407,0.516,2.178,0.662c0.771,0.151,1.428,0.276,1.986,0.385
				c1.073,0.266,2.073,0.573,2.995,0.948c0.949,0.359,1.751,0.834,2.444,1.428c0.683,0.583,1.213,1.308,1.594,2.146
				c0.38,0.85,0.573,1.881,0.573,3.095c0,1.475-0.307,2.73-0.933,3.772c-0.625,1.057-1.427,1.896-2.428,2.568
				c-0.995,0.667-2.126,1.141-3.386,1.433c-1.276,0.292-2.553,0.453-3.835,0.453c-2.178,0-4.074-0.344-5.71-1
				c-1.642-0.662-3.105-1.876-4.397-3.642l3.762-3.089c0.802,0.808,1.709,1.526,2.699,2.152c0.996,0.625,2.204,0.938,3.647,0.938
				c0.615,0,1.25-0.067,1.896-0.198c0.646-0.12,1.219-0.328,1.72-0.604c0.489-0.276,0.896-0.62,1.203-1.047
				c0.318-0.422,0.463-0.907,0.463-1.459c0-0.735-0.218-1.35-0.672-1.818c-0.484-0.484-1.016-0.854-1.672-1.136
				c-0.641-0.276-1.313-0.495-2.032-0.656c-0.724-0.167-1.354-0.313-1.902-0.412c-1.068-0.271-2.084-0.562-3.038-0.891
				c-0.958-0.323-1.802-0.771-2.542-1.313c-0.729-0.563-1.323-1.256-1.755-2.11c-0.443-0.844-0.672-1.892-0.672-3.147
				c0-1.354,0.292-2.542,0.859-3.553c0.573-1.011,1.323-1.855,2.266-2.501c0.928-0.667,1.996-1.162,3.199-1.49
				c1.188-0.339,2.387-0.49,3.611-0.49c1.766,0,3.464,0.323,5.085,0.975c1.61,0.662,2.901,1.771,3.85,3.319L41.928,158.966z"/>
		</g>
		<g>
			<path fill="#03769F" d="M50.842,143.018c0-0.995,0.354-1.85,1.079-2.568c0.713-0.713,1.568-1.073,2.558-1.073
				c0.995,0,1.844,0.36,2.574,1.073c0.714,0.719,1.068,1.573,1.068,2.568c0,0.99-0.354,1.855-1.068,2.563
				c-0.729,0.719-1.579,1.084-2.574,1.084c-0.99,0-1.845-0.365-2.558-1.084C51.197,144.873,50.842,144.008,50.842,143.018z
				 M52.004,152.396h4.965v26.155h-4.965V152.396z"/>
		</g>
		<g>
			<path fill="#03769F" d="M64.118,152.396h4.632v4.085h0.109c0.11-0.365,0.396-0.829,0.86-1.375
				c0.453-0.552,1.047-1.068,1.761-1.579c0.713-0.5,1.568-0.917,2.537-1.271c0.974-0.333,2.047-0.506,3.23-0.506
				c1.949,0,3.59,0.391,4.908,1.199c1.318,0.813,2.407,2.027,3.251,3.647c0.844-1.621,2.042-2.834,3.584-3.647
				c1.553-0.808,3.11-1.199,4.694-1.199c2.021,0,3.679,0.323,4.965,0.975c1.282,0.662,2.297,1.537,3.032,2.631
				c0.74,1.083,1.24,2.313,1.521,3.694c0.276,1.381,0.411,2.803,0.411,4.277v15.224H98.65v-14.573c0-0.99-0.068-1.938-0.193-2.855
				c-0.135-0.922-0.401-1.74-0.808-2.433c-0.396-0.698-0.979-1.266-1.709-1.688c-0.719-0.412-1.704-0.63-2.923-0.63
				c-2.381,0-4.101,0.734-5.122,2.204c-1.042,1.475-1.552,3.366-1.552,5.679v14.296h-4.96v-13.677c0-1.255-0.063-2.392-0.198-3.428
				c-0.12-1.037-0.391-1.917-0.761-2.673c-0.391-0.755-0.938-1.349-1.667-1.771c-0.708-0.412-1.683-0.63-2.896-0.63
				c-0.875,0-1.74,0.182-2.563,0.531c-0.834,0.338-1.563,0.87-2.188,1.558c-0.615,0.704-1.104,1.594-1.48,2.678
				c-0.364,1.089-0.552,2.371-0.552,3.84v13.572h-4.96V152.396z"/>
		</g>
		<g>
			<path fill="#03769F" d="M110.514,152.396h4.965v3.751h0.114c0.949-1.391,2.272-2.479,3.949-3.256
				c1.662-0.777,3.397-1.142,5.148-1.142c2.032,0,3.855,0.344,5.491,1.027c1.636,0.713,3.042,1.678,4.199,2.933
				c1.162,1.256,2.042,2.705,2.667,4.387c0.625,1.672,0.948,3.459,0.948,5.382c0,1.943-0.323,3.756-0.948,5.424
				c-0.625,1.678-1.505,3.131-2.667,4.366c-1.157,1.225-2.563,2.188-4.199,2.892c-1.636,0.698-3.459,1.057-5.491,1.057
				c-1.866,0-3.647-0.4-5.284-1.188c-1.667-0.792-2.933-1.875-3.814-3.235h-0.114v19.319h-4.965V152.396z M124.086,156.372
				c-1.318,0-2.511,0.234-3.584,0.692c-1.058,0.464-1.97,1.084-2.699,1.876c-0.735,0.792-1.303,1.74-1.709,2.866
				c-0.406,1.12-0.615,2.355-0.615,3.673c0,1.313,0.208,2.543,0.615,3.658c0.407,1.13,0.974,2.084,1.709,2.871
				c0.729,0.797,1.641,1.427,2.699,1.881c1.073,0.469,2.266,0.688,3.584,0.688c1.323,0,2.521-0.218,3.584-0.688
				c1.073-0.454,1.975-1.083,2.709-1.881c0.729-0.787,1.292-1.74,1.708-2.871c0.396-1.115,0.604-2.345,0.604-3.658
				c0-1.318-0.208-2.553-0.604-3.673c-0.416-1.125-0.979-2.074-1.708-2.866c-0.735-0.792-1.636-1.412-2.709-1.876
				C126.608,156.606,125.409,156.372,124.086,156.372z"/>
		</g>
		<g>
			<path fill="#03769F" d="M143.848,136.844h4.965v41.707h-4.965V136.844z"/>
		</g>
		<g>
			<path fill="#03769F" d="M152.909,152.396h5.741l7.748,20.418h0.114l7.419-20.418h5.288l-12.41,31.782
				c-0.438,1.141-0.901,2.172-1.37,3.116c-0.464,0.922-1.037,1.74-1.694,2.396c-0.666,0.662-1.458,1.173-2.396,1.538
				c-0.934,0.38-2.084,0.557-3.429,0.557c-0.729,0-1.48-0.041-2.22-0.135c-0.761-0.093-1.485-0.286-2.178-0.583l0.604-4.517
				c0.99,0.401,1.969,0.604,2.959,0.604c0.772,0,1.417-0.094,1.938-0.301c0.531-0.208,1.001-0.501,1.381-0.881
				c0.391-0.396,0.708-0.838,0.953-1.36c0.25-0.505,0.517-1.1,0.771-1.761l1.6-4.142L152.909,152.396z"/>
		</g>
	</g>
	<g>
		<path fill="#1C7DA2" d="M206.557,216.512c6.377,18.344,16.114,35.116,28.499,49.568c27.067,31.615,66.726,52.122,111.204,53.749
			c1.918,0.067,3.83,0.124,5.757,0.124c35.627,0,68.42-12.107,94.501-32.427c23.217-18.074,41.119-42.671,50.966-71.014
			c5.438-15.667,8.43-32.49,8.477-49.996c0-0.167,0.006-0.344,0.006-0.521c0-14.5-2.002-28.536-5.753-41.848
			c-11.732-41.639-40.545-76.114-78.401-95.402c-18.12-9.217-38.299-14.969-59.66-16.35c-3.361-0.213-6.722-0.349-10.135-0.349
			c-27.201,0-52.757,7.081-74.941,19.465c-18.09,10.092-33.928,23.732-46.589,39.993c-20.319,26.082-32.417,58.875-32.417,94.491
			c0,17.318,2.855,33.959,8.127,49.496"/>
		<g>
			<path fill="#1B80A5" d="M373.582,214.6l0.423,0.417l131.956-48.5c0-0.167,0.006-0.344,0.006-0.521
				c0-14.5-2.002-28.536-5.753-41.848l-93.125-38.669L373.582,214.6z"/>
			<polygon fill="#1C7DA2" points="369.951,216.512 373.078,216.512 373.394,215.246 			"/>
			<path fill="#1D87AD" d="M500.213,124.147c-11.732-41.639-40.545-76.114-78.401-95.402l-14.724,56.733L500.213,124.147z"/>
			<polygon fill="#177FA4" points="373.078,216.512 375.5,216.512 374.004,215.016 373.394,215.246 			"/>
			<polygon fill="#177FA4" points="373.394,215.246 374.004,215.016 373.582,214.6 			"/>
			<polygon fill="#16769E" points="330.448,53.66 279.285,120.297 373.582,214.6 407.088,85.478 			"/>
			<path fill="#1C7DA2" d="M407.088,85.478l14.724-56.733c-18.12-9.217-38.299-14.969-59.66-16.35L330.448,53.66L407.088,85.478z"/>
			<path fill="#1D87AD" d="M369.951,216.512L235.056,266.08c27.067,31.615,66.726,52.122,111.204,53.749l26.817-103.317H369.951z"/>
			<path fill="#1D87AD" d="M362.152,12.396c-3.361-0.213-6.722-0.349-10.135-0.349c-27.201,0-52.757,7.081-74.941,19.465
				l53.372,22.148L362.152,12.396z"/>
			<path fill="#1D87AD" d="M446.518,287.526c23.217-18.074,41.119-42.671,50.966-71.014H375.5L446.518,287.526z"/>
			<path fill="#177FA4" d="M374.004,215.016l1.495,1.496h121.984c5.438-15.667,8.43-32.49,8.477-49.996L374.004,215.016z"/>
			<path fill="#177FA4" d="M373.078,216.512L346.26,319.829c1.918,0.067,3.83,0.124,5.757,0.124
				c35.627,0,68.42-12.107,94.501-32.427L375.5,216.512H373.078z"/>
			<path fill="#1C7DA2" d="M330.448,53.66l-53.372-22.148c-18.09,10.092-33.928,23.732-46.589,39.993l48.798,48.793L330.448,53.66z"
				/>
			<path fill="#1B80A5" d="M206.557,216.512c6.377,18.344,16.114,35.116,28.499,49.568l134.895-49.568H206.557z"/>
			<path fill="#1D87AD" d="M230.487,71.504c-20.319,26.082-32.417,58.875-32.417,94.491c0,17.318,2.855,33.959,8.127,49.496
				l73.088-95.193L230.487,71.504z"/>
			<path fill="#1C7DA2" d="M373.394,215.246l0.188-0.646l-94.297-94.302l-73.088,95.193c0.115,0.338,0.24,0.678,0.36,1.021h163.394
				L373.394,215.246z"/>
		</g>
		<g>
			<path fill="#FFFFFF" d="M227.204,155.59c1.397-1.282,3.018-2.24,4.856-2.887c1.845-0.641,3.679-0.954,5.513-0.954
				c1.917,0,3.563,0.225,4.949,0.704c1.359,0.479,2.506,1.131,3.387,1.923c0.886,0.823,1.532,1.75,1.959,2.787
				c0.417,1.058,0.636,2.157,0.636,3.288V173.8c0,0.922,0.021,1.776,0.052,2.542c0.037,0.771,0.094,1.511,0.167,2.209h-4.418
				c-0.104-1.329-0.167-2.652-0.167-3.976h-0.104c-1.104,1.694-2.406,2.881-3.907,3.585c-1.521,0.698-3.262,1.057-5.241,1.057
				c-1.225,0-2.386-0.172-3.486-0.51c-1.089-0.323-2.067-0.828-2.892-1.485c-0.833-0.662-1.489-1.485-1.964-2.459
				c-0.474-0.969-0.714-2.105-0.714-3.397c0-1.683,0.375-3.1,1.136-4.241c0.756-1.136,1.767-2.068,3.079-2.782
				c1.309-0.709,2.825-1.235,4.58-1.542c1.74-0.318,3.616-0.475,5.606-0.475h3.637v-1.099c0-0.662-0.13-1.324-0.391-1.98
				c-0.251-0.672-0.652-1.271-1.152-1.797c-0.516-0.531-1.167-0.964-1.928-1.276c-0.771-0.308-1.693-0.464-2.761-0.464
				c-0.964,0-1.792,0.089-2.516,0.281c-0.72,0.183-1.372,0.407-1.965,0.672c-0.579,0.287-1.115,0.609-1.585,0.974
				c-0.479,0.375-0.947,0.714-1.38,1.053L227.204,155.59z M241.214,165.969c-1.178,0-2.381,0.073-3.61,0.192
				c-1.24,0.136-2.35,0.375-3.366,0.745c-1.01,0.365-1.844,0.881-2.479,1.548c-0.642,0.656-0.959,1.506-0.959,2.537
				c0,1.511,0.495,2.595,1.512,3.256c1.01,0.662,2.38,0.985,4.104,0.985c1.366,0,2.522-0.224,3.481-0.688
				c0.952-0.454,1.729-1.053,2.318-1.788c0.578-0.734,1.01-1.552,1.261-2.454c0.261-0.901,0.391-1.803,0.391-2.678v-1.657H241.214z"
				/>
			<path fill="#FFFFFF" d="M273.835,159.347c-0.917-0.948-1.887-1.677-2.897-2.183c-1.012-0.5-2.22-0.739-3.616-0.739
				c-1.364,0-2.542,0.239-3.559,0.739c-1.005,0.506-1.849,1.188-2.531,2.053c-0.688,0.849-1.193,1.854-1.548,2.97
				c-0.35,1.125-0.521,2.292-0.521,3.506c0,1.213,0.204,2.371,0.61,3.444c0.39,1.094,0.979,2.037,1.704,2.845
				c0.729,0.808,1.625,1.453,2.646,1.907c1.031,0.469,2.188,0.688,3.48,0.688c1.396,0,2.589-0.25,3.595-0.74
				c0.979-0.495,1.907-1.235,2.751-2.183l3.526,3.533c-1.286,1.433-2.792,2.454-4.496,3.089c-1.719,0.625-3.521,0.943-5.434,0.943
				c-2.021,0-3.871-0.344-5.544-1c-1.667-0.662-3.121-1.6-4.33-2.782c-1.208-1.193-2.15-2.631-2.812-4.304
				c-0.656-1.683-0.99-3.527-0.99-5.549c0-2.027,0.334-3.876,0.99-5.564c0.662-1.704,1.584-3.152,2.781-4.366
				c1.199-1.204,2.637-2.163,4.305-2.834c1.678-0.688,3.537-1.026,5.601-1.026c1.912,0,3.751,0.338,5.496,1.026
				c1.74,0.672,3.257,1.709,4.533,3.116L273.835,159.347z"/>
			<path fill="#FFFFFF" d="M299.531,159.347c-0.927-0.948-1.891-1.677-2.901-2.183c-1.006-0.5-2.215-0.739-3.611-0.739
				c-1.364,0-2.553,0.239-3.553,0.739c-1.021,0.506-1.865,1.188-2.554,2.053c-0.666,0.849-1.198,1.854-1.536,2.97
				c-0.359,1.125-0.527,2.292-0.527,3.506c0,1.213,0.199,2.371,0.615,3.444c0.407,1.094,0.964,2.037,1.709,2.845
				c0.74,0.808,1.615,1.453,2.647,1.907c1.026,0.469,2.188,0.688,3.475,0.688c1.391,0,2.59-0.25,3.58-0.74
				c1-0.495,1.917-1.235,2.761-2.183l3.532,3.533c-1.292,1.433-2.782,2.454-4.49,3.089c-1.72,0.625-3.533,0.943-5.451,0.943
				c-2.01,0-3.854-0.344-5.532-1c-1.678-0.662-3.116-1.6-4.34-2.782c-1.204-1.193-2.143-2.631-2.809-4.304
				c-0.662-1.683-1-3.527-1-5.549c0-2.027,0.338-3.876,1-5.564c0.666-1.704,1.595-3.152,2.793-4.366
				c1.188-1.204,2.625-2.163,4.299-2.834c1.672-0.688,3.542-1.026,5.589-1.026c1.918,0,3.752,0.338,5.503,1.026
				c1.74,0.672,3.261,1.709,4.554,3.116L299.531,159.347z"/>
			<path fill="#FFFFFF" d="M310.41,167.292c0,1.152,0.239,2.178,0.74,3.126c0.5,0.933,1.151,1.724,1.97,2.396
				c0.796,0.656,1.739,1.172,2.808,1.542c1.063,0.364,2.173,0.552,3.309,0.552c1.542,0,2.886-0.365,4.027-1.074
				c1.136-0.724,2.188-1.667,3.147-2.845l3.745,2.866c-2.751,3.569-6.616,5.361-11.588,5.361c-2.057,0-3.917-0.359-5.595-1.057
				c-1.667-0.704-3.09-1.667-4.251-2.892c-1.146-1.234-2.054-2.688-2.668-4.366c-0.625-1.667-0.938-3.48-0.938-5.424
				c0-1.954,0.338-3.767,1.01-5.445c0.684-1.667,1.627-3.115,2.814-4.355c1.198-1.23,2.625-2.189,4.282-2.902
				c1.651-0.683,3.46-1.027,5.393-1.027c2.328,0,4.288,0.391,5.882,1.199c1.604,0.813,2.929,1.865,3.95,3.178
				c1.031,1.297,1.781,2.772,2.239,4.402c0.448,1.646,0.688,3.313,0.688,5.002v1.761H310.41z M326.077,163.327
				c-0.036-1.11-0.214-2.115-0.526-3.037c-0.308-0.923-0.782-1.725-1.407-2.407c-0.63-0.678-1.406-1.219-2.344-1.6
				c-0.938-0.38-2.032-0.573-3.282-0.573c-1.209,0-2.324,0.229-3.335,0.688c-1.011,0.463-1.876,1.057-2.563,1.787
				c-0.693,0.75-1.245,1.558-1.626,2.459c-0.386,0.912-0.583,1.803-0.583,2.683H326.077z"/>
			<path fill="#FFFFFF" d="M350.539,158.966c-0.595-0.745-1.318-1.349-2.178-1.86c-0.876-0.495-1.934-0.734-3.174-0.734
				c-1.183,0-2.204,0.239-3.068,0.734c-0.859,0.511-1.292,1.245-1.292,2.183c0,0.777,0.255,1.402,0.75,1.881
				c0.489,0.474,1.084,0.87,1.766,1.156c0.672,0.303,1.413,0.516,2.173,0.662c0.767,0.151,1.429,0.276,1.98,0.385
				c1.083,0.266,2.073,0.573,3.012,0.948c0.937,0.359,1.739,0.834,2.427,1.428c0.678,0.583,1.22,1.308,1.604,2.146
				c0.392,0.85,0.585,1.881,0.585,3.095c0,1.475-0.323,2.73-0.944,3.772c-0.63,1.057-1.442,1.896-2.433,2.568
				c-0.99,0.667-2.121,1.141-3.386,1.433c-1.271,0.292-2.554,0.453-3.835,0.453c-2.168,0-4.064-0.344-5.716-1
				c-1.626-0.662-3.101-1.876-4.371-3.642l3.735-3.089c0.818,0.808,1.714,1.526,2.715,2.152c0.979,0.625,2.198,0.938,3.637,0.938
				c0.625,0,1.261-0.067,1.896-0.198c0.646-0.12,1.219-0.328,1.719-0.604c0.49-0.276,0.896-0.62,1.22-1.047
				c0.307-0.422,0.464-0.907,0.464-1.459c0-0.735-0.229-1.35-0.693-1.818c-0.458-0.484-1.016-0.854-1.656-1.136
				c-0.646-0.276-1.318-0.495-2.043-0.656c-0.719-0.167-1.354-0.313-1.907-0.412c-1.062-0.271-2.078-0.562-3.032-0.891
				c-0.958-0.323-1.803-0.771-2.532-1.313c-0.729-0.563-1.323-1.256-1.771-2.11c-0.438-0.844-0.656-1.892-0.656-3.147
				c0-1.354,0.281-2.542,0.854-3.553c0.573-1.011,1.324-1.855,2.261-2.501c0.943-0.667,2.001-1.162,3.205-1.49
				c1.188-0.339,2.396-0.49,3.61-0.49c1.756,0,3.449,0.323,5.075,0.975c1.609,0.662,2.896,1.771,3.854,3.319L350.539,158.966z"/>
			<path fill="#FFFFFF" d="M374.651,158.966c-0.584-0.745-1.309-1.349-2.179-1.86c-0.865-0.495-1.922-0.734-3.167-0.734
				c-1.178,0-2.199,0.239-3.064,0.734c-0.875,0.511-1.296,1.245-1.296,2.183c0,0.777,0.243,1.402,0.755,1.881
				c0.484,0.474,1.078,0.87,1.751,1.156c0.688,0.303,1.406,0.516,2.177,0.662c0.771,0.151,1.433,0.276,1.99,0.385
				c1.062,0.266,2.074,0.573,3.012,0.948c0.933,0.359,1.735,0.834,2.417,1.428c0.678,0.583,1.22,1.308,1.605,2.146
				c0.396,0.85,0.578,1.881,0.578,3.095c0,1.475-0.308,2.73-0.938,3.772c-0.619,1.057-1.433,1.896-2.422,2.568
				c-0.995,0.667-2.12,1.141-3.397,1.433c-1.271,0.292-2.542,0.453-3.834,0.453c-2.168,0-4.064-0.344-5.716-1
				c-1.631-0.662-3.09-1.876-4.377-3.642l3.751-3.089c0.818,0.808,1.704,1.526,2.699,2.152c0.985,0.625,2.214,0.938,3.643,0.938
				c0.625,0,1.261-0.067,1.906-0.198c0.642-0.12,1.22-0.328,1.704-0.604c0.5-0.276,0.901-0.62,1.225-1.047
				c0.312-0.422,0.469-0.907,0.469-1.459c0-0.735-0.239-1.35-0.692-1.818c-0.465-0.484-1.017-0.854-1.662-1.136
				c-0.646-0.276-1.313-0.495-2.043-0.656c-0.72-0.167-1.349-0.313-1.896-0.412c-1.073-0.271-2.084-0.562-3.032-0.891
				c-0.959-0.323-1.808-0.771-2.537-1.313c-0.734-0.563-1.318-1.256-1.767-2.11c-0.448-0.844-0.666-1.892-0.666-3.147
				c0-1.354,0.286-2.542,0.859-3.553c0.567-1.011,1.328-1.855,2.261-2.501c0.938-0.667,2.007-1.162,3.194-1.49
				c1.198-0.339,2.412-0.49,3.615-0.49c1.771,0,3.465,0.323,5.075,0.975c1.625,0.662,2.911,1.771,3.854,3.319L374.651,158.966z"/>
			<path fill="#FFFFFF" d="M383.581,143.018c0-0.995,0.354-1.85,1.073-2.568c0.719-0.713,1.573-1.073,2.563-1.073
				c1.006,0,1.85,0.36,2.568,1.073c0.714,0.719,1.078,1.573,1.078,2.568c0,0.99-0.364,1.855-1.078,2.563
				c-0.719,0.719-1.562,1.084-2.568,1.084c-0.99,0-1.845-0.365-2.563-1.084C383.934,144.873,383.581,144.008,383.581,143.018z
				 M384.732,152.396h4.97v26.155h-4.97V152.396z"/>
			<path fill="#FFFFFF" d="M396.85,136.844h4.966v19.303h0.109c0.88-1.349,2.156-2.428,3.809-3.225
				c1.656-0.792,3.423-1.173,5.299-1.173c2.016,0,3.85,0.344,5.486,1.027c1.641,0.713,3.032,1.672,4.188,2.902
				c1.156,1.24,2.048,2.688,2.678,4.355c0.625,1.678,0.938,3.491,0.938,5.445c0,1.943-0.313,3.756-0.938,5.403
				c-0.63,1.651-1.521,3.105-2.678,4.351c-1.156,1.255-2.548,2.225-4.188,2.928c-1.637,0.698-3.471,1.057-5.486,1.057
				c-1.767,0-3.486-0.391-5.164-1.178c-1.677-0.766-2.984-1.849-3.943-3.245h-0.109v3.756h-4.966V136.844z M410.422,174.576
				c1.324,0,2.521-0.218,3.591-0.688c1.058-0.454,1.959-1.083,2.703-1.881c0.729-0.787,1.303-1.74,1.709-2.871
				c0.396-1.115,0.6-2.345,0.6-3.658c0-1.318-0.203-2.553-0.6-3.673c-0.406-1.125-0.979-2.074-1.709-2.866
				c-0.744-0.792-1.646-1.412-2.703-1.876c-1.069-0.458-2.267-0.692-3.591-0.692c-1.322,0-2.521,0.234-3.589,0.692
				c-1.063,0.464-1.965,1.084-2.694,1.876c-0.75,0.792-1.312,1.74-1.72,2.866c-0.405,1.12-0.604,2.355-0.604,3.673
				c0,1.313,0.198,2.543,0.604,3.658c0.407,1.13,0.97,2.084,1.72,2.871c0.729,0.797,1.631,1.427,2.694,1.881
				C407.901,174.357,409.1,174.576,410.422,174.576z"/>
			<path fill="#FFFFFF" d="M430.18,136.844h4.955v41.707h-4.955V136.844z"/>
			<path fill="#FFFFFF" d="M446.123,167.292c0,1.152,0.251,2.178,0.761,3.126c0.49,0.933,1.136,1.724,1.948,2.396
				c0.812,0.656,1.74,1.172,2.804,1.542c1.073,0.364,2.183,0.552,3.324,0.552c1.541,0,2.886-0.365,4.021-1.074
				c1.137-0.724,2.188-1.667,3.146-2.845l3.751,2.866c-2.766,3.569-6.626,5.361-11.581,5.361c-2.068,0-3.924-0.359-5.602-1.057
				c-1.677-0.704-3.094-1.667-4.256-2.892c-1.151-1.234-2.048-2.688-2.668-4.366c-0.63-1.667-0.933-3.48-0.933-5.424
				c0-1.954,0.334-3.767,1.016-5.445c0.683-1.667,1.621-3.115,2.814-4.355c1.188-1.23,2.62-2.189,4.277-2.902
				c1.646-0.683,3.449-1.027,5.407-1.027c2.303,0,4.273,0.391,5.872,1.199c1.6,0.813,2.917,1.865,3.944,3.178
				c1.026,1.297,1.762,2.772,2.225,4.402c0.464,1.646,0.703,3.313,0.703,5.002v1.761H446.123z M461.784,163.327
				c-0.031-1.11-0.198-2.115-0.516-3.037c-0.328-0.923-0.781-1.725-1.401-2.407c-0.625-0.678-1.407-1.219-2.339-1.6
				c-0.943-0.38-2.043-0.573-3.288-0.573c-1.22,0-2.334,0.229-3.34,0.688c-1.017,0.463-1.87,1.057-2.568,1.787
				c-0.688,0.75-1.24,1.558-1.636,2.459c-0.37,0.912-0.573,1.803-0.573,2.683H461.784z"/>
			<path fill="#FFFFFF" d="M475.184,178.874c-1,0-1.849-0.359-2.562-1.068c-0.72-0.724-1.079-1.579-1.079-2.574
				c0-0.985,0.359-1.844,1.079-2.558c0.714-0.724,1.562-1.079,2.562-1.079c0.99,0,1.85,0.354,2.563,1.079
				c0.709,0.714,1.073,1.573,1.073,2.558c0,0.995-0.364,1.85-1.073,2.574C477.034,178.515,476.174,178.874,475.184,178.874z"/>
		</g>
	</g>
</g>
</svg>

<h1>Labelling SVG with aria-label</h1>

<h2>aria-label within a non-focusable element</h2>
<p>When using VoiceOver/Safari on both MacOS and iOS, VoiceOver will skip over this element and not read the <code>aria-label</code>.
<p>
  <svg aria-label="Simply Accessible" role="img" focusable="no"> <use xlink:href="#sa_logo"></use> </svg>
</p>

<h2>aria-label within a focusable element</h2>
<p>VoiceOver will read the <code>aria-label</code> when the SVG element is within a focusable element, e.g. an anchor.

<p>
  <a href="https://simplyaccessible.com">
    <svg aria-label="Simply Accessible" role="img" focusable="no"> <use xlink:href="#sa_logo"></use> </svg>
  </a>
</p>

<h2>A different approach</h2>

<p>For the sake of a consistent approach, using visually hidden content is preferable.</p>

<p>
  <a href="https://simplyaccessible.com">
    <svg role="img" focusable="no"> <use xlink:href="#sa_logo"></use> </svg>
    <span class="visuallyhidden">Simply Accessible</span>
  </a>
</p>
            
          
!
            
              .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console