Preserve aspect ratio of svg elements when changing their width

[benface]

Summary

Not sure if there's any reason why the "Constrain images and videos to the parent width and preserve their intrinsic aspect ratio" rule of Preflight doesn't apply to svg elements, as they behave pretty much the same as imgs, in that they also accept width and height attributes and have an intrinsic aspect ratio. Adding max-width: 100% to an svg with these attributes ensures that it doesn't overflow its container, and adding height: auto ensures that changing its width (either due to the max-width: 100%, or to a w-* class) also changes the height proportionally, instead of it being locked to the value of the height attribute.

Test plan

"Works on my machine in my projects"

[coderabbitai]

Walkthrough

The change modifies preflight.css to include svg elements in the base media element styling rules. Previously, only img and video elements had constraints applied for responsive behavior (max-width: 100% and height: auto). This update extends these same constraints to svg elements, ensuring consistent scaling behavior across all media types.

Pre-merge checks

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding SVG elements to the Preflight rule that constrains media to max-width: 100% and height: auto to preserve aspect ratio.
Description check	✅ Passed	The description clearly explains the rationale for the change, noting that SVGs behave like img elements with width/height attributes and intrinsic aspect ratios, and describes the benefits of the CSS additions.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/tailwindcss/preflight.css (1)

225-230: Good change—extends responsive constraint rules to SVGs.

The addition of svg to the media constraint rule is well-motivated and consistent with existing preflight treatment. SVGs are already included in the replaced elements rule (line 210), and extending max-width: 100% and height: auto ensures they scale responsively just like images and videos. This prevents SVG overflow and allows width changes (e.g., from w-* Tailwind classes) to proportionally adjust height.

Optional: Update the comment for accuracy.

The comment on line 222 describes the rule as constraining "images and videos," but it now also applies to SVGs. Consider updating it to reflect all three element types for clarity.

 /*
-  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+  Constrain images, videos, and SVGs to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a1f533a and 615961d.

📒 Files selected for processing (1)

• packages/tailwindcss/preflight.css (1 hunks)