Why the screen-reader reads the styling of an SVG, when @svg directive is used (Laravel)-CodePudding

I am having an issue with an SVG that i've used, using the @svg() directive in Laravel.

Here is how I am including the svg @svg('trustpilot/5-rating').

Here is the SVG file I am including

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 37.5">
<defs>
    <style>.tp5-1{fill:#00b67a;}.tp5-2{fill:#fff;}</style>
</defs>
<title>Asset 4</title>
<g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
        <rect  width="37.5" height="37.5"/>
        <rect  x="40.63" width="37.5" height="37.5"/>
        <rect  x="81.25" width="37.5" height="37.5"/>
        <rect  x="121.88" width="37.5" height="37.5"/>
        <rect  x="162.5" width="37.5" height="37.5"/>
        <path  d="M18.75,25.27l5.7-1.44,2.39,7.34Zm13.12-9.49h-10L18.75,6.33l-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.13-5.86,5-3.59,8.08-5.86Z"/>
        <path  d="M59.38,25.27l5.7-1.44,2.38,7.34ZM72.5,15.78h-10L59.38,6.33l-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.12-5.86,5-3.59,8.09-5.86Z"/>
        <path  d="M100,25.27l5.7-1.44,2.39,7.34Zm13.13-9.49h-10L100,6.33l-3.09,9.45h-10L95,21.64l-3.09,9.45L100,25.23l5-3.59,8.09-5.86Z"/>
        <path  d="M140.62,25.27l5.71-1.44,2.38,7.34Zm13.13-9.49h-10l-3.09-9.45-3.08,9.45h-10l8.12,5.86-3.08,9.45,8.12-5.86,5-3.59,8.09-5.86Z"/>
        <path  d="M181.25,25.27l5.7-1.44,2.39,7.34Zm13.13-9.49h-10l-3.09-9.45-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.13-5.86,5-3.59,8.09-5.86Z"/>
    </g>
</g>

The issues I am having is, the screen readers are reading out what I have in defs and style tags. So it goes... .tp5-1{..... ect,ect...

I did some research and I found that I can pass some parameters to the @svg() directive, such as name, class and other parameters.

Or do you have any other suggestions? I thought as we have a title tag in the SVG that would actually be used by the screen reader but I seem to be wrong.

CodePudding user response：

It says you should be sending options, you can make something like

['class' => 'some class']

inside your @svg directive as 2. parameter.

here you can read more.

Also your svg should be like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 37.5">
    <defs>
        <style>.tp5-1{fill:#00b67a;}.tp5-2{fill:#fff;}</style>
    </defs>
    <title>Asset 4</title>
    <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
            <rect  width="37.5" height="37.5"/>
            <rect  x="40.63" width="37.5" height="37.5"/>
            <rect  x="81.25" width="37.5" height="37.5"/>
            <rect  x="121.88" width="37.5" height="37.5"/>
            <rect  x="162.5" width="37.5" height="37.5"/>
            <path  d="M18.75,25.27l5.7-1.44,2.39,7.34Zm13.12-9.49h-10L18.75,6.33l-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.13-5.86,5-3.59,8.08-5.86Z"/>
            <path  d="M59.38,25.27l5.7-1.44,2.38,7.34ZM72.5,15.78h-10L59.38,6.33l-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.12-5.86,5-3.59,8.09-5.86Z"/>
            <path  d="M100,25.27l5.7-1.44,2.39,7.34Zm13.13-9.49h-10L100,6.33l-3.09,9.45h-10L95,21.64l-3.09,9.45L100,25.23l5-3.59,8.09-5.86Z"/>
            <path  d="M140.62,25.27l5.71-1.44,2.38,7.34Zm13.13-9.49h-10l-3.09-9.45-3.08,9.45h-10l8.12,5.86-3.08,9.45,8.12-5.86,5-3.59,8.09-5.86Z"/>
            <path  d="M181.25,25.27l5.7-1.44,2.39,7.34Zm13.13-9.49h-10l-3.09-9.45-3.09,9.45h-10l8.13,5.86-3.09,9.45,8.13-5.86,5-3.59,8.09-5.86Z"/>
        </g>
    </g>
</svg>

CodePudding user response：

Thank you for your help. I have sorted out the issue by giving the style tag a parameter of area-hidden=true, which seems to have resolved the issue.

It looks like this:

<style area-hidden="true">.tp5-1{fill:#00b67a;}.tp5-2{fill:#fff;}</style>