scale image sizes

[martin-raden]

The images to illustrate the need for version control were not scaled.

I added appropriate width values.

Best Martin

[github-actions]

🆗 Pre-flight checks passed 😃

This pull request has been checked and contains no modified workflow files, spoofing, or invalid commits.

It should be safe to Approve and Run the workflows that need maintainer approval.

[erinmgraham]

Thanks for working on improving the presentation of these diagrams — the progression you’re trying to show makes sense.

I built a local copy and noticed that the first image in the sequence (play-changes.svg) becomes visually distracting with this change. Because the SVGs have very different aspect ratios, scaling them to be roughly similar in width affects the first image disproportionately (screenshot below).

We generally avoid explicit image sizing in lessons and let the CSS handle scaling by default to avoid issues like these and ease maintainability.

I'll wait to see what others think but if scaling these diagrams is preferred, I think a more robust approach would be to adjust the SVGs themselves (e.g. normalising the canvas/viewBox so they have similar proportions). That keeps the lesson markup simple and avoids layout tweaks that fight the theme. Happy for you to go that route if you’d like.

[martin-raden]

Hi,

I am surprised about the rendering differences. I have used this part of your lesson within my own carpetries-based tutorial (with proper citation) https://dr-eberle-zentrum.github.io/intro-to-git-and-github/instructor/01-git-basics.html and it scales just fine:

Personally, I find the images in the original sizes much too big given their low (but important!) information content.

I see your point in the non-scaling strategy, but eventually I would says this is exactly what stylesheets etc are for?!!

Will see if I find the time to alter the svgs instead.

best,
Martin

[martin-raden]

as an alternative you can put a fixed width into the svgs at line 5 (within the head <svg> definition after the viewport):

• versions.svg and merge.svg : line 5 change at the end to viewBox="0 0 384 354" width="300px"
• play-changes.svg : line 5 change at the end to viewBox="0 0 615 196.5" width="470px"

and the files will be scaled to similar dimensions.

Hope that helps,
Martin