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

SVG distortion using iconSprite #2879

Open
tnbnicer opened this issue Oct 2, 2021 · 1 comment
Open

SVG distortion using iconSprite #2879

tnbnicer opened this issue Oct 2, 2021 · 1 comment

Comments

@tnbnicer
Copy link
Contributor

tnbnicer commented Oct 2, 2021 •
edited
Loading

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.

icons

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.

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="icon-captions" viewBox="141 1 18 18" xmlns="http://www.w3.org/2000/svg">
        <g fill="#fff">
            <path d="M143.2 3h14c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2h-14c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2z"/>
        </g>
        <g fill="#000">
            <path d="M146.4 13.8c-.8 0-1.6-.4-2.1-1-1.1-1.4-1-3.4.1-4.8.5-.6 2-1.7 4.6.2l-.6.8c-1.4-1-2.6-1.1-3.3-.3-.8 1-.8 2.4-.1 3.5.7.9 1.9.8 3.4-.1l.5.9c-.7.5-1.6.7-2.5.8zm7.5 0c-.8 0-1.6-.4-2.1-1-1.1-1.4-1-3.4.1-4.8.5-.6 2-1.7 4.6.2l-.5.8c-1.4-1-2.6-1.1-3.3-.3-.8 1-.8 2.4-.1 3.5.7.9 1.9.8 3.4-.1l.5.9c-.8.5-1.7.7-2.6.8z"/>
        </g>
    </symbol>
    <symbol id="icon-chapters" viewBox="181 1 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M1.5,0A1.54,1.54,0,0,1,3,1.5,1.54,1.54,0,0,1,1.5,3,1.54,1.54,0,0,1,0,1.5,1.47,1.47,0,0,1,1.5,0ZM6.6,0h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,3H6.6A1.47,1.47,0,0,1,5.1,1.5,1.37,1.37,0,0,1,6.6,0ZM1.5,5A1.54,1.54,0,0,1,3,6.5,1.54,1.54,0,0,1,1.5,8,1.54,1.54,0,0,1,0,6.5,1.47,1.47,0,0,1,1.5,5ZM6.6,5h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,8H6.6A1.47,1.47,0,0,1,5.1,6.5,1.37,1.37,0,0,1,6.6,5ZM1.5,10a1.5,1.5,0,0,1,0,3A1.54,1.54,0,0,1,0,11.5,1.47,1.47,0,0,1,1.5,10Zm5.1,0h8.5a1.47,1.47,0,0,1,1.5,1.5A1.54,1.54,0,0,1,15.1,13H6.6a1.47,1.47,0,0,1-1.5-1.5A1.37,1.37,0,0,1,6.6,10Z"/></symbol>
    <symbol id="icon-fullscreen" viewBox="81 1 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M81 1.4c0-.6.4-1 1-1h5.4c.6 0 .7.3.3.7l-6 6c-.4.4-.7.3-.7-.3V1.4zm0 15.8c0 .6.4 1 1 1h5.4c.6 0 .7-.3.3-.7l-6-6c-.4-.4-.7-.3-.7.3v5.4zM98.8 1.4c0-.6-.4-1-1-1h-5.4c-.6 0-.7.3-.3.7l6 6c.4.4.7.3.7-.3V1.4zm0 15.8c0 .6-.4 1-1 1h-5.4c-.6 0-.7-.3-.3-.7l6-6c.4-.4.7-.3.7.3v5.4z"/></symbol>
    <symbol id="icon-unfullscreen" viewBox="101 1 19 18" xmlns="http://www.w3.org/2000/svg"><path d="M112.7 5c0 .6.4 1 1 1h4.1c.6 0 .7-.3.3-.7L113.4.6c-.4-.4-.7-.3-.7.3V5zm-7.1 1c.6 0 1-.4 1-1V.9c0-.6-.3-.7-.7-.3l-4.7 4.7c-.4.4-.3.7.3.7h4.1zm1 7.1c0-.6-.4-1-1-1h-4.1c-.6 0-.7.3-.3.7l4.7 4.7c.4.4.7.3.7-.3v-4.1zm7.1-1c-.6 0-1 .4-1 1v4.1c0 .5.3.7.7.3l4.7-4.7c.4-.4.3-.7-.3-.7h-4.1z"/></symbol>
    <symbol id="icon-mute" viewBox="61 1 18 18" xmlns="http://www.w3.org/2000/svg">
        <g stroke="none">
            <path d="M67 5.8c-.5.4-1.2.6-1.8.6H62c-.6 0-1 .4-1 1v5.7c0 .6.4 1 1 1h4.2c.3.2.5.4.8.6l3.5 2.6c.4.3.8.1.8-.4V3.5c0-.5-.4-.7-.8-.4L67 5.8z"/>
        </g>
        <g fill="none" stroke-linecap="round" stroke-width="1.5px">
            <path d="M73.9 2.5s3.9-.8 3.9 7.7-3.9 7.8-3.9 7.8"/>
            <path d="M72.6 6.4s2.6-.4 2.6 3.8-2.6 3.9-2.6 3.9"/>
        </g>
    </symbol>
    <symbol id="icon-unmute" viewBox="41 1 18 18" xmlns="http://www.w3.org/2000/svg">
        <g stroke="none">
            <path d="M47 5.8c-.5.4-1.2.6-1.8.6H42c-.6 0-1 .4-1 1v5.7c0 .6.4 1 1 1h4.2c.3.2.5.4.8.6l3.5 2.6c.4.3.8.1.8-.4V3.5c0-.5-.4-.7-.8-.4L47 5.8z"/>
        </g>
        <g fill="none" stroke-linecap="round" stroke-width="2px">
            <path d="M52.8 7l5.4 5.4m-5.4 0L58.2 7"/>
        </g>
    </symbol>
    <symbol id="icon-play" viewBox="1 1 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 8.5c.3.1.4.5.2.8-.1.1-.1.2-.2.2l-11.4 7c-.5.3-.8.1-.8-.5V2c0-.5.4-.8.8-.5l11.4 7z"/></symbol>
    <symbol id="icon-pause" viewBox="21 1 18 18" xmlns="http://www.w3.org/2000/svg"><path d="M24 1h2.2c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1H24c-.6 0-1-.4-1-1V2c0-.5.4-1 1-1zm9.8 0H36c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1h-2.2c-.6 0-1-.4-1-1V2c0-.5.4-1 1-1z"/></symbol>
    <symbol id="icon-replay" viewBox="161 1 18 18" xmlns="http://www.w3.org/2000/svg">
        <path d="M178 9.4c0 .4-.4.7-.9.7-.1 0-.2 0-.2-.1L172 8.2c-.5-.2-.6-.6-.1-.8l6.2-3.6c.5-.3.8-.1.7.5l-.8 5.1z"/>
        <path d="M169.4 15.9c-1 0-2-.2-2.9-.7-2-1-3.2-3-3.2-5.2.1-3.4 2.9-6 6.3-6 2.5.1 4.8 1.7 5.6 4.1l.1-.1 2.1 1.1c-.6-4.4-4.7-7.5-9.1-6.9-3.9.6-6.9 3.9-7 7.9 0 2.9 1.7 5.6 4.3 7 1.2.6 2.5.9 3.8 1 2.6 0 5-1.2 6.6-3.3l-1.8-.9c-1.2 1.2-3 2-4.8 2z"/></symbol>
    <symbol id="icon-overlay-play" viewBox="0 39 80 80" xmlns="http://www.w3.org/2000/svg">
        <g fill="#333" stroke="#fff" stroke-width="5px">
            <path d="M60.3 77c.6.2.8.8.6 1.4-.1.3-.3.5-.6.6L30 96.5c-1 .6-1.7.1-1.7-1v-35c0-1.1.8-1.5 1.7-1L60.3 77z"/>
        </g>
        <g fill="#fff">
            <path d="M2.5 79c0-20.7 16.8-37.5 37.5-37.5S77.5 58.3 77.5 79 60.7 116.5 40 116.5 2.5 99.7 2.5 79z"/>
        </g>
    </symbol>
    <symbol id="icon-loading-spinner" viewBox="160 39 75.8 77.9" xmlns="http://www.w3.org/2000/svg">
        <g fill="#fff">
            <circle cx="201.9" cy="47.1" r="8.1"/>
            <g opacity="0.4">
                <circle cx="233.9" cy="79" r="5"/>
            </g>
            <g opacity="0.6">
                <circle cx="201.9" cy="110.9" r="6"/>
            </g>
            <g opacity="0.8">
                <circle cx="170.1" cy="79" r="7"/>
            </g>
            <g opacity="0.9">
                <circle cx="178.2" cy="56.3" r="7.5"/>
            </g>
            <g opacity="0.3">
                <circle cx="226.3" cy="56.1" r="4.5"/>
            </g>
            <g opacity="0.5">
                <circle cx="225.8" cy="102.8" r="5.5"/>
            </g>
            <g opacity="0.7">
                <circle cx="178.2" cy="102.8" r="6.5"/>
            </g>
        </g>
    </symbol>
</svg>

If you can, avoid cropping SVGs using the viewBox. A better way to increase or decrease scale is editing the vector graphic.
tnbnicer added a commit to tnbnicer/mediaelement that referenced this issue Oct 4, 2021
@tnbnicer
Fixes issue mediaelement#2879
658ab69 
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).
@tnbnicer
Copy link
Contributor Author

tnbnicer commented Oct 5, 2021 •
edited
Loading

Larger buttons:
In 2017 MediaElement increased the standard button size to 20 by 20 pixels.

Let us remind ourselves of the 5.0.0 mission statement:

To be WCAG 2.1 compliant we had to introduce breaking changes. [endquote: changelog.md]

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tnbnicer