feat: add info about where to put SVG assets

[bsmth]

Description

Most of the work to remove binary assets is done in the HTTP section.
This PR adds some hints about using SVG for diagrams, where to put them, and how they're included in content.

Motivation

Closing out the discussion with a recommendation for using SVG in shared assets.

[github-actions]

Preview URLs

• /en-US/docs/MDN/Writing_guidelines/Howto/Images_media

Flaws (2)

URL: /en-US/docs/MDN/Writing_guidelines/Howto/Images_media
Title: How to add images, media, and assets
Flaw count: 2

• broken_links:
  • /en-US/docs/Glossary/aspect_ratio is ill cased
• macros:
  • Macro produces link /en-US/docs/Glossary/aspect_ratio which is a redirect

External URLs (1)

URL: /en-US/docs/MDN/Writing_guidelines/Howto/Images_media
Title: How to add images, media, and assets

• https://github.com/orgs/mdn/discussions/631 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-02-17 09:28:51)

[estelle]

LGTM

[hamishwillee]

The text itself is more or less fine, but it feels structurally odd/out of place:

• SVG is an image so how does Adding SVGs differ/relate to the following topic on Adding Images
• Do the rules in Adding images apply to this or not?
• Do the instructions for shared assets also apply to other types of content? What are the recommendations for shared content - should we have every image in the shared repo, or just those that we intend to be shared.

My thinking on this is that

• all the image topics should be grouped under an "IMages" heading.
• • The content on SVGs should be image guidelines at the top of that section and we should generally suggest SVG for line/vector images, and PNG or WebP for other image types.
• The "Adding images" should become "Adding images locally"
• The Adding to shared assets should appear after adding images locally at the same level.

Structurally that groups like-topics. Thoughts?

[bsmth]

Good points. I've added something here which partially covers what you mention: 20b286f

1. Check if you can use something from shared-assets first
2. Add something to shared-assets instead of the content repos when decorative / secondary
3. prefer SVG for diagrams, or where it's useful / practical
4. if you really need to, commit the files to the repo

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[hamishwillee]

LGTM. Approving - not merging in case you want to wait on further comments.

[bsmth]

LGTM. Approving - not merging in case you want to wait on further comments.

I think we're good for now, thanks a lot!