-
Notifications
You must be signed in to change notification settings - Fork 1.6k
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.
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
SVG distortion using iconSprite #2879
Comments
Change to the SVG template. a) viewBox size The default size is 20 x 20. For "icon-captions" and "icon-chapters" the viewBox is 18 x 18 (pixels) to display them as larger buttons. b) SVG layout Icons are arranged in the traditional formation. Top row: play | pause | unmute | mute | fullscreen | unfullscreen | [captions] | captions | replay | chapters Bottom row: overlay-play | [overlay-play] | loading-spinner CSS sources To match the SVG viewBox, the button size is increased to 1.25 rem by 1.25 (20x20 pixels).
Larger buttons: Let us remind ourselves of the 5.0.0 mission statement:
Currently, in 2021, MediaElement 5.0.0 maintainers propose reducing the button size, 18 by 18 pixels being sort of the maximum. WCAG 2.1 compliance is important. I added a PR, #2880, that retains the 2017 buttons, while compatible with MediaElement version 5, as well as backwards-compatible with the previous SVG template. This issue, if it’s fixed, distorted and misaligned icons, and ‘smaller’ buttons, chopped-off SVGs, is in the spirit of WCAG 2.1 compliance, so I hope we don’t all turn a collective blind eye to it. I hope we can sleep better at night. |
MediaElement version 5.0.0 distorts and crops SVG icons.
Cropping:
In SVG terms the viewBox attribute sets the size of the contained scalable graphic. A larger viewBox displays a smaller graphic, e.g.: “0 0 20 20” shrinks the image compared with when the size of the viewBox is “0 0 18 18”, and “0 0 16 16” upscales the vector image, displaying it larger.
Distortion:
Before MediaElement version 5.0.0 the default viewBox dimensions for button controls was 20 pixels times 20 pixels. Below is an image of 5.0.0
iconSprite
controls, where the viewBox size ranges vary, and the original MediaElement 4.2.16 icons, which adhere to the default 20 times 20 width and height.Take a closer look at the 5.0.0 ‘Mute’ icon. Its viewBox is “0 0 17.55 17.03”. (Look closely. The right edge appears cut off or flattened.) Clearly the button is shifted (to the left) away from the right. You don’t see – or you may not see it – the left edge clips part of the visible button. You must restore the icon’s viewBox, at least making it symmetrical on each side in order to correct the distortion. Undistorted (at 20 x 20 pixels in size), the ‘Mute’ icon looks similar to 5.0.0 B, which is not my recommendation, just an example of how the new template diverges from the old.
You can, incidentally, modify viewBox sizes in
mejs-controls.svg
(iconSprite). Caution! Please don’t use this template. It illustrates editing the viewBox, where width and height are the same, 18 pixels.If you can, avoid cropping SVGs using the viewBox. A better way to increase or decrease scale is editing the vector graphic.
The text was updated successfully, but these errors were encountered: