Skip to content

Add live sample embeds for SVG path examples#38928

Merged
Josh-Cena merged 7 commits intomdn:mainfrom
AshmitGupta:add-svg-live-samples
Apr 5, 2025
Merged

Add live sample embeds for SVG path examples#38928
Josh-Cena merged 7 commits intomdn:mainfrom
AshmitGupta:add-svg-live-samples

Conversation

@AshmitGupta
Copy link
Copy Markdown
Contributor

@AshmitGupta AshmitGupta commented Apr 2, 2025

Description

  • Fixed the label in svgarcs_flags.png to reflect "Large Arc Flag"
  • Updated the page to include {{EmbedLiveSample}} for better user experience

Motivation

  • The previous image used an incorrect label which could confuse readers about the large-arc-flag and sweep-flag parameters.
  • Also, the addition of live sample embeds maies it easier for users to experiment directly with the examples.

Additional details

Related issues and pull requests

Fixes #38495

@AshmitGupta AshmitGupta requested a review from a team as a code owner April 2, 2025 06:33
@AshmitGupta AshmitGupta requested review from chrisdavidmills and removed request for a team April 2, 2025 06:33
@github-actions github-actions bot added Content:SVG SVG docs size/m [PR only] 51-500 LoC changed labels Apr 2, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2025 •
edited
Loading

Preview URLs

Flaws (9)

URL: /en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths
Title: Paths
Flaw count: 9

  • macros:
    • Macro produces link /en-US/docs/Web/SVG/Element/path which is a redirect
    • Macro produces link /en-US/docs/Web/SVG/Attribute/d which is a redirect
    • Macro produces link /en-US/docs/Web/SVG/Element/path which is a redirect
    • Macro produces link /en-US/docs/Web/SVG/Element/rect which is a redirect
    • Macro produces link /en-US/docs/Web/SVG/Element/polygon which is a redirect
    • and 4 more flaws omitted

(comment last updated: 2025-04-05 19:00:37)

@AshmitGupta
Copy link
Copy Markdown
Contributor Author

AshmitGupta commented Apr 2, 2025 •
edited
Loading

I think the original intention behind this issue may have been to replace the PNG diagrams with live SVG samples. I've gone ahead and added {{EmbedLiveSample}} blocks for interactivity wherever possible.

That said, some of the PNG illustrations, especially those with blue and red lines, convey additional contextual information (like inferred control points or ellipse boundaries) that’s not as easily represented through live code alone. So instead of removing those, I’ve kept them alongside the live samples to preserve that extra clarity.

Happy to hear your thoughts on this approach!

chrisdavidmills
chrisdavidmills approved these changes Apr 2, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @AshmitGupta, and thank you so much for converting all of these demos into live samples. I really think it improves the experience on the page.

The only thing I wondered is whether it would be good to add a paragraph before each live sample embed saying something like "The above code is rendered as follows:", so it is really obvious what the connection is in each case. What do you think?

@AshmitGupta
Copy link
Copy Markdown
Contributor Author

AshmitGupta commented Apr 3, 2025

Hi @AshmitGupta, and thank you so much for converting all of these demos into live samples. I really think it improves the experience on the page.

The only thing I wondered is whether it would be good to add a paragraph before each live sample embed saying something like "The above code is rendered as follows:", so it is really obvious what the connection is in each case. What do you think?

Thanks @chrisdavidmills! That’s a great suggestion.

Just wanted to note that pages like https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin and https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width also use similar live SVG embeds, and they don’t include that extra explanatory line either.

I think that extra sentence might have made more sense if we were keeping the PNG images. But since, as @Josh-Cena pointed out, we’re replacing them with live SVG samples and possibly incorporating the necessary markup directly into them, it feels consistent to follow the simpler pattern used in those other pages. What do you think?

@chrisdavidmills
Copy link
Copy Markdown
Contributor

