A better SVG Image

[mgifford]

What version of astro are you using?

v2.9.7

Are you using an SSR adapter? If so, which one?

No idea

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Edge

Describe the Bug

On the start page http://localhost:3000/

The SVG image for the logo could be improved:
https://codepen.io/mgifford-the-typescripter/pen/ExOGJeE

Really, it should be more visible than it is, but this would be a better semantic SVG file.

SVG files like this should have a tilte & description as they have a meaning visually.

What's the expected result?

I posted it above, for other examples, see https://codepen.io/cariefisher/pen/QWpjded

Link to Minimal Reproducible Example

https://codepen.io/mgifford-the-typescripter/pen/ExOGJeE

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

If you'd like to open a PR to update the example, please feel free! The SVG is inlined because we don't want to include an additional file for users to delete when they start writing their project.

I would say that this SVG is entirely decorative, so a semantic title and description would be less ideal than simply including alt="" and role="presentation".

[mgifford]

Ya, that would work too. Would make it easier to be multi-lingual. Created this little PR:

#7926 

You can't add alt="" to a SVG.

Reference:
https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html#svgs-that-are-decorative