• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

svg 텍스트 질문

20.12.22 12:43 작성 조회수 145

0

안녕하세요 강사님 좋은 강의 많이 만들어주셔서 감사합니다

svg text를 사용해서 svg파일을 만들수는 없는걸까요?

예를들어 제가 text에 글귀를 넣고 style 태그에 구글폰트 임포트문도 추가하고 하여 글귀를 완성했습니다 html에서 

이 svg 태그를 .svg확장자로 파일을만들고 안에 복사하니 오류가 떠서 문의드립니다!  svg파일은 단순히 선이나 도형 그리기 외에는 html 태그 내에서 꾸며주어야 하는 부분으로 나눠서 생각해야 하는 건가요? 

인터렉티브웹 강의에서 canvas를 활용이 무궁무진하더라구요  svg로는 단순한 아이콘 꾸미는것만 생각이 나는데 어떤 효과를 줄수 있을까요?

답변 1

답변을 작성해보세요.

0

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

이 페이지의 예제를 보시면, <text>를 사용하고, 우리가 다른 요소에 작업하듯 <style>을 이용해 폰트 스타일 등 CSS를 적용하는 것을 보실 수 있습니다.
SVG는 주로 그래프나 데이터 시각화 분야에서 널리 쓰이는데요, 기본적으로 벡터이기 때문에 정말 여러가지로 응용하실 수 있습니다. 스크롤이나 마우스움직임, 스와이프에 따라 애니메이션 되는 인터랙션을 만들 수도 있고요. 수업 마지막에 만드는 예제도 그런 예시입니다.
viewBox 세팅에 따라 요소들이 컨테이너의 크기에 따라 유연하게 모두 조정되기 때문에, 내부 요소들이 유연하게 움직여야 하는 일반 UI에 사용하는 것도 개인적으로는 괜찮다고 생각하고 있습니다^^