chrisdavidmills commented Apr 4, 2025 •
edited
Loading

Thanks @chrisdavidmills! That’s a great suggestion.

Just wanted to note that pages like https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin and https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width also use similar live SVG embeds, and they don’t include that extra explanatory line either.

I think that extra sentence might have made more sense if we were keeping the PNG images. But since, as @Josh-Cena pointed out, we’re replacing them with live SVG samples and possibly incorporating the necessary markup directly into them, it feels consistent to follow the simpler pattern used in those other pages. What do you think?

@AshmitGupta OK, that is totally fair. I'm not that familiar with the SVG docs; in the API and CSS docs, we usually include a bit more structure and explanation around the code listing and live example, but I think you are right — it makes sense to be consistent.

I'm satisfied with this, but I'll not merge yet in case @Josh-Cena has any more thoughts, or you want to make any more changes.

@github-actions github-actions bot added size/l [PR only] 501-1000 LoC changed and removed size/m [PR only] 51-500 LoC changed labels Apr 5, 2025
github-actions[bot]
github-actions bot reviewed Apr 5, 2025
View reviewed changes
@Josh-Cena @github-actions
Update files/en-us/web/svg/tutorials/svg_from_scratch/paths/index.md
276b75e 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Josh-Cena
Josh-Cena approved these changes Apr 5, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@Josh-Cena Josh-Cena left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm having a lot of fun :) I now migrated all PNGs to SVGs, and made the reference markup hidden from the page. Thank you!

@Josh-Cena Josh-Cena merged commit 725d22d into mdn:main Apr 5, 2025
8 checks passed
wbamberg added a commit to wbamberg/content that referenced this pull request Apr 6, 2025
@wbamberg
Merge remote-tracking branch 'upstream/main' into cross-site-leaks
313c06d 
* upstream/main: (158 commits)
  fix: remove unrelated add() method reference from openCursor() doc (mdn#38998)
  Fix link (mdn#38995)
  Remove uncovered topic from a tuturial overview. (mdn#38999)
  Change the description of Temporal.Instant (mdn#38996)
  Remove `port` mention for URL `protocol` documentation (mdn#39000)
  Improve the clarity of a sentence (mdn#39003)
  Change if...else to non-zero on control_flow page (mdn#38992)
  Update group-data of EditContext API (mdn#38842)
  improve description (mdn#38845)
  fix: auto-cleanup by bot (mdn#38990)
  New pages: HTMLFormElement.rel and .relList (mdn#38900)
  Add live sample embeds for SVG path examples (mdn#38928)
  Remove uncovered topic from the introduction (mdn#38986)
  Remove self-links (mdn#38982)
  Synchronize with BCD v6.0.3 (mdn#38983)
  Fix grammar (mdn#38981)
  Remove external Web Speech API articles (mdn#38980)
  Add missing {{Specifications}} macros (mdn#38975)
  Remove browser-compat for CSS types without BCD (mdn#38970)
  Update async_function_star_ to have a working example (mdn#38972)
  ...
cssinate pushed a commit to cssinate/content that referenced this pull request Apr 11, 2025
@AshmitGupta @Josh-Cena
@github-actions @paul-grant-hs
Add live sample embeds for SVG path examples (mdn#38928)
3e0197f 
* Add live sample embeds for SVG path examples

* Update index.md

* Removed extra png image for large arc sweep flag

* Migrate all PNG

* Update files/en-us/web/svg/tutorials/svg_from_scratch/paths/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Minor fix

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments

@chrisdavidmills chrisdavidmills chrisdavidmills approved these changes

@Josh-Cena Josh-Cena Josh-Cena approved these changes

Assignees

No one assigned

Labels

Content:SVG SVG docs size/l [PR only] 501-1000 LoC changed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Incorrect column title in arc flags illustration: "Large Arc Sweep Flag"

4 participants

@AshmitGupta @chrisdavidmills @Josh-Cena @mdn-bot