Sprite 이미지 크로스 브라우징 이슈 해결

[sean2337]

Sprite 이미지 크로스 브라우징 이슈 해결

---

🏄🏼‍♂️‍ Summary (요약)

• Sprite 이미지 크로스 브라우징 이슈 해결
  사파리의 경우, 스플라이트 이미지 처리에 대해 다른 방식을 가지고 있다고 합니다. 그래서 다음과 같이 인라인 형식으로 변경하여 해당 부분을 해결하였습니다.

🫨 Describe your Change (변경사항)

• src/component/login/LoginSpriteSvg.tsx
• src/assets/svgs/spriteSvgs/loginLogo.svg => delete

🧐 Issue number and link (참고)

• 크로스 브라우징 대응 #75

📚 Reference (참조)

[leeminhee119]

오.. 혹시 참고 링크가 있다면 공유해주실 수 있을까요 ?! 🙇‍♀️ 자세한 내용이 궁금해요 !!

ㄴ 현우 : 2222 나도 궁그매 2222

[sean2337]

우선은 스플라이트 이미지에서 해당 id를 찾는데 쓰이는 use태그 사용시에 href를 사용했었는데 이는 사파리에서 적용이 안된다고 합니다.
그래서 xlink:href를 사용하여 찾는걸 진행해야 한다고 합니다.
https://stackoverflow.com/questions/43961807/svg-use-not-working-in-safari

그리고 추가적으로 제꺼에서는 xlink:href 이것만 바꾸니깐 정상 작동하긴 했는데, Sprite 이미지 자체가 브라우저에서 받아오는 과정에서 CORS 에러가 발생하는 이슈들을 확인했습니다. 그래서 밖에 두지 않고, 안에 SVG를 넣는 인라인 방식으로 변경해서 관련 에러를 미리 방지하고자 했숩니당.... 어려워~~
https://issues.chromium.org/issues/41164645

[klmhyeonwoo]

고생하셨습니다!! ✨

[leeminhee119]

우선은 스플라이트 이미지에서 해당 id를 찾는데 쓰이는 use태그 사용시에 href를 사용했었는데 이는 사파리에서 적용이 안된다고 합니다. 그래서 xlink:href를 사용하여 찾는걸 진행해야 한다고 합니다. https://stackoverflow.com/questions/43961807/svg-use-not-working-in-safari

그리고 추가적으로 제꺼에서는 xlink:href 이것만 바꾸니깐 정상 작동하긴 했는데, Sprite 이미지 자체가 브라우저에서 받아오는 과정에서 CORS 에러가 발생하는 이슈들을 확인했습니다. 그래서 밖에 두지 않고, 안에 SVG를 넣는 인라인 방식으로 변경해서 관련 에러를 미리 방지하고자 했숩니당.... 어려워~~ https://issues.chromium.org/issues/41164645

오호... 공유 감사합니다 !! 🙇‍♀️👍