Images in an issue are mis-cropped

[jdaw1]

🏷️ Discussion Type

Bug

💬 Feature/Topic Area

Other

Body

This problem was discovered in the wild, and images are same as one of those.

Take a small SVG image, 272 bytes, width='12' height='12', and import into an issue by dragging it into the browser. Magically inserted into the issue is an HTML IMG. Then take the same src, and put it into a markdown pling-brackets-parentheses construct.

Behold mis-cropping of the first of these:

The drag-from-finder, the UI simple thing, mis-crops and should not. This seems to be a bug.

For future readers, there follows a PNG image of the relevant bit of this report (inserted by same two methods):


Not sure why the mis-colouration — not this issue. And the corner rounding in these PNGs might be the same bug.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[Mr-Nilarnab]

One additional observation that may help narrow this down:

Since the same uploaded asset renders differently depending on how it's embedded (<img> inserted by drag-and-drop vs. Markdown image syntax), the issue is probably not with the uploaded SVG itself. Instead, it suggests that the two rendering paths apply different styling or image processing.

Some things worth comparing in DevTools:

• Whether the drag-and-drop <img> receives different CSS (object-fit, object-position, overflow, border-radius, aspect-ratio, etc.).
• Whether the rendered image dimensions differ from the SVG's intrinsic viewBox and width/height.
• Whether one rendering path wraps the image in an additional container that clips the image via overflow: hidden.
• Whether the browser computes different naturalWidth/naturalHeight values for the two elements.

Because the Markdown version displays correctly while the drag-and-drop version is cropped, this looks more like a frontend rendering inconsistency than an issue with SVG parsing or upload processing.

If someone can inspect both elements in DevTools and compare the computed styles, that may quickly identify which CSS rule or wrapper is responsible for the clipping.

[jdaw1]

Drag adds some styling, including border-radius: 6px, which might be the cause of the error. Correctly, ![…](…) does not add this styling.

Perhaps drag of an SVG should not add the corner cropping — it is a breach of POLA. Should a PNG’s corners be thus cropped? I prefer not, but the case for not damaging an SVG is stronger.

Is this a bug, or a suggestion?

(And apologies: I should have inspected the generated HTML before posting.)

[Mr-Nilarnab]

@jdaw1

Thanks for checking the generated HTML—that's a valuable finding.

The fact that the drag-and-drop workflow injects additional styling (including border-radius: 6px) while the Markdown image syntax does not means the two insertion methods are no longer functionally equivalent, even though they reference the same uploaded asset.

Whether this is classified as a bug or a feature request probably depends on GitHub's intended behavior:

• If drag-and-drop is supposed to be a convenience method that produces the same visual result as the equivalent Markdown image, then the inconsistent rendering—particularly clipping of SVG content—looks like a bug.
• If the rounded corners are an intentional design choice for all drag-and-drop images, then the more specific issue is that the styling appears unsuitable for certain SVGs, where clipping can alter the image itself rather than simply changing its presentation.

One thing that may help GitHub engineers is confirming whether the clipping disappears simply by removing border-radius in DevTools. If toggling that single rule restores the SVG completely, it would provide a minimal and reproducible test case.

Regardless of whether the rounded corners are kept for raster images such as PNGs, I'd agree that vector graphics should ideally render without any unintended clipping, especially when the Markdown path already demonstrates that the uploaded asset itself is valid.