0

I prepared some mask-icon for my website, but I can't find the reason why it doesn't work. I've been looking for solution for a week. And still don't understand why safari doesn't use it...

That's my svg...


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">

<g transform="scale(0.018) translate(-210.00 130.00)">

<path d="M510.565 126.145C512.886 125.506 515.225 125.358 517.475 125.628C518.702 125.482 519.95 125.459 521.201 125.572L939.51 163.064L940.379 163.165C949.285 164.396 956 172.067 956 181.204V445.797C956 455.234 948.835 463.107 939.493 463.936L516.926 501.429C515.056 501.595 513.173 501.467 511.345 501.05L510.565 500.856L374.322 463.363C366.455 461.198 361 454.004 361 445.797V181.204L361.017 180.438C361.344 172.552 366.701 165.735 374.322 163.638L510.565 126.145ZM533.682 463.38L919.81 429.122V197.865L537.441 163.594L533.682 463.38ZM397.19 195.103V431.896L497.541 459.511L501.214 166.477L397.19 195.103Z" fill="#FFFFFF"/>

</g>

</svg>

That's a tag generated by Next.js...


<link rel="mask-icon" href="/mask-icon-16s.svg" color="red">

Thank everyone in advance 🙏

1
  • When I copied your svg to a codepen I recognized some invisible control characters. Try to remove these - maybe they were introduced by encoding changes and causing troubles Commented Jul 7, 2025 at 2:29

0

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.