Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display SVG respecting viewbox #15515

Closed
camlafit opened this issue Apr 16, 2021 · 5 comments · Fixed by #15520
Closed

Display SVG respecting viewbox #15515

camlafit opened this issue Apr 16, 2021 · 5 comments · Fixed by #15520
Labels
type/enhancement An improvement of existing functionality

Comments

@camlafit
Copy link
Contributor

  • Gitea version (or commit ref): 1.4.0

Description

#14101 it's a very nice feature. But it's display on full webpage. Could be possible to display them respecting their viewbox ?

Sample

https://git.spip.net/spip/spip/src/commit/195ea6651e848bd36b6823e6419d20869e391b13/prive/themes/spip/images/article-new-16.svg is displayed on full screen but it's an icon and should be proposed on 64x64 size.

Thanks
@lunny
Copy link
Member

lunny commented Apr 16, 2021

Or we can have zoom in/zoom out

@lunny lunny added the type/enhancement An improvement of existing functionality label Apr 16, 2021
@camlafit
Copy link
Contributor Author

yes could be nice to zoom in/out from viewport as default size

@silverwind
Copy link
Member

silverwind commented Apr 16, 2021 •
edited
Loading

viewBox is not for dimensions. Try adding width and height to the <svg> tag and I imagine it would display in the proper size.

@silverwind
Copy link
Member

silverwind commented Apr 16, 2021 •
edited
Loading

Some research on the GH renderer:

  • SVG without width/height always render at 300px width/height.
  • SVG with width/height render at those dimensions but capped at 600px width/height.

We should ensure letterboxing via object-fit: contain.

@silverwind silverwind mentioned this issue Apr 16, 2021
Merged
silverwind added a commit to silverwind/gitea that referenced this issue Apr 16, 2021
@silverwind
Raw file view tweaks
84bc863 
- Limit SVG images to 600px width
- Adjust size of view toggle buttons to match other buttons
- Make Edit/Delete buttons easier to click

Had to create a separate CSS file because the less parser can not parse
CSS4 case-insensitive attribute selectors which are widely supported by
browsers.

Fixes: go-gitea#15515
6543 pushed a commit that referenced this issue Apr 22, 2021
@silverwind
Raw file view tweaks (#15520)
834fc74 
- Limit SVG images to 600px width
- Adjust size of view toggle buttons to match other buttons
- Make Edit/Delete buttons easier to click

Had to create a separate CSS file because the less parser can not parse
CSS4 case-insensitive attribute selectors which are widely supported by
browsers.

Fixes: #15515
@camlafit
Copy link
Contributor Author

\o/

@go-gitea go-gitea locked and limited conversation to collaborators Jun 4, 2021
AbdulrhmnGhanem pushed a commit to kitspace/gitea that referenced this issue Aug 10, 2021
@silverwind @AbdulrhmnGhanem
Raw file view tweaks (go-gitea#15520)
5327f26 
- Limit SVG images to 600px width
- Adjust size of view toggle buttons to match other buttons
- Make Edit/Delete buttons easier to click

Had to create a separate CSS file because the less parser can not parse
CSS4 case-insensitive attribute selectors which are widely supported by
browsers.

Fixes: go-gitea#15515
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
type/enhancement An improvement of existing functionality
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Raw file view tweaks silverwind/gitea
3 participants
@lunny @silverwind @camlafit