• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

SVG 태그 중 foreignObject 관련하여 질문드립니다.

22.12.25 07:34 작성 22.12.25 07:35 수정 조회수 749

0

안녕하세요

저는 데이터 시각화 개발을 하고 있는 개발자입니다.

그래서 SVG에 관심이 많고 SVG를 사용해서 차트 및 그래프를 개발하고 있는데요

1~2년 전만해도 라이브러리에 의존해서 개발하다가

현재는 다양한 기획의도를 뒷받침 하기 위해 자체 라이브러리를 만들어 사용하고 있습니다

드리고 싶은 질문은

개발을 하다보니 디자인팀의 요구사항을 SVG 고유 태그만으로는 수용이 안되어 foreignObject 태그를 사용하여 html코드를 작성하여 만들고 있는데요

혹시 foreignObject의 특징과 단점을 알 수 있을까요? 예를 들면 성능이 떨어진다든지 하는..

기존 SVG 태그를 사용하는 것보다는 뭔가 다른 점이 있을 것 같은데 검증 자료가 딱히 없고 성능 차이도 엄청 크게 차이나지는 않는 거 같아서요..ㅠ

아무튼 1분코딩님 덕분에 SVG에 대해 더 알게 되어 감사합니다.

예전에 양재동코드랩 강의 하실 때 SVG, Canvas 실강으로 들어서 도움 많이 받았는데 이렇게 온라인 강의도 만들어주셔서 감사합니다.^^

국내에는 SVG자료가 없다보니 이 강의는 정말 귀하네요

이런 강의 더 부탁 드립니다^^

감사합니다.

답변 1

답변을 작성해보세요.

1

앗 양재동코드랩에서 뵈었던 분이시군요! 반갑습니다^^
foreignObject 관련해서는 저도 많이 접해본 자료가 없어서 말씀하시는 이슈에 대해 정확히 잘 모르겠습니다^^; 예상해볼 수 있는 건, svg 요소든 foreignObject로 들어간 html이든 어차피 DOM 객체들이기 때문에 브라우저 입장에서는 비슷하지 않을까 생각됩니다. 만약 개체가 극단적으로 많아져서 성능저하가 일어나는 거라면, 아마 그냥 svg 요소들만으로 하든 foreignObject를 섞든 둘 다 느려지는 건 마찬가지 일 것 같습니다. 그때는 canvas쪽으로 옮기는게 답일 수도 있고요!

황승호님의 프로필

황승호

질문자

2022.12.26

네 답변 감사합니다.

현재 저희 회사 디자인팀이 작성해주시는 것들은 figma로 되어 있어 CSS값들이라

제가 아직 실력이 미진하여 이걸 SVG로 완벽하게 구현을 못하겠더라구요ㅠ

그래서 그래프의 선을 표현하는 부분은 path를 사용하고 나머지는 foreignObject를 사용하는 방식으로 변경하였습니다ㅎㅎ

일단은 디자인 결과물을 최대한 반영할 수 있어 스스로는 뿌듯하긴 한데..

나중에 정 성능 이슈가 발생하면 canvas도 고려해 봐야겠군요....ㄷㄷ...ㅎㅎ

답변 감사합니다

새해 복 많이 받으시고 다음에 기회가 되면 또 뵐 수 있으면 좋겠습니다ㅎㅎ

건강하세요